フリップブックテクスチャ：Unity、Godot、VRChatでスプライトをアニメーションさせる方法

フリップブックテクスチャとは、シェーダーが1つのサーフェス上でフレームごとに再生するスプライトシートです。リグもタイムラインも存在せず、シートが固定グリッド内にすべてのフレームを保持し、マテリアルがそのグリッド上を一定の速度で小さなウィンドウを移動させます。8 x 8のシートには64フレームが含まれ、毎秒12フレームでは約5.3秒でループします。メッシュは変化せず、テクスチャの再アップロードもなく、アニメーション全体が1回のテクスチャルックアップで済みます。

このページでは、フリップブックシェーダーに必要な4つの数値とフレームインデックスがUV座標にどのようにマッピングされるか、Unityでフリップブックテクスチャを駆動する2つの方法、VRChatアバターでのPoiyomiフリップブックの設定方法、GodotとPhaserでの同等の手法、そしてGIFや文章による説明から独自のシートを構築する方法を解説します。

クイックアンサー

フリップブックテクスチャとは、シェーダーアニメーションとして使用されるスプライトシートで、時間の経過とともに行と列でインデックスされます。シートは1つのテクスチャスロットに配置され、シェーダーの評価ごとに経過時間とフレームレートからフレームインデックスを計算し、そのインデックスを列と行に変換して、サーフェスのUVをその単一セルに再マッピングします。frame = floor(time * fps) mod frameCount、column = frame mod columns、row = floor(frame / columns)。6 x 6のシートを10 FPSで再生すると、36フレームを3.6秒で循環し、すべてGPU上で処理され、フレームごとのアップロードもドローコールの変更もありません。

フリップブックテクスチャの仕組み

4つの数値がアニメーションを定義します。ColumnsとRowsはシートのレイアウトを表します。Frame countは通常Columns×Rowsで、インデックスが折り返す値です。Frame rateはインデックスが進む速度です。それ以外のすべて — フィルタリング、ラップモード、UVインセット — は、サンプラーが現在のセルの外側を読み取らないようにするために存在します。

インデックスの計算式は短く、書き出しておく価値があります。経過時間tが与えられた場合：frame = floor(t * fps) mod frameCount、column = frame mod columns、row = floor(frame / columns)。UVウィンドウは、tiling = (1 / columns, 1 / rows)、offset = (column / columns, row / rows)となります。多くの人がつまずくのは垂直方向です。ほとんどのシート作成ツールは画像の上部に行0を書き込みますが、UnityとGodotのUV原点は左下にあります。Unityで上段優先のシートを使用する場合、offset.yは1 - (row + 1) / rowsとなり、そうしないと行が反転して再生され、アニメーションの最初のフレームがシートの最終行になります。

フィルタリングが結果のクリーンさを決定します。シートのラップモードをClampに設定してください。Repeatでは、テクスチャの右端でのサンプルが左端を読み取るため、フレーム0のピクセル列が各行の最後のフレーム内に表示されます。ハードエッジのピクセルアートではミップマップをオフにしてください。ミップチェーンが隣接するセルを平均化し、サーフェスが数メートル離れるとアニメーションが崩れてしまいます。対象のエンジンやシェーダーがミップマップを強制する場合は、各セルの周囲に1～2ピクセルの透明なガターを残すか、UVウィンドウを4辺すべてでハーフテクセル分インセットしてください。

Unityでのフリップブックテクスチャ

2つの方法があり、それぞれ異なる形で失敗します。1つ目は、行と列のインデックスを自身で管理しアニメーションするシェーダーです。2つ目は、Animationウィンドウでマテリアルのタイリングとオフセットをキーフレームし、通常のLitまたはUnlitシェーダーがサンプリングを行う方法です。1つ目はゲーム時間と同期する必要があるエフェクトに適しており、2つ目はAnimatorステートによってアニメーションを駆動し、シーン内の他のすべてと一緒にタイムラインで表示する必要がある場合に適しています。

いずれの場合も、まずスプライトシートのインポート設定を行ってください：Wrap Mode Clamp、Mip Maps off、Filter Mode Point、ピクセルアートでは圧縮なし。これら3つの設定が、シェーダーの計算よりも多くのフリップブックのバグを引き起こします。

方法1：行と列のインデックスを持つシェーダー

Shader Graphでは、FlipbookノードがColumns、Rows、時間駆動のフレームインデックスを受け取り、再マッピングされたUVを出力します。手書きのシェーダーでは、_Columns、_Rows、_Fpsをプロパティとして公開し、頂点またはフラグメントステージでセルを計算します。オブジェクト間でアニメーションを同期させる必要がある場合は、各マテリアルで_Time.yを個別にサンプリングするのではなく、スクリプトのfloatからフレームインデックスを駆動してください。そうしないと、同じオブジェクト上の2つのフリップブックがずれる可能性があります。

方法2：Animationウィンドウでタイリングとオフセットを駆動する

この方法では、テクスチャの_STベクトルをアニメーション化します。ビルトインのStandardとUnlitは_MainTex_STを使用し、URP LitとUnlitは_BaseMap_STを使用します。Tilingは(1, 1 / rows)に固定され、offset.yのみが変化します。以下の手順はこの方法に適用されます。

VRChat向けPoiyomiフリップブック

PoiyomiシェーダーのFlipbookセクションは、マテリアル自体でUVウィンドウをシート上でスクロールさせるため、1つのマテリアルスロットでアバターメッシュ上のアニメーションスプライトを表示できます。Rows、Columns、フレームレートが公開されており、シェーダー時間で実行させる代わりにフレームインデックスを自分で駆動するモードもあります。

