スプライトシートメーカー：無料オンラインシート＆アトラスビルダー

スプライトシートメーカーの役割は1つです。個別のフレームをまとめて、既知の座標を持つ1枚の画像にパックします。PNG、JPG、WebPファイルを読み込み、列数、パディング、スケールを選択すると、PNGと、各フレーム名をx、y、width、heightの矩形にマッピングするJSONアトラスが出力されます。レンダラーが正しいセルを描画するために必要なのは、この矩形だけです。

この用語は2つの異なるツールを指します。1つはパッカーです。すでにフレームがあり、それを1枚のシートにまとめたい場合に使います。もう1つはジェネレーターです。プロンプトを書くと、一貫したスタイルのアニメーションキャラクターシート全体が得られます。Neta Studioのブラウザベース3Dワールドビルダーはその両方を扱い、出力は変換ステップなしでThree.jsシーンにそのまま組み込めます。

フレームからスプライトシートを作成

これがパッキングの経路です。フレームをドロップすると、シートは決定的に構築されます。左から右へ、上から下へ、指定した順序で並びます。最初のフレームがセル(0,0)を占め、2番目のフレームは1つ右のセルに配置され、行が埋まるまでこれが続き、その後パッキングは次の行に折り返します。

ここでは順序が何よりも重要です。パッカーはファイル名でソートせず、名前からアニメーショングループを推測することもありません。フレームにframe_1.pngからframe_8.pngまでの番号が付いていて、順序を間違えてドロップすると、書き出されたシートは誤ったものになり、JSONアトラスも誤った順序を忠実に記録します。ドロップする前にソートするか、書き出す前にサムネイルストリップを確認してください。

出力は2つのファイルです。PNGはパックされた画像です。JSONはフレーム名をキーとする小さなオブジェクトで、各値が矩形と元のサイズを保持します。ほとんどのエンジンはこのJSONをそのまま利用できます。利用できない場合でも、数値は手作業で再マッピングできるほど単純です。

プロンプトからスプライトシートを生成

スプライトメーカーの2つ目の意味は、グリッドパッキングとは関係ありません。キャラクターを説明すると、完全なシートが返ってきます。一貫したスタイルで描画されたポーズ一式が、すでにグリッドに配置された状態です。ソースアートをドロップする必要はありません。アートは出力そのものだからです。

有用なのは一貫性です。歩行サイクルの8方向を1回のパスで生成すると、シルエット、パレット、プロポーションがセル間で揃います。各フレームを別々のリクエストで生成すると揃わず、そのずれはフレーム間でキャラクターの質量が変わったように見える形で現れます。

Neta Studioは8方向の歩行サイクル、待機、攻撃、詠唱のセットを生成します。Agent Sprite Forgeは、これらのシートを生成するスタジオ内のアセットです。生成されたシートを3Dゲームビルダーのワールドにドロップし、パッカーが生成するはずだったのと同じアトラスJSONで駆動できます。

列数、パディング、スケール、JSONアトラス

4つの設定がシートを使い物になるかどうかを決めます。書き出し時に正しく設定してください。後から修正するとなると、再パッキングと、古い座標を参照していたすべてのアニメーションの再テストが必要になります。

JSONアトラスはシートとコードの間の契約です。フレームごとに、セルの位置とサイズを記録します。シートを変更してアトラスを再生成しないと、スプライトは誤った領域をサンプリングし、隣接フレームの帯がセルににじみ出ます。

テクスチャアトラスとは

アトラスとは、多数の小さな画像を収めた1つのテクスチャと、それぞれがどこにあるかを記述するテーブルです。スプライトシートは、それらの小さな画像が同一の被写体のアニメーションフレームである一般的なケースです。

アトラスが存在する理由はドローコールです。フレームごとに別々のテクスチャをバインドすると、レンダラーはそれぞれの間で状態を切り替える必要があり、画面に多数のスプライトがあると、状態変化がフレーム時間を支配します。すべてを1つのテクスチャにパックすれば、グループ全体でバインドは1回です。ジオメトリは依然としてスプライトごとに描画されますが、テクスチャは変わりません。

トレードオフは、編集が大まかになることです。1つのフレームを変更すると、シートを再パッキングしてアトラスを更新する必要があり、古い矩形を保持しているコードはすべて誤ったものになります。だからこそ、アトラスは座標をハードコードするのではなくデータとして書き出されます。スプライトシートガイドでは、パッキングの判断についてより詳しく扱っています。

RPG、プラットフォーマー、アイソメトリック向けスプライトシートジェネレーター

望ましいレイアウトは、ほとんどジャンルによって決まります。RPGは方向とアニメーションのフェーズでインデックスするため、グリッドが自然に読めます。プラットフォーマーは通常一度に1つのアクションを実行するため、横長ストリップのほうが単純です。アイソメトリックのワールドでは、スプライトが重ならないよう、セルの寸法をダイヤモンド投影に合わせる必要があります。

列数を設定する前にレイアウトを選び、そのレイアウトに合わせて参照コードを書きます。ストリップベースのインデックスにグリッドを後付けするのは、機械的ですが退屈な変更で、すべてのアニメーション呼び出し箇所に影響します。

キャラクタースプライトシート

キャラクターが複数になると、キャストの一貫性を保つのが難しくなります。個別にはもっともらしいシートも、パレットがずれたり、プロポーションが変化したり、同じシーンに立つキャラクター間で光の方向が反転したりすると、全体として破綻します。

キャラクターのアクションセット全体を、アクションごとではなく1回のパスで生成します。パレットとプロポーションはパス内のポーズ間では引き継がれますが、パス間では引き継がれず、2体のキャラクターが同じフレームに収まった瞬間にその差は見えます。

キャスト内のすべてのキャラクターでセルサイズを同一に保ちます。アートがセルを埋めていなくても構いません。セルが統一されていれば、シーンはキャラクターごとのオフセットテーブルなしで、どのキャラクターをどのスロットにも配置できます。キャラクタースプライトメーカーのユースケースでは、キャスト全体についてこれを順を追って説明しています。

既存のシートを分割する

すでにシートがあり、フレームを取り出したい場合、それはパッキングではなくスライスであり、逆の操作です。GIFコンバーターとアニメーターがこの経路を扱います。シートを渡し、セルグリッドまたはフレーム境界を定義すると、個別のフレームが得られます。

スライスが失敗する原因は2つあります。パディングが不均一なシートは、推測したセルサイズで均等に分割できないため、画像幅を推定列数で割るのではなく、既知のセルを測定してください。非可逆形式から書き出されたシートはセル境界に沿って圧縮アーティファクトを帯びており、セルを分離して拡大するとそれらが見えるようになります。

その世界に入り込んで歩く

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

FAQ