画像・動画からスプライトシートへの変換 — PNGフレームからゲーム用アトラスへ

画像からスプライトシートへのコンバーターは、PNGフレームの連番、または短い動画を読み込み、ゲームエンジンに渡せる1枚のアトラスにまとめます。Neta Studioでは変換がすべてブラウザ内で実行されます。アップロード待ちも、サーバーとの往復もなく、ファイルがお使いのマシンから出ることはありません。連番のPNGをまとめたフォルダ、または単一のMP4をドロップし、列数、行数、セルサイズ、背景除去を設定して、対応するJSONマニフェスト付きのシートを書き出します。

実際に問題になるのはパッキングではありません。問題となるのは、並び順（frame_10 が frame_2 より前にソートされる）、パディング（フィルターが隣接セルをサンプリングしてフリンジが発生する）、そしてセルサイズ（シートの寸法がグリッドで割り切れず、最後の列がクリップされる）です。このページでは、それぞれを具体的に解説し、さらに動画からフレームを切り出す方法と、実際の 3D ワールド内でアニメーションさせて結果を確認する方法を扱います。

画像または動画をドロップ

最初の画面には 1 つのドロップターゲットと 2 つの分岐があります。PNG、WebP、JPG フレームのフォルダまたは複数選択をドロップすると、ツールは入力を順序付き画像シーケンスとして扱います。ブラウザがデコードできる単一の動画ファイル（MP4、WebM、MOV）をドロップすると、抽出分岐に切り替わり、サンプルレートを選択すると WebCodecs パス、またはフォールバックとして非表示の video 要素でフレームを取得します。

どちらの分岐も同じエディターに到達します。右側にセルのグリッド、左側に設定列、そしてシートをその場でスクラブできるライブプレビューです。エクスポートを押すまでディスクには何も書き込まれません。デコードは静止画ではメインスレッド、動画ではワーカーで行われるため、4K クリップでも UI は応答性を保ちますが、300 フレームの PNG シーケンスではデコード中に描画が一時的にブロックされます。

ドロップが拒否された場合、その理由はほぼ次の 3 つのいずれかです。動画コーデックがお使いのブラウザでデコードできない（MOV の HEVC でよくある）、画像の寸法が一致していない、またはフレーム数が設定したグリッドのセル上限を超えている。ツールは該当ファイルを通知し、黙って破棄することはありません。

PNG フレームからスプライトシートを作成する方法

並び順は最初の判断であり、ファイル名が一貫していないとツールが間違える可能性があります。デフォルトのコンパレーターは各ファイル名をテキストと数値のランに分割して比較するため、walk_0001.png … walk_0048.png は正しい順序になり、walk_1.png … walk_48.png も同様です。フレームがタイムスタンプや UUID で命名されている場合、ソート順は任意になります。先に名前を変更するか、パッキング前にサムネイルストリップをドラッグして並べ替えてください。

アニメーションから想定されるフレーム数と照合します。12フレームの待機ループと24フレームの歩行サイクルは、小さいサイズのサムネイルグリッドでは同じに見えます。プレビューを開き、最後のセルまでスクラブして、先頭に戻る前のフレーム——つまりループの破綻が最も現れやすいフレーム——であることを確認します。

すべてのフレームは同じ幅と高さでなければなりません。パッカーは最初の画像の寸法を使用し、それ以降で異なるファイルは拒否します。書き出しツールがトリミング時に1pxの境界線を追加した場合や、スプライトを異なるアンカーで出力した場合、それらのフレームが外れ値となるため、ここでパディングを加えるのではなく、元データ側で修正してください。

動画をスプライトシートに変換する

動画からのフレーム抽出では、結果が使用可能かどうかを決める数値が1つあります。抽出レートです。動画は通常24、30、60 fpsですが、スプライトアニメーションでそこまでのレートが必要になることはほとんどありません。30 fpsのクリップを3秒間にわたって30 fpsでサンプリングすると90セルになり、不必要に大きなアトラスが生成されます。同じクリップを12 fpsでサンプリングすると36セルになり、ほとんどのキャラクターの動きでは再生結果に違いがありません。

抽出レートはソースではなく、アニメーションの想定再生レートに合わせて選択します。スプライトをゲーム内で12 fpsで再生するなら、12 fpsで抽出します。後からタイミングを変更する予定がある場合は24で抽出し、エンジン側で1セルおきに間引きます。シートは大きくなりますが、選択肢を残せます。

セルサイズは、適用した拡大縮小後の動画の寸法から決まります。1920×1080のクリップを480×270に縮小すると、セルは480×270になります。ソースのアスペクト比は維持してください。不均一な拡大縮小はすべてのフレームを歪め、どのパディング設定でも修正できません。動画にレターボックスがある場合は、後からキーアウトするのではなく、抽出前に黒帯をクロップしてください。動く被写体が黒帯の色に触れる可能性があるためです。

PNG からスプライト：透明度とパディング

