スプライトシート解説：フォーマット、ツール、あらゆるアニメーションの変換方法

スプライトシートとは、アニメーションの全フレームを固定のグリッドまたはストリップ状に配置した単一の画像であり、レンダラーは多数のファイルを読み込む代わりに、フレームごとに1つの領域をサンプリングできます。3Dアニメーションからフレームを書き出した後、キャラクターがガタつく理由や背景が黒くなる理由を突き止めなければならなかった経験があれば、その問題はたいていスプライトシートにあります。

このページでは全体像を扱います。シートとは実際に何か、アトラスとの違い、グリッドと横方向のストリップをいつ使い分けるか、どのフォーマットで書き出すか、そしてGIF・画像・動画のソースをブラウザ内で使用可能なシートに変換する方法です。例では、私たち自身のツールとワールド — Agent Sprite Forge、The Cyclops' Island、Mini World、そして3Dゲームビルダー — を参照しています。これらは私たちが提供しテストしているパイプラインだからです。

スプライトシートとは

スプライトシートとは、各アニメーションフレームが規則的なグリッド内で均等なサイズのセルを占めるラスター画像です。シート自体はどのセルがどのフレームかという意味情報を持ちません。その対応付けは、ファイル命名規則、サイドカーJSONインデックス、またはエンジンのアニメーション設定のいずれかに存在します。シートを分割するために知っておくべき4つの項目は、セルの幅と高さ（ピクセル単位）、列数、行数、そして原点です（ほとんどのエンジンでは左上ですが、一部のフレームワークは左下を前提とします）。

これら4つの値のいずれかが誤っていると、失敗は即座に目に見えます。セル幅が33ではなく32だと、シートを進むにつれて各フレームが1ピクセルずつ右にずれ、ゆっくりとした水平方向のドリフトとして見えます。原点が誤っていると、アニメーションが上下反転します。フレーム数が誤っていると、最後のフレームが欠落し、歩行サイクルは接地ポーズではなくスナップで終わります。これらはレンダリングのバグではなく、メタデータの不一致です。

シートの構造

シートは表として考えるとわかりやすいです。列と行はピクセル寸法に暗黙的に含まれます。総幅をセル幅で割ると列数になり、総高さをセル高さで割ると行数になります。512×128でセルが64×64のシートは、8列2行なので16フレームです。セル間に1ピクセルのパディングを加えると計算が変わります。幅512ピクセル、セル64ピクセル、パディング1ピクセルの場合、7セルしか収まりません。パディングが8ピクセルを消費するためです。パディングとスペーシングは、分割コードを書く前に考慮に入れる必要があります。

原点が重要になる場面

ほとんどのWebGLおよびcanvasパイプラインは、画像の左上を原点とし、画像編集ツールが使用する座標系と一致します。一部のゲームエンジンや古いフレームワークはY軸を反転し、左下を原点と想定します。スプライトが上下逆に表示される場合は、何かをリサイズする前に原点を確認してください。修正は通常、1行のトランスフォームか、行の順序を逆にして再生成することであり、完全な再書き出しではありません。

Sprite sheetとspritesheetとsprite atlas

表記は標準化されていません。スペースを入れた「Sprite sheet」が一般的な英語表記で、ほとんどのドキュメントやチュートリアルがこれを使用します。スペースがコード上で扱いにくいため、1語の「spritesheet」はコード識別子、ファイル名、一部のエンジンAPIに現れます。検索エンジンはほぼ同義語として扱うため、どちらの表記でも同じ手法が見つかります。

本当の違いは、シートとアトラスの間にあります。スプライトシートは、必須のインデックスを持たないパック済み画像です。スプライトアトラスは、同じパック済み画像に加えて、どこに何があるかを示す機械可読な記述 — 通常はJSON、XML、またはバイナリファイルで各領域に名前を付けたもの — を伴います。このインデックスにより、ピクセル座標をハードコードすることなく、ツールがアイドルフレーム、走行フレーム、攻撃フレームを見つけられます。フレームが均一でループが単純なら、プレーンなシートで十分です。不規則な領域や名前付きの状態がある場合は、アトラスが必要です。

• シート均等なサイズのフレームのグリッドまたはストリップ。メタデータは不要。分割は算術で行えます。
• Spritesheet同じものですが、1語で表記されます。コードやアセットのファイル名で一般的です。
• アトラスパック済みフレームに加えて、名前やIDを矩形にマッピングするインデックス。座標計算の代わりに名前で参照できます。

グリッドシートと横方向のフレームストリップ

グリッドシートは、フレームを行と列に詰めて画像を正方形に近づけます。これは、一部のハードウェアではテクスチャメモリとGPUサンプリングが正方形または2の累乗の寸法を好むため、また正方形のシートは画像エディタでプレビューしやすいためです。グリッドはエンジン側の分割のデフォルトです。セルサイズとフレーム数を設定すると、エンジンがグリッドを行ごとにたどります。

