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

スプライトシートとは、アニメーションの全フレームを固定のグリッドまたはストリップ状に配置した単一の画像であり、レンダラーが数十個のファイルを読み込む代わりにフレームごとに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ピクセルの場合、パディングが8ピクセルを消費するため、8個ではなく7個のセルしか収まりません。スライスコードを書く前に、パディングとスペーシングを考慮する必要があります。

原点が重要になる場面

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

スプライトシート vs spritesheet vs スプライトアトラス

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

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

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

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

グリッドシートは、画像をできるだけ正方形に近づけるためにフレームを行と列にパックします。これは、一部のハードウェアではテクスチャメモリとGPUサンプリングが正方形または2の冪の寸法に有利であり、正方形のシートは画像エディタでプレビューしやすいためです。グリッドはエンジン側スライスの既定であり、セルサイズとフレーム数を設定すると、エンジンがグリッドを行ごとに走査します。

横方向フレームストリップは、すべてのフレームを1行に配置します。これはシェーダーとフリップブックテクスチャが想定するレイアウトです。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 Forge3Dゲームビルダーが使用するシートにキャラクターフレームを生成してパックするための、スプライトに特化したツールです。

用語集

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

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

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

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