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

フリップブックテクスチャとは、シェーダーが1つのサーフェス上で1フレームずつ再生するスプライトシートです。リグもタイムラインも不要で、シートはすべてのフレームを固定グリッドに格納し、マテリアルはそのグリッド上を一定速度で小さなウィンドウを移動させます。8 x 8のシートには64フレームが含まれ、毎秒12フレームなら約5.3秒で1ループします。メッシュは一切変化せず、テクスチャの再アップロードも不要で、アニメーション全体のコストはテクスチャ参照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)。10 FPSの6 x 6シートは、36フレームを3.6秒で循環し、すべてGPU上で行われ、フレームごとのアップロードやドローコールの変更はありません。

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

4つの数値がアニメーションを定義します。列と行はシートのレイアウトを記述します。フレームカウントは通常、列×行であり、インデックスがラップする値です。フレームレートはインデックスが進む速度です。その他すべて — フィルタリング、ラップモード、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) となります。垂直方向は、人々がつまずく部分です。ほとんどのシート作成ツールは、画像の上部に row 0 を書き込みますが、Unity と Godot の UV 原点は左下にあります。Unity でトップ行ファーストのシートでは、offset.y は 1 - (row + 1) / rows となり、そうでないと行が反転して再生され、アニメーションの最初のフレームがシートの最後の行になります。

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

Flipbook texture in Unity

There are two routes, and they fail in different ways. Route one is a shader that owns the row and column index and animates itself. Route two is the Animation window keyframing the material's tiling and offset while a plain Lit or Unlit shader does the sampling. Route one is better for effects that must stay in sync with game time; route two is better when you need the animation driven by an Animator state and visible in the timeline alongside everything else in the scene.

Either way, set the sprite sheet import first: Wrap Mode Clamp, Mip Maps off, Filter Mode Point, and no compression on pixel art. Those three settings cause more flipbook bugs than the shader math does.

Route 1: a shader with a row and column index

In Shader Graph, the Flipbook node takes Columns, Rows and a time-driven frame index and outputs the remapped UVs. In a hand-written shader, expose _Columns, _Rows and _Fps as properties and compute the cell in the vertex or fragment stage. If the animation has to be in sync across objects, drive the frame index from a script float rather than sampling _Time.y independently in every material, so two flipbooks on the same object cannot drift apart.

Route 2: the Animation window driving tiling and offset

This route animates the texture's _ST vector. Built-in Standard and Unlit use _MainTex_ST; URP Lit and Unlit use _BaseMap_ST. Tiling stays fixed at (1, 1 / rows) and only offset.y changes. The steps below apply to this route.

VRChat 向け Poiyomi Flipbook

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

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

アルファは、フラットなシーンよりもアバター上でより重要になります。スプライトにハードエッジがある場合は、Cutout または Opaque を使用します。Transparent キューの Flipbook は深度を書き込まず、アバター上では身体や互いに対してソートされ、その結果はカメラアングルによって変わります。可能な限り、アニメーションする表面はすでにアバターにあるマテリアル上に保ってください。余分なマテリアルスロットは 1 つごとにアバターのパフォーマンスランクに影響します。フレームインデックスを同期パラメーターを持つ Animator state から駆動する場合、すべてのクライアントが同じフレームを見ます。shader time から計算されるフレームインデックスはローカルで評価されるため、視聴者ごとにループ内の異なる位置になることがあります。

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

Godot 4 の 2D では、AnimatedSprite2D と SpriteFrames リソースを使用するのが正攻法です。シートをインポートし、SpriteFrames を開き、Hframes と Vframes を列数と行数に設定し、アニメーションのフレームを追加した後、アニメーションの速度をフレーム毎秒で設定し、Loop を有効にします。SpriteFrames はアニメーションをフレームインデックスのリストとして保存するため、グリッドシートでも単一のストリップでも、UV 計算を自分で行うことなく動作します。

アニメーションが 1 つだけ必要な場合は、通常の Sprite2D の方が軽量です。Hframes と Vframes を一度設定し、整数の frame プロパティを AnimationPlayer からステップ補間で進めます。デフォルトのイージングカーブで 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 でスプライトシートをリアルタイムに反転する

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

これは言葉の印象以上に重要です。フラットな Unity シーン内のフリップブックは通常正面から見られるため、シームの滲みやミップの混色は確認しにくくなります。アニメーションするサーフェスに対して斜めの角度からカメラを動かすと、問題はすぐに現れます。フレーム端に隣接セルの帯が見える、最後のミップレベルが 2 つのフレームを平均してぼやける、あるいはアルファのエッジが正面からは正しく見えて側面からは消える、といった具合です。ブラウザビルドでは、シートを制作してからサーフェス上で確認するまでのループが、ビルドステップなしで反復できるほど短くなります。

Mini World は単一のシートをテストするためのより小さなシーンで、メッシュ数が少なく読み込みも短時間です。Agent Sprite Forge はシートがまだない場合にフレームを生成します。どちらのシーンも同じフリップブックの経路で動作するため、Mini World で正しく見えるシートは The Cyclops' Island でも同じように動作します。

自分のシートを作成する

使用可能なシートにたどり着く経路は 3 つあります。既存の GIF を変換する、グリッドを切り出して 1 本のストリップにする、記述からフレームを生成する、のいずれかです。3 つとも同じファイルに収束します。すべてのセルが同じサイズで、左から右、上から下へと配置され、シートの幅がセル幅の整数倍である 1 枚の PNG です。

GIF の変換は最も手間の見えにくい経路です。GIF は完全なフレームの連続ではないためです。フレームは前のフレームに対する部分的な差分であることが多く、遅延はフレームごとに 100 分の 1 秒単位で保存されます。フリップブックシェーダーは 1 つのフレームレートしか受け付けないため、可変のタイミングは書き出し前に重複フレームへと平坦化する必要があります。

グリッドからストリップへの切り出しは機械的な作業です。必要な行を残し、高さを 1 セルに切り詰め、幅はフレーム数 × セル幅のままにします。グリッドシートを単一のアニメーションとして使う場合に適した方法で、垂直方向の軸とそれに伴うシームを排除できます。記述からの生成は 3 つ目の経路です。Agent Sprite Forge はアクションとフレーム数を受け取り、固定のセルサイズでシートを返すため、1 フレームずつ書き出したものを手作業で位置合わせする必要がなくなります。

それが属する世界に足を踏み入れてください

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

FAQ