アルファチャンネルを保持します。報告されるパッキングの問題のほとんどは、書き出し時に RGBA を RGB に統合するコンバーターに起因しており、キャンバスの塗りつぶしに応じてすべての透明ピクセルが黒または白になります。このツールでは、書き出しキャンバスが不透明な背景なしで作成されるため、キー処理済みまたは事前キー処理済みの PNG はパッキング中もアルファを保持します。

パディングが必要なのは、テクスチャフィルタリングがセルの外側をサンプリングするためです。スプライトの端では、バイリニアまたはトライリニアフィルターが隣接セルのピクセルを読み取ってブレンドするため、隣接するスプライトに応じて色が変わる 1px のフリンジが発生します。各セルの周囲に 2px の透明パディングを設けると、フィルターが外側に到達しなくなります。パディング値はマニフェストに書き込まれるため、エンジンはアトラスを読み取る際に UV をパディング分だけオフセットできます。

2 のべき乗のシート寸法は、ほとんどのエンジンでは必須ではなくなりましたが、それを前提とするハードウェアや古いパイプラインでは依然として役立ちます。columns と rows を設定して、(cell + 2 × padding) × columns と (cell + 2 × padding) × rows が 256、512、1024、2048、4096 になるようにします。グリッドが均等に分割されない場合、最後の行または列が切り取られるか、空きスペースで埋められます。ツールは最終的なシート寸法をリアルタイムで表示するため、書き出す前に確認できます。

セルサイズの自動検出

ツールはソースからセルサイズを読み取ります。画像シーケンスの場合は、デコードされる最初のフレームの寸法を使用します。動画の場合は、スケール後の出力寸法を使用します。その値は Cell size フィールドに事前入力され、既定のグリッドの計算に使用されるため、64×64 のフレームのフォルダーは 64×64 のセルで開きます。

被写体の周囲の透明マージンが被写体より大きい場合は、この設定を上書きしてください。余白を多めに付けて書き出されたスプライトでは、セルの大半が空になり、アトラスは必要以上に大きくなります。トリム設定は、全フレームにわたる非透明ピクセルのバウンディングボックスを求め、その和集合に合わせてクロップします。フレーム単位ではありません。フレームごとのトリムでは、アニメーション時にスプライトが揺れるためです。

フレームが不揃いな場合は、逆にこの設定を上書きしてください。ある書き出しパスでアウトラインが追加されたために、シーケンスに 64×64 と 66×66 が混在していると、セルサイズ検出は最初のファイルに固定され、残りのフレームはスケーリングされるか拒否されます。ソース側で修正してください。サイズが合わないフレームを正しく扱えるセルサイズは存在しません。

3D でのアニメーションを確認

スプライトシートは、実際に再生されて初めて正しいと言えます。The Cyclops' Island は Neta Studio 上で動作するプレイアブルワールドで、スプライト調のキャラクターを使用しています。アトラスを動かしながら確認する最も手早い方法であり、キャラクターを歩かせてループポイントを観察し、カメラを引いてフィルタリングが有効になったときにパディングの縁が現れるかどうかを確認できます。

テストを自作したい場合は、3Dゲームビルダーでエクスポートした PNG とそのマニフェストをシーンに配置し、タイマーで UV オフセットを制御できます。フレーム時間を選択した抽出レートに設定すれば、意図した速度でアニメーションが動作します。ここで不具合が見えるなら、お使いのエンジンでも不具合が発生します。原因はほとんどの場合、マニフェストのセル値またはパディング値です。

Mini World は、シートを貼った平面と周回できるカメラだけが欲しい場合に適した小規模なサンドボックスです。スプライトの端にある不正なキーを発見するには、多くの場合これで十分です。

その他の無料ツール

コンバーターは、同じエディターとエクスポート形式を共有する3つのツールと並んでいます。一方で作成したシートは、変換なしでもう一方で開けます。

GIF to sprite sheet は、アニメーション GIF を読み込んでフレームを抽出します。GIF のフレーム遅延はフレームごとに設定されるため、このツールは各遅延を読み取り、一定であると仮定するのではなく、シートの実効再生レートを報告します。Sprite sheet to GIF は逆方向の処理です。セル上の時間範囲を選択し、指定したフレーム遅延でアニメーション GIF をエクスポートします。PNG を配布せずにループを共有したい場合に便利です。スプライトアニメーターは、シートとマニフェストを読み込み、速度、方向、ループのコントロールを備えたキャンバス上で再生するため、エンジンに導入する前にフレームタイミングを確認できます。

各ツールは同じ形状のマニフェストをエクスポートします。セル幅、セル高さ、列数、行数、パディング、および順序付きフレームリスト。そのため、動画抽出ツールで作成しアニメーターで使用するシートは、同じ数値をそのまま引き継ぎます。

その世界の中を歩いてみる

スプライトとは、立ち位置を持たないキャラクターです。最後の一手は、他にはない当サイトだけのものです。作成したシートを、誰かが歩き回れる世界に配置します。小さな島、惑星、雨の降る街角などです。このサイト上のすべての世界は、ひとつの記述から作られ、そのまま遊べるページとして公開されています。