グリッドではなく単一行のストリップを使用してください。ストリップではシェーダーがステップする軸が1つになるため、垂直方向の継ぎ目が完全に排除されます。グリッドの場合、UVウィンドウは各行の終わりに次の行へ移動する必要があり、その境界でのフィルタリング、ミップレベル、ハーフテクセルの丸め誤差によって隣接する行がサンプリングされます — 再生中に異なるフレームの細い帯として見えます。ストリップではフレームインデックスも単純な乗算になります：UVでのフレーム幅は1 / frameCount、オフセットはframe / frameCountです。256 x 256セルの8フレームアニメーションの場合、ストリップは2048 x 256となり、2のべき乗を維持します。

アルファはフラットなシーンよりもアバターでより重要です。スプライトにハードエッジがある場合は、CutoutまたはOpaqueを使用してください。Transparentキューのフリップブックは深度を書き込まず、アバター上ではボディや互いにソートされ、カメラアングルによって挙動が変化します。可能であれば、アニメーションするサーフェスをすでにアバターにあるマテリアルに配置してください — 追加のマテリアルスロットはアバターのパフォーマンスランクに影響します。同期パラメータを持つAnimatorステートからフレームインデックスを駆動すると、すべてのクライアントが同じフレームを表示します。シェーダー時間から計算されたフレームインデックスはローカルで評価され、視聴者によってループの異なる位置になる可能性があります。

GodotとPhaserでのフリップブック

Godot 4では、2Dの方法はSpriteFramesリソースを持つAnimatedSprite2Dです。シートをインポートし、SpriteFramesを開き、HframesとVframesを列数と行数に設定し、アニメーションのフレームを追加してから、アニメーションの速度をフレーム毎秒で設定し、Loopをオンにします。SpriteFramesはアニメーションをフレームインデックスのリストとして保存するため、グリッドシートも単一ストリップもUV計算なしで機能します。

アニメーションが1つだけ必要な場合は、通常のSprite2Dの方が軽量です：HframesとVframesを一度設定し、AnimationPlayerから整数のframeプロパティをステップ補間で進めます。デフォルトのイージングカーブでframeをトゥイーンしないでください — 値は整数インデックスであり、補間すると単一の値に切り捨てられるか、2つのセル間でちらつきます。

Godotで3Dサーフェス上のフリップブックの場合、Unity版と同じ行と列の計算を持つShaderMaterialが最短経路です：uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows)、行はフレームインデックスから計算します。GodotのUV原点はUnityと同じ左下なので、上段優先のシートには同じ垂直反転が必要です。

Phaser 3では、シートは一度ロードされ、ロード時にスライスされます。frameWidthとframeHeightがセルを定義し、framesは左から右、上から下に番号が付けられ、アニメーションは座標ではなくフレーム番号で識別されます — シェーダーを書く必要も、間違える可能性のある行と列の計算もありません。

3D上でスプライトシートをライブに動かす

このセクションのプレイアブルシーンは、Neta Studioの3Dゲームビルダーで動作するThe Cyclops' Islandです。画面上のフリップブックは、上述したものと同じインデックスからUVへの操作であり、Three.jsシェーダーでGPU上で評価されています — 違いは、実際のメッシュ、実際のシーン上で動作し、操作できるカメラと動くライトがあることです。

これは聞こえ以上に重要です。フラットなUnityシーンでのフリップブックは通常正面から見られるため、継ぎ目のにじみやミップブレンドは見えにくいものです。アニメーションするサーフェスの周りを浅い角度でカメラを動かすと、問題がすぐに現れます：フレームエッジでの隣接セルの帯、最後のミップレベルが2つのフレームを平均化してぼやける、または正面からは正しく見えるアルファエッジが横から消えるなどです。ブラウザビルドは、シートの作成とサーフェス上での確認の間のループを、ビルドステップなしで反復できるほど短くします。

Mini Worldは、単一のシートをテストするためにより小さなシーンです — メッシュ数が少なく、ロードが短くなっています。Agent Sprite Forgeは、まだシートがない場合にフレームを生成し、両方のシーンが同じフリップブックパスで動作するため、Mini Worldで正しく見えるシートはThe Cyclops' Islandでも同じように動作します。

自分のシートを作る

使用可能なシートへのルートは3つあります：既存のGIFを変換する、グリッドを単一のストリップに切り出す、または文章による説明からフレームを生成する。3つとも同じファイルに到達します — すべてのセルが同じサイズで、左から右、上から下に配置され、シートの幅がセル幅のきれいな倍数である1つのPNGです。

GIFの変換は、最も隠れた作業が多いルートです。GIFは完全なフレームの連続ではないからです。フレームはしばしば前のフレームに対する部分的な差分であり、遅延は100分の1秒単位でフレームごとに保存されます。フリップブックシェーダーは1つのフレームレートしか受け付けないため、可変タイミングはエクスポート前に重複フレームに平坦化する必要があります。

グリッドをストリップに切り出すのは機械的です：必要な行を保持し、高さを1セルにクロップし、幅をフレーム数×セル幅のままにします。グリッドシートを単一のアニメーションとして使用する場合に適した方法です。垂直軸とそれに伴う継ぎ目が排除されるからです。説明から生成するのが3つ目のルートです — Agent Sprite Forgeはアクションとフレーム数を受け取り、固定セルサイズのシートを返します。これにより、1つずつエクスポートしたフレームを手作業で位置合わせする必要がなくなります。

その世界に足を踏み入れる

スプライトは立ち場所のないキャラクターです。最後のステップは、他にはないものです：今作成したシートを、誰かが歩き回れる世界に配置します — 小さな島、惑星、雨の降る街角。このサイトのすべての世界は1つの文章による説明から作られ、プレイできるページとして公開されています。

FAQ