GIF 轉翻頁貼圖 — 把任何 GIF 打包成 Unity 與 VRChat 用的影格長條
自己做 gif 轉翻頁貼圖
把 GIF 打包成單列翻頁貼圖，給 Unity、Godot 或 VRChat 用。自動切格、可直接使用的列／欄中繼資料、透明背景。
GIF 是一條時間軸。翻頁貼圖就是把同一條時間軸打包進一張圖，讓著色器用索引一格一格走過去，而不是讓播放器去逐格跳。你把 GIF 丟進工具，它偵測影格數、尺寸與延遲，然後輸出一條單列或切格的長條，附上列與欄的中繼資料，讓你貼進材質。
這頁講的是 gif 轉翻頁貼圖對 Unity、Godot 與 VRChat 實際上會產出什麼——翻頁著色器需要的那四個數字、Poiyomi 材質上要設什麼、以及什麼時候影格長條比切格好用。輸出是一張透明背景的 PNG，旁邊附上列／欄數量純文字。
丟入 GIF
工具本體就是第一個畫面。拖放區在最上面，下面全部都是輸出。把 GIF 拖進去，工具會讀取影格數、每格延遲、畫布尺寸與處置方式（disposal method）。它會先回報讀到什麼，才開始寫檔，因為現實世界裡的 GIF 對這四件事的說法都不一致。
通常有兩件事需要你決定。第一，延遲不均：大多數翻頁著色器是以固定 FPS 前進，所以延遲混雜的 GIF 必須重新取樣成固定速率，或是以它最慢的共同影格時間匯出。第二，處置方式：如果 GIF 只在影格之間重畫有變動的區域，你直接疊圖就會出現鬼影。工具會先把每一格合成到完整畫布上再打包，所以局部重畫會變成完整影格。
合成完成後，打包器會寫出一張圖。一個 24 格、128x128 的 GIF 會變成 3072x128 的長條。同樣的影格排成 6x4 網格則是 768x512。兩者像素相同，差別在於著色器對 UV 怎麼處理。
01
把 GIF 拖到拖放區。讀取回報的影格數、延遲與畫布尺寸。
02
選擇打包版面：UV 捲動著色器用單列，圖集與引擎匯入用切格。切格的欄數會自動挑選，讓圖片盡量接近正方形。
03
如果 GIF 的影格延遲不均，選擇重新取樣速率。預設是中位延遲；如果你的著色器以固定速率前進，就挑一個固定 FPS。
04
匯出。你會得到一張透明背景的 PNG，外加列、欄、影格數與 FPS 的純文字，可以直接貼進材質或腳本。
翻頁貼圖是什麼
翻頁著色器讀四個數字：列、欄、目前索引、FPS。它取一個 0 到 1 的 UV 座標，切成列／欄的儲存格，再用目前索引位移那個儲存格。貼圖本身是靜態的。索引不動，什麼都不會動。
索引通常是從時間推出來的。用單列長條時，索引等於 floor(時間乘以 FPS)，U 座標再位移索引除以欄數。用切格時，索引同時決定列：列等於 floor(索引除以欄數)，欄等於索引對欄數取餘數。這就是為什麼單列長條比較簡單——只有一個維度要走。
列與欄必須跟圖片完全吻合。一條 3072x128 的長條，標明 24 欄 1 列，取樣才會正確。標成 23 欄，每一格都會偏掉一個儲存格的分量，看起來就是一條斜向拖影。標成 1 欄，你只會得到一張靜止圖。這兩個錯誤佔了壞掉的翻頁貼圖的大多數。
FPS 跟影格數是兩回事。24 格的長條跑 12 FPS，一秒钟循環兩次。跑 24 FPS，一秒循環一次。貼圖資料完全相同，只有時鐘變了。把 FPS 跟列、欄數量放在同一個地方，它們才不會走鐘。
那四個數字
列、欄、索引、FPS。列與欄描述貼圖。索引與 FPS 描述時間。列與欄在匯出時就固定。索引是動態的，屬於著色器或腳本。FPS 對大多數著色器來說是固定的，但你想要控制速度時，也可以讓參數去驅動它。
如果你的著色器有速度或播放速率參數，它乘的是時間項，不是 FPS 常數。把匯出的 FPS 當成基準速率，速度為 1 時中繼資料才有意義。
Unity 用的翻頁貼圖
在 Unity 裡，翻頁貼圖通常是貼在 quad 或粒子上的材質。匯入 PNG 時開 sRGB，影格小的話關 mipmap，alpha 當透明。Wrap mode 要設 Clamp，不是 Repeat——會重複的翻頁貼圖會在 UV 邊界把最後一格接到第一格，出現一條一像素的接縫。
驅動索引有兩種做法。用 Unlit 或內建翻頁節點的 Particles 著色器時，你把 tiling 設成列與欄，再餵它一個 0 到 1 的混合值。用自訂著色器時，UV 數學自己寫，把列、欄、FPS 開成材質屬性，這樣不用重新編譯就能改。
你要貼進去的中繼資料：列、欄、影格數、匯出的 FPS。如果你的著色器用的是正規化混合值而不是整數索引，混合範圍是 0 到影格數除以總格數——24 格單列是 0 到 1，6x4 網格 24 格佔滿 24 格也是 0 到 1。局部填滿的網格就是常讓人踩雷的情況：6x4 網格只放 20 格，終點是 20 除以 24，約 0.833。走超過就會取到空格。
- 透明背景匯出的 PNG 保留 alpha，所以貼在 quad 上的翻頁貼圖不需要相乘混色或去背色。原始 GIF 如果有襯底色，會改寫進 alpha。
- 小尺寸不要 mipmap每邊小於 256 像素的影格，最好關掉 mipmap。mip 鏈的生成會把長條裡相鄰的影格混在一起，距離一遠，翻頁貼圖就變成所有影格的平均值。
- Clamp 環繞模式Repeat 環繞會取樣到接縫對面。把 wrap U 與 V 設成 Clamp，最後一格才不會滲到第一格。
VRChat 用的 Poiyomi 翻頁
Poiyomi 內建翻頁節點，這是嘴巴說話、捲動螢幕或角色上兩格切換的常規做法。節點吃一張貼圖、一組列與欄、一個混合值。VRChat 不會在執行時跑腳本給的自訂著色器程式碼，所以索引必須來自會動畫的材質屬性或動畫控制器驅動的參數。
網格跟材質一樣重要。翻頁貼圖貼在平面上讀起來正確；同一張貼圖貼在曲面上，UV 分布不均的地方儲存格就會被拉開。翻頁材質請留在平面或接近平面的網格上。
動畫是循環的時候，Poiyomi 用單列版面，因為 UV 數學只有一次乘法加一次加法。動畫是一組你想直接跳過去的離散狀態時，用切格版面——四種嘴形的嘴巴，用 4x1 網格加整數索引去想，比用捲動好懂。
01
除非你需要離散狀態，否則就匯出單列版面。確認列等於 1、欄等於影格數。
02
把 PNG 匯入 Unity。Wrap mode 設 Clamp，開 sRGB，alpha 設為透明，小貼圖關 streaming。
03
在 Poiyomi 裡建立 Flipbook 節點。指定貼圖。列與欄填匯出的值。
04
驅動混合輸入。循環的話，餵它一個從動畫浮點參數來的時間值。離散狀態的話，餵一個轉成混合值的整數索引。
05
設定 alpha 與 render queue。需要淡出的翻頁貼圖，透明設定跟材質其他部分一樣——不要另外開 cutout。
06
先在 Play 模式測，再進角色上傳測。確認循環點：最後一格後面要直接接第一格，中間不能停頓。
影格長條 vs 切格：該匯出哪個
像素資料完全相同。選擇的關鍵是誰要消費它。著色器要長條。引擎與精靈系統要網格。依消費者挑，不要依檔案大小挑——長條比較寬、網格比較方，同樣的總像素量下兩者壓縮率差不多。
長條只有一列，所以 V 座標用不到，著色器只要位移 U。指令比較少，能出錯的地方也比較少。網格兩個軸都用，這正是圖集式系統預期的格式。不確定的話，先匯出長條，等有引擎匯入器要求網格再重匯。
還有一種情況是精靈動畫器要單獨的影格。有些引擎要的是一整個資料夾的 PNG，不是圖集。工具可以把影格分開寫出，但這樣磁碟上的東西就是所有影格的總和，而不是單一檔案，匯入設定也得逐格調。
| 消費者 | 版面 | 它讀什麼 | 備註 |
|---|---|---|---|
| 著色器翻頁 | 單列 | 列 1、欄 N、U 位移 | UV 指令最少，循環最容易 |
| 精靈圖集 | 網格 | 列 M、欄 N、儲存格尺寸 | 儲存格尺寸等於畫布尺寸 |
| 精靈動畫器 | 網格或分開的 PNG | 影格順序與 FPS | 分開的 PNG 就失去單檔打包的好處 |
| 引擎匯入 | 網格 | 列、欄、影格數 | 圖片盡量接近正方形，才不會撞到貼圖上限 |
在 3D 裡跑一遍
把翻頁貼圖貼在靜止平面上證明不了什麼。你真正要檢查的是那些只有動起來才會出現的問題：接縫會不會繞回來、距離一遠 alpha 還撐不撐得住、攝影機移動時 FPS 感覺對不對。The Cyclops' Island 是在 3D game builder 裡做的可玩場景，表面會即時動畫，所以你可以讓翻頁貼圖在幾何旁邊跑，而不是在檢視器裡看。
打開它，沿著表面走，盯著循環點。如果翻頁貼圖少了一格、或多了一欄，你在那裡就會看到——明顯的頓點或斜向拖影——而且是在你上傳素材之前。這就是可玩場景的全部理由：這種失敗是視覺上的失敗，而視覺上的失敗需要一個視埠。
同一個場景也可以當參考，看翻頁影格在不同距離與攝影機角度下讀起來怎樣。128 像素近看沒問題的影格，沒有 mip 控制時遠處就會走樣；遠處看起來沒問題的影格，近看可能太糊。兩者在移動中都比較好判斷。
走進它所屬的那個世界
精靈是一個沒有地方站的角色。最後這一步是別人沒給的：把你剛做好的精靈表放進一個有人能走進去逛的世界——一座小島、一顆行星、一個下雨的街角。這個網站上每個世界都是從一段文字描述做出來的，並發布成一個可以玩的頁面。
常見問題
Poiyomi 翻頁是什麼？ +
Poiyomi 是給 Unity 與 VRChat 用的著色器套件，它的 Flipbook 節點會取樣打包好的影格長條，讓材質不必靠動畫控制器就能循環播放影格。你給它貼圖、列與欄、以及一個混合值。混合值就是推動索引的東西，通常由一個會動畫的浮點參數驅動。
為什麼我的翻頁貼圖會出現斜向拖影？ +
標明的欄數跟圖片不符。一條 24 格的長條被當成 23 欄來取樣，每一格都會偏掉一個儲存格的分量，累積起來就是橫跨長條的斜向拖影。把匯出的欄數跟實際影格數再核對一次。
我該匯出長條還是網格？ +
著色器翻頁就匯出單列，因為 UV 數學只有一個維度，循環也很單純。精靈圖集與要求列欄的引擎匯入器就匯出網格。像素都一樣，差別只在消費者。
怎麼保住透明背景？ +
匯出時把 alpha 寫進 PNG，而不是壓平到某個顏色上。匯入時把 alpha 設為透明，sRGB 保持開啟。如果原始 GIF 用的是襯底色而不是真正的透明，工具會把完整影格合成到透明畫布上，襯底色就不會留著。
我的 GIF 影格延遲不均，該用什麼 FPS？ +
挑一個固定速率。預設是中位延遲，通常跟 GIF 在瀏覽器裡看起來的樣子很接近。翻頁著色器是以固定時鐘前進，混雜的延遲不重新取樣成單一影格時間就無法表示。
為什麼我的翻頁貼圖在循環點會頓一下？ +
要嘛影格數裡多算了一格重複的最後影格，要嘛 FPS 跟來源差了一點。把匯出的影格數跟 FPS 值一起檢查。會停頓的循環幾乎都是多了一格，而不是著色器的問題。
回到 3D Game Builder
全部 31 個完成的 3D 世界、遊戲與場景都在同一頁——每一個都能玩。
看翻頁可用的長條
這個素材庫裡每一份素材都是透明、可直接進遊戲的 PNG，並且附上產生它的提示詞——精靈表資源與免費精靈表，依動作、風格與主題標籤分類。免費瀏覽與下載。