横方向のフレームストリップは、すべてのフレームを単一の行に配置します。これはシェーダーとフリップブックテクスチャが想定するレイアウトです。UVオフセットが単一の乗算になるためです。フレームインデックスをフレーム数で割るとXオフセットになり、Yは一定のままです。ストリップを前提とするシェーダーにグリッドシートを渡すと、アニメーションは行をまたいでサンプリングし、意図しない方法でラップします。グリッドを前提とするエンジンの分割ツールにストリップを渡すと、ストリップを1つの非常に幅の広い行として扱うか、行をまったく見つけられません。

失敗の現れ方は、最初はたいてい微妙です。アニメーションは再生されますが、タイミングがおかしい、またはフレームが順不同で繰り返されます。アニメーションロジックをデバッグする前に、レイアウトが消費側と一致しているかを確認してください。私たちの3Dゲームビルダーでは、スプライトベースのキャラクターはグリッドを使用します（エンジンが分割を処理するため）、火や水のようなシェーダー駆動のエフェクトはストリップを使用します（マテリアルが直接サンプリングするため）。

どのフォーマットで書き出すか

PNGが安全なデフォルトです。完全なアルファをサポートし、可逆圧縮で、あらゆるエンジンとブラウザがデコードします。ハードエッジでフラットな色のスプライトには、PNGはよく圧縮できます。写真のような、または陰影の多いスプライトには、WebPが同じ視覚品質で通常より小さなファイルを生成し、現在のすべてのブラウザがサポートします。ファイルサイズが重要で、対象のランタイムがデコードできることを確認できる場合はWebPを使用してください。GIFは配信用フォーマットであり、制作フォーマットではありません。1ビットの透過しかサポートしないため、半透過のピクセルはすべて完全に不透明か完全に透過のどちらかになります。ソースにソフトエッジがある場合、GIFはフリンジを生じさせます。

フレームが単純な均一グリッドでない場合、名前付きの状態が必要な場合、または消費側がアトラスを想定している場合は、JSONサイドカーを含めてください。サイドカーは小さく、座標をハードコードする必要をなくします。フレームが均一でアニメーションが単一のループであれば、省略してエンジンに矩形を計算させることができます。スプライトをJPEGで書き出さないでください。JPEGは非可逆でアルファチャンネルがないため、透過は黒か白のどちらかになり、圧縮アーティファクトはスプライトのシルエットを定義するハードエッジにちょうど乗ります。これを修正する設定はありません。

すべてのコンバーター

これらは私たちが提供する変換パスです。いずれもブラウザ内で動作するため、何もインストールせずにファイルをドロップしてスプライトシートを得られます。一般的なソース — アニメーションGIF、静止画像、動画クリップ — を網羅しています。

アニメーションGIFの場合、コンバーターは各フレームを展開し、シートまたはストリップに詰めます。要求があればフレーム遅延をサイドカーに保持します。静止画像の場合、コンバーターは提供された一連の画像を切り抜いてグリッドに配置します。動画の場合、コンバーターは選択したレートでフレームをサンプリングし、シートに書き込みます。サンプリング間隔とセルサイズは制御できます。The Cyclops' Island用のキャラクターやMini World用の小道具を作成する場合は、手持ちのソースフォーマットから始め、対応するコンバーターを選んでください。

• GIFからスプライトシートアニメーションGIFをフレームごとに展開し、フレームをグリッドまたは横方向のストリップに詰めます。
• 画像からスプライトシート一連の静止画像を受け取り、一貫したセルサイズの均一なグリッドに配置します。
• 動画からスプライトシート選択した間隔で動画からフレームをサンプリングし、シートまたはストリップに書き込みます。
• Agent Sprite Forgeキャラクターフレームを生成し、3Dゲームビルダーが使用するシートに詰めるための、スプライトに特化したツールです。

用語集

これらはスプライトシートのドキュメント、エンジン設定、シェーダーコードを読む際に登場する用語です。定義はあえて短くしています。

• アトラス領域のパック済み画像に加えて、名前やIDを矩形にマッピングする機械可読なインデックス。
• セルシート内で1つのフレームを保持する矩形。その幅と高さがセルサイズです。
• フレームストリップフレームを単一の横方向の行として配置したシート。シェーダーとフリップブックテクスチャで使用されます。
• フリップブック時間の経過とともに一度に1つの領域をサンプリングしてアニメーションを生成するテクスチャ。通常はフレームストリップから作られます。
• インデックスアトラス内の領域に名前または番号を付けるサイドカーデータ。これがない場合、分割は算術になります。
• 原点画像またはセルにおいて座標を測定する基準の角。通常は左上または左下です。
• パディングシート内のセル間の余分なピクセル。テクスチャの滲みを防ぐために使用されます。パディングは収まるセル数を変えます。
• スペーシングセル間の距離。パディングと同義で使われることが多いですが、別々に数える場合もあります。

それが属する世界を歩いてみる

スプライトは、立つ場所のないキャラクターです。最後のステップは、他にはないものです。作ったシートを、誰かが歩き回れる世界 — 小さな島、惑星、雨の街角 — に置きます。このサイトのすべてのワールドは、1つの書かれた記述から作られ、プレイ可能なページとして公開されています。