維基

本指南將協助你快速開始使用 JSON Optimizer。

1. 載入專案： 使用 InputNode 載入你的 .json、.atlas 與 .png 檔案。
2. 選擇預設（Plus 模式）： 在 Plus 模式下，使用右側面板選擇內建預設之一（例如："Basic Fallback"）。系統會自動為你建立最佳化圖。在 Free 模式下，請手動建立最小圖：InputNode → QuantizerNode → OutputNode。
3. 執行圖： 點擊「執行管線」按鈕。
4. 比較結果： 切換到「檢視器」分頁，視覺化比較原始與最佳化後的動畫。
5. 檢視變更： 在「結果」與「統計」分頁中，你可以查看哪些鍵被修改或刪除的詳細資訊。

本文說明節點圖中插槽使用的資料型別，以及哪些可以彼此連接。

快速規則

大多數處理節點都在Spine Payload 上運作。與 atlas 相關的節點會使用Atlas Project 或Sprites。若不確定插槽需要什麼，請使用 ValidatorNode。

插槽類型

• Spine Payload — 多數處理節點使用、適合 runtime 的 Spine 專案表示。
• Atlas Project — atlas 中繼資料 + page 圖片，供 atlas 節點使用。
• Sprites — 解包後的 sprite 圖片/region（Atlas Unpacker → Asset Viewer / Atlas Repacker）。
• JSON — 原始或重建的 Spine JSON，用於診斷/驗證/比較差異。
• Changes — 一些最佳化器產生的 diff 清單/串流，供 viewer/報告節點使用。

鍵 → 型別 → 連接到

實用管線

• 基本 JSON 最佳化：InputNode →（可選：DiagnosticNode / filters）→ 最佳化器（RDPNode、SplineNode、QuantizerNode、…）→ OutputNode。
• Atlas 重新打包：InputNode.atlas_project → AtlasUnpackerNode →（可選：AssetViewerNode）→ AtlasRepackerNode → OutputNode.atlas_project/atlas_assets。

re-polish 提供兩種訂閱等級，以滿足不同需求。

Free 方案

• ✓ 基本節點圖
• ✓ JSON 檢視器
• ✓ 可在多條軌道播放動畫並可調整動畫之間混合的時間軸
• ✓ 有限的優化
• ✓ Spine 版本：4.2、4.1、4.0、3.8、3.7

Plus 方案（$5/月）

• ✓ 所有免費功能
• ✓ 涵蓋關鍵影格、曲線與貼圖的最佳化工具組
• ✓ 將物理烘焙成關鍵影格
• ✓ 清理烘焙後的關鍵影格為曲線
• ✓ 圖表預設
• ✓ 優先支援

如何取得 Plus

點擊頂部導覽列的 Upgrade 按鈕，接著：

• 選擇 Get Plus
• 系統會將你導向 Patreon — 完成訂閱
• 使用同一個 Patreon 帳號保持登入並回到節點編輯器，服務會驗證帳號綁定並啟用 Plus
• （可選）輸入啟用碼（適用於特殊優惠）

所有最佳化方法可分為兩種類型：

• 無損： 這些方法只會移除冗餘資料...
  例：Spline 最佳化節點、CleanupNode。
• 有損： 這些方法會簡化動畫曲線...
  例：RDP 最佳化節點、QuantizerNode。

建議： 一律先從無損最佳化開始。只有在需要進一步縮小檔案大小時才使用有損，並務必以視覺方式檢查結果。

要了解優化的有效性，請注意以下指標:

• 檔案大小: .json 檔案的最終大小是優化的主要目標。
• 關鍵影格數量: 在「統計」標籤中，您將找到顯示每個動畫中刪除了多少關鍵影格的表格和圖表。
• 視覺比較: 始終使用「檢視器」標籤比較「之前」和「之後」的動畫。確保有損優化沒有引入不可接受的視覺偽影。
• 「結果」表中的報告: 在這裡，您可以詳細檢查對資料所做的每項特定變更。

檢視器 分頁會在畫布上方覆蓋一個 控制 面板。它分成三個群組:

動畫控制

• 動畫 — 選擇正在播放的 Spine 動畫。
• 外觀 — 選擇套用的外觀。
• 速度 — 播放速度倍率（0.1× → 3.0×）。

