フリップブック

ひとことで

爆発や炎のような「形が変化するもの」を、あらかじめ描いた連番画像（コマ）を 1 枚のテクスチャに並べ、時間に合わせて表示するコマを切り替えて動かす手法です。パラパラ漫画（flipbook）と同じ原理で、テクスチャシートアニメーション、スプライトシートとも呼ばれます。シミュレーションや手描きで作った複雑な動きを、板 1 枚のコストで再生できます。

ゲームでの使いどころ

• 爆発・炎・煙：流体シミュレーションで作った爆発を 8×8 = 64 コマなどに焼き込んで再生するのは、今でも最も一般的な方法です。
• 魔法陣・エネルギー弾：手描きのアニメーションエフェクト。
• 水しぶき・血しぶき：短い一瞬の形の変化。
• 2D ゲームのキャラクター：スプライトアニメーションそのもの。

しくみ

$C \times R$ 個のコマを格子状に並べたテクスチャ（アトラス）で、コマ番号 $f$ の UV は次のように計算します。

$\mathbf{uv}$ は板の中での 0〜1 の座標です（テクスチャの原点が左下のため行を反転しています）。コマ番号は粒子の年齢から決めます。

コマ数が少ないとカクカクした再生になります。フレームブレンドでは、現在のコマと次のコマを両方サンプリングし、端数 $\text{fract}(\text{age} \times \text{fps})$ で混ぜることで滑らかにします。さらに高度な方法として、コマ間の画素の移動量を別テクスチャ（モーションベクトル）に保存し、UV をずらしながら補間する「フレーム補間（motion vector flipbook）」があり、少ないコマ数でも非常に滑らかになります。

実装のポイント

• 粒子ごとに開始コマや速さを変える：同じ爆発でも、再生速度や回転、左右反転を粒子ごとに変えると繰り返し感が減ります。
• ミップマップのにじみ：縮小表示でミップマップが隣のコマの色を混ぜ、コマの縁に線が出ることがあります。各コマの周囲に余白を設けます。
• 解像度とコマ数の兼ね合い：2048×2048 のテクスチャで 8×8 コマなら、1 コマは 256×256 です。画面上の大きさと必要な滑らかさから決めます。

つまずきやすい点

• テクスチャが大きい：コマ数 × 解像度で容量が増えます。色は低解像度、形は高解像度など、チャンネルパッキングで工夫することもあります。
• ループの継ぎ目：炎のようにループさせる素材は、最後のコマから最初のコマへ自然につながるように作る必要があります。
• 視点による違和感：板に焼き込んだ 2D の絵なので、視点を回り込んでも形は変わりません。近くで大きく映る爆発には、ボリューム表現や複数の板の組み合わせを使います。

デモで試すこと

1. 左奥のパネルは爆発の元画像（16 コマのアトラス）です。水色の枠が、いま手前で表示しているコマを示します。
2. 「再生コマ数」を 4〜6 まで下げると、爆発がカクカクと形を変えます。そこで「コマ間をクロスフェード」をオンにすると滑らかになります。
3. 同じアトラスから、場所と大きさと回転を変えるだけで、見た目の異なる爆発が次々に生まれていることを確認してください。