視圖控制

• 重置視圖 — 還原預設的相機/版面位置。
• 視圖選項 — 用於定位對比視圖的數值偏移: 間距 X / 間距 Y（原始/優化 之間距離）以及 偏移 X / 偏移 Y（全域位移）。

除錯控制

• 除錯模式 — 啟用除錯渲染覆蓋層（取決於執行階段支援）。
• 啟用物理 — 切換物理模擬（若骨架使用物理）。
• 標籤 — 切換標籤覆蓋層。

Performance 面板會顯示目前播放中的骨架（可為多個）的即時 runtime 指標。

即時

• FPS — 由監測器量測的每秒幀數。
• Frame Time — 每幀耗時（毫秒，越低越好）。
• FPS chart — 以長條顯示最近 120 筆樣本。

骨架指標

• Visible Slots — 最近一次取樣時可見的 slot 數量。
• Avg. Visible — 可見 slot 的移動平均（比單一幀更穩定）。
• Vertices — 目前用於渲染的頂點數。
• Bounds (px) — 目前骨架邊界（寬×高），單位像素。
• Avg. Bounds — 邊界的移動平均。
• Largest Texture — 針對此骨架偵測到的最大 atlas 頁（以尺寸計）。
• Texture Memory — 已載入 atlas 頁面的預估總貼圖記憶體。若可用，面板也會顯示每頁拆分（檔名、尺寸與預估大小）。

改善（當 Optimized 可用時）

• Slot Improvement — 比較 Original 與 Optimized 的 Avg. Visible。
• Memory Change — 比較 Original 與 Optimized 的 Texture Memory。

時間軸面板是位於檢視器底部的可停駐動畫序列器。它可讓您在多個軌道上排列動畫片段、控制播放以及預覽轉場。

軌道 & 片段

• 最多 4 條動畫軌道 — 每條軌道對應一個 Spine trackIndex 層。較高的軌道會混合在較低軌道之上。
• 新增動畫 — 點擊任一軌道上的 + 按鈕以開啟動畫選擇器（附搜尋過濾器）。
• 拖動 & 調整片段大小 — 拖動片段主體沿軌道移動；拖動左/右邊緣可改變起始時間或持續時間。
• 刪除片段 — 選取片段後按 Delete 或 Backspace。
• 重疊偵測 — 同一軌道上重疊的片段會以紅色標示。

傳輸控制

• 播放 / 暫停 / 停止 — 標準播放控制。
• 上一個 / 下一個 — 跳至上一個或下一個片段的開頭。
• 動畫速度 — 從 0.1× 到 3.0× 的滑桿。
• 自動停止 — 播放到時間軸結尾時自動停止。

轉場混合

• 全域混合時長 — 設定連續片段之間的預設交叉淡入淡出時間。
• 逐轉場覆蓋 — 點擊兩個片段之間的轉場氣泡可設定自訂混合時長。您可以將個別覆蓋重設回全域值。

搜尋 & 拖曳

• 播放頭 — 拖動時間尺上的控制點或點擊尺規以跳轉。
• 游標時間預覽 — 將滑鼠懸停在軌道區域上會顯示游標下方的時間。
• Web Worker — 搜尋與事件計算會卸載到背景 worker 以確保流暢效能。

物理感知播放

• 在 Update（作用中的約束）和 None（停用）之間切換物理。
• 搜尋時，骨架時間會向前推進以正確穩定物理約束。

多骨架支援

• 目標配對選擇器 — 每條軌道可鎖定所有配對（🌐 所有配對）或特定骨架。
• 逐骨架位置與縮放 — 為個別骨架設定 X/Y 偏移與縮放輸入。
• 繪製順序 — 數值輸入以控制渲染層優先順序。

除錯繪製

切換顯示：骨骼、骨骼名稱、區域、網格、外殼、邊界、路徑、裁剪、點。

皮膚選擇

所有已載入骨架中定義的皮膚的多選複選框。

檢視設定

• 間距 X / Y — 骨架配對之間的間距。
• 偏移 X / Y — 全域視口偏移。
• PMA 切換 — 預乘 alpha 模式（Spine 3.x）或圖集 alpha 模式（Spine 4.x：auto / pma / bleed / none）。
• 骨架標籤 — 切換標籤覆疊。

錄製器可將檢視器中的 Spine 動畫擷取為影片、動態圖片或圖片序列。

錄製模式

• ⚡ 快速錄製 — 使用 MediaRecorder + captureStream() 進行即時擷取。僅輸出 WebM。速度快但受限於即時幀率。
• 🎬 HQ 匯出 — 使用 WebCodecs VideoEncoder + readPixels() 進行離線逐幀渲染。支援所有格式並產出像素精確的輸出。

輸出格式

• 影片：WebM、MP4、AVI、MOV
• 動態圖片：GIF、Animated PNG (APNG)
• 圖片序列：PNG Sequence、WebP Sequence

編解碼器（HQ 匯出）

VP8、VP9、H.264 (AVC)、AV1、ProRes — 可用編解碼器依瀏覽器支援自動偵測。

品質

• 預設：低（~1 Mbps）、中（~3 Mbps）、高（~5 Mbps）、無損（~20 Mbps）。
• 自訂位元率 — 以 kbps 指定進行精細控制。

時間

• FPS：24、30、60 或自訂（1–120 fps）。
• 暖機 — 錄製開始前讓物理/約束穩定的秒數。
• 結尾暫停 — 保持最後一幀指定時長。
• 包含最後一幀 — 切換。

視口 & 裁剪

• 啟用/停用裁剪 — 切換裁剪區域。
• 裁剪矩形 — 以 Spine 世界座標表示的 X、Y、寬度、高度。
• 對齊配對 — 自動將裁剪區域對齊到骨架配對，可設定內距。
• 互動裁剪覆疊 — 直接在視口中拖動角落/邊緣。

解析度

• 縮放模式 — 百分比滑桿（10%–400%）。
• 固定模式 — 明確的像素尺寸（最大 4096px）。
• 計算後的輸出解析度即時顯示。

渲染選項

• 渲染骨骼 — 包含除錯骨骼覆疊。
• 渲染圖片 — 包含附件圖片。
• 渲染其他 — 邊界框、路徑。
• MSAA — None / 2× / 4× 反鋸齒。
• 平滑 — 0–8 級，可選擇演算法（Bicubic / Bilinear）。

背景

• 透明 — 對不支援 alpha 的格式自動停用（例如 GIF、JPEG）。
• 純色 — 自訂顏色選擇器。
• 棋盤格 — 透明度視覺指示器。
• Alpha 通道支援：VP9+WebM、AV1+MP4、PNG Sequence、APNG、WebP Sequence。

HUD 覆疊

• 切換：軌道資訊、時間、幀號、FPS、骨架標籤。
• 自訂文字 — 浮水印字串。
• 位置 — 4 個角落（左上、右上、左下、右下）。
• 字型大小 — 8–64px，附文字顏色選擇器。

重複 & 多骨架

• 重複次數 — 1–100 次循環。
• 目標配對 — 錄製特定骨架或全部。
• 骨架模式 — 合併（單一檔案）/ 分開檔案（每個骨架一個檔案）。

檔名範本

含變數的範本字串：{project}、{animation}、{W}、{H}、{fps}。已解析檔名的即時預覽會顯示。

時間軸整合

錄製範圍會以紅/橙色虛線片段顯示在時間軸上。拖動邊緣調整範圍大小、拖動主體重新定位，或使用設定按鈕（⚙️）開啟完整錄製設定。

結果 分頁會顯示詳細的優化輸出。

• 結果表 — 以「每項變更一列」的方式呈現 JSON 優化結果（例如哪個 動畫/骨骼/屬性/關鍵影格 被修改或移除）。
• 精靈/圖集對比 — 使用紋理優化時，此區塊會比較精靈尺寸與打包結果。

提示: 使用此視圖來回答: 到底改了什麼？

統計 分頁會以圖表與彙總指標來總結優化結果。

• 優化圖表 — 視覺化優化對整個資料集的影響（當 JSON 優化產生變更時）。
• 指標表 — 重要數字，例如原始/新大小與縮減百分比。
• 紋理打包統計 — 若使用圖集重新打包，會顯示頁數、總/已用面積、效率，以及每頁拆解。

使用此分頁來回答: 整體提升了多少？

以下整理自官方 YouTube 播放清單的完整實例管線。

開啟完整播放清單

範例