スプライトシートの作り方：連番画像・動画・キャラクター画像1枚から

スプライトシートは、アニメーションの全フレームを1枚の画像に並べたものです。多くはグリッド状に配置し、各フレームの位置と表示時間を書いた小さなデータファイルを添えます。ゲームエンジンはこの画像を一度だけ読み込み、再生中は1コマずつ切り出して描画します。

作り方は、手元に何があるかで変わります。フレームがすでに個別のPNGなら、並べるだけです。動きが動画の中にあるなら、範囲を決めてフレームレートを指定し、コマを取り出します。キャラクターの絵が1枚あるだけなら、先にアニメーションを作る必要があります。

2026年10月8日、ダウンロードできる実ファイルを使って3つのケースを試しました。無料の sprite sheet maker でオレンジ色のロボットが走る16フレームをまとめ、無料の動画→スプライトシート変換ツールで4秒の透過WebMを変換し、最後にロボットのフレームを最初にAIで生成した手順を説明します。どちらの無料ツールもブラウザ内で動くので、ファイルは手元のパソコンから出ず、アカウントも不要です。ツールの画面は現在英語のみです。

スプライトシートのファイルに入っているもの

ロボットの走りは16フレーム、各フレーム376 × 280ピクセルです。1行に4フレームずつ並べると、1504 × 1120のPNGになります。

PNGだけでは、どこで1コマが終わり次のコマが始まるのかが分かりません。それを伝えるのが隣のJSONです。以下は sprite sheet maker が書き出したファイルから、6番目のフレームの項目とシート全体の情報を抜き出したものです。

{
  "frames": {
    "frame_0005.png": {
      "frame": { "x": 376, "y": 280, "w": 376, "h": 280 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 376, "h": 280 },
      "sourceSize": { "w": 376, "h": 280 },
      "duration": 42
    }
  },
  "meta": {
    "image": "robot-run-spritesheet.png",
    "size": { "w": 1504, "h": 1120 },
    "frameTags": [{ "name": "robot-run", "from": 0, "to": 15, "direction": "forward" }],
    "animgen": { "frameCount": 16, "frameDurationMs": 42, "durationMs": 672, "fps": 23.81, "loop": true }
  }
}

• frame はシートから切り出す矩形で、左上を原点としたピクセル値です。
• duration はそのフレームを表示するミリ秒数です。
• frameTags は連続したフレームに動作名を付けます。1枚に複数の動作を入れる場合は、動作ごとにタグが1つずつ付きます。
• spriteSourceSize と sourceSize が意味を持つのは、フレームをトリミングした場合だけです。切り詰めたフレームを元のキャンバスのどこに戻すかをエンジンに伝えます。

フィールド名はAsepriteのハッシュ形式JSONと同じなので、Asepriteのシートを読めるコードならそのまま読めます。animgen ブロックは追加情報で、無視してかまいません。

表示時間は整数のミリ秒で保存されます。24 FPSでは1フレーム約41.67ミリ秒ですが、42に丸めて書かれるため、16フレームの合計は667ミリ秒ではなく672ミリ秒になります。fps が23.81になっているのはこのためです。1ループあたりの差は5ミリ秒です。音や他のアニメーションと厳密に合わせる必要がある場合は、各フレームの時間を合計するのではなく、エンジン側でクリップの速度を24 FPSに設定してください。

手元のフレームをまとめる

アニメーションがすでに個別の画像になっている場合の方法です。Kritaの「アニメーションをレンダリング」で書き出した連番画像、AnimGenのPNGフレームZIP、3Dソフトのレンダリング結果、誰かから受け取ったフォルダなどが該当します。Asepriteで描いているなら、内蔵の File → Export Sprite Sheet でPNGとJSONを直接書き出せるので、別のツールは要りません。

手順を試すなら、ロボットの16フレーム（ZIP、700 KB）をダウンロードしてください。ファイル名は robot-run-1.png から robot-run-16.png で、番号をゼロ埋めしていません。実際の書き出しでもよくある名前の付け方です。

1. sprite sheet maker を開き、ファイルをドロップするか、フォルダごと選びます。
2. 順番を確認します。単純な文字列順では robot-run-10.png が robot-run-1.png の直後に来ます。このツールは名前の中の数字で並べ替えるため、実際に1から16の順に並びました。ドラッグでの並べ替え、削除、逆順も可能です。
3. 速度を設定します。プレビューの速さと、JSONに書き込む表示時間の両方に使われます。ロボットを生成したときと同じ24 FPSにしました。
4. 列数を決めます。16フレームの既定値は4列で、正方形の4×4グリッドになります。
5. スプライトシートのPNGとJSONをダウンロードします。共有用に同じフレームのアニメーションGIFも書き出せます。

書き出したシートをデコードし、各セルを元のフレームと比較しました。16フレームすべてでアルファ値は完全に一致し、完全に不透明なピクセルの色も一致しました。半透明の輪郭ピクセルの色は最大で1段階（255段階中）ずれていました。ブラウザのキャンバスが色をプリマルチプライド・アルファで保持するためです。書き出したPNG、そのJSON、SHA-256付きの計測記録を確認できます。

アニメーションGIFもそのままドロップできます。GIFの各フレームが1セルになり、速度はGIFのフレーム遅延から設定されます。

共通キャンバスのフレームではトリミングをオフにする

ツールの Trim empty space around each frame を有効にすると、各フレームの周囲の余白が切り取られます。ロボットのフレームでは1セルが163 × 190、シートが652 × 760になり、ピクセル数は71%減りました。一方でPNGファイルは785.0 KBから736.7 KBにしか減りません。完全に透明な領域は、もともと圧縮後ほとんど容量を取らないからです。

トリミングは各フレームをそれぞれの外接矩形で切り取り、下端中央でそろえます。この走りではロボットが地面から浮く瞬間があり、体のいちばん下の位置がフレーム間で22ピクセル上下します。トリミング後はどのフレームもセルの下端に接するため、弾むような上下動が消えます。さらに腕や脚の振りで外接矩形の幅が変わるので、体が最大16ピクセル左右にずれます。

1つのアニメーションソフトから書き出したフレームは、たいてい共通のキャンバスを使っています。そのキャンバス自体がキャラクターの立ち位置を記録しているので、そのまま残しましょう。トリミングが役立つのは、古いシートから切り出した素材のようにフレームの大きさがばらばらな場合です。そのときは下端中央の基準で足の位置が1本の線にそろいます。

2のべき乗サイズと余白

Round the sheet up to power-of-two sizes（2のべき乗に切り上げ）を有効にすると、1504 × 1120は2048 × 2048になりました。PNGは785.0 KBから843.6 KBへの増加にとどまりますが、1ピクセル4バイトでデコードしたテクスチャは6.4 MiBから16 MiBに増えます。古いiOS端末のPVRTC圧縮や、WebGL 1でのミップマップなど、ターゲットが必要とする場合だけ有効にしてください。現在の2Dエンジンの多くは任意のサイズを受け付けます。

余白（spacing）はセルの間に透明なピクセルを挟みます。リニアフィルタリングやミップマップを使うと、GPUがセルの境界を越えて1〜2ピクセルを参照し、隣のフレームが細い線として見えることがあります。ロボットのフレームは四方に少なくとも39ピクセルの透明な余白があるため、余白0でも問題ありません。ぎりぎりまで切り詰めたフレームなら数ピクセルの余白を入れ、エンジンでシートを分割するときに同じ値を間隔として指定してください。

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

動きが映像として存在する場合の方法です。画面録画、レンダリングしたクリップ、グリーンバック動画、MP4やWebMで保存した生成アニメーションなどが該当します。

変換ツールに付属のサンプルを使いました。水色の人形が走る640 × 640のWebMで、長さは4.00秒、背景は透過しています（元の動画）。

1. 動画→スプライトシート変換ツールを開き、動画をドロップします。タイムラインにサムネイルが並びます。
2. 両端のハンドルを動かして必要な動作を囲み、Play range でループ再生して確認します。今回は2.50〜3.83秒の走りを残しました。
3. フレームレートとフレーム幅を選びます。12 FPSでは1.33秒の範囲から16フレームが取れ、幅256ピクセルなら4×4グリッド、1024 × 1024ピクセル、560.1 KBのシートになりました。
4. スプライトシートのPNGとJSON、または連番PNGのZIPをダウンロードします。

元の動画は24 FPSなので、12 FPSは1コマおきに取り出すことになります。24 FPSを選べば全コマが残り、フレーム数は倍の32になります。ループさせる場合は、Play range で最後のフレームから最初に戻る瞬間を見てください。引っかかりが見えるなら、開始か終了を1コマずらします。

このWebMは透過情報を持っているので、取り出したフレームも透過を保ちます。MP4にはアルファチャンネルがありません。単色やグリーンバックの前で撮影した動画なら、ツールがその色を検出して除去でき、許容値や輪郭の処理も調整できます。髪の毛、煙、モーションブラーといった細部をグリーンバックから抜くには本格的なキーイングが必要で、無料ツールでは対応できません。

キャラクター画像1枚からアニメーションを生成する

3つ目の方法は、動きのない絵1枚から始めます。ここまで使ったロボットのフレームも、この方法で作りました。1254 × 1254のロボットのPNGに、カメラ固定・スケール一定のまま右向きにその場で走り続けるよう指示するプロンプトを付けました。Seedance 2.0 Fast、4秒、480p、Alpha Keyでリクエストし、2026年10月3日の実際の消費は36クレジットでした。返ってきたのは752 × 560、24 FPS、97フレームの動画です。

この97フレームから44〜59番をループとして選び、この記事用に半分の376 × 280に縮小しました。正確なプロンプトや元のキーカラー動画、ループ範囲の選び方は操作できるキャラクターの記事にあります。きれいなループの見つけ方は歩行ループの記事で詳しく扱っています。

AnimGenで生成したアニメーションは、書き出しの段階でJSON付きのスプライトシート、あるいはGodot、Unity、Unreal Paper2D、Cocos Creator、Construct 3向けのパッケージとして受け取れます（出力形式）。無料のまとめツールが必要になるのは、別のソフトでフレームを先に編集した場合だけです。クレジットの消費はモデルや設定で変わるので、生成前に表示される見積もりと最新の料金を確認してください。

GodotとUnityに読み込む

Godot 4。 AnimatedSprite2D ノードを追加し、Sprite Frames プロパティで新しい SpriteFrames リソースを作ります。エディタ下部のSpriteFramesパネルで Add frames from a Sprite Sheet を選んでPNGを開き、Horizontal と Vertical をどちらも4にします。余白を入れた場合は Separation に同じ値を入力します。16セルを選択して Add 16 frames を押し、アニメーションの速度を24 FPSにしてループをオンにします。Godotの2Dスプライトアニメーションのチュートリアルにも同じダイアログが出てきます。余白0のシートなら、通常の Sprite2D に hframes = 4、vframes = 4 を設定し、コードから frame を切り替える方法も使えます。

Unity。 PNGを選択し、Texture Type を Sprite (2D and UI)、Sprite Mode を Multiple にします。ピクセルアートなら Filter Mode も Point にします。Sprite Editorを開いて Slice を選び、Type を Grid By Cell Size、サイズを376 × 280、ピボットを下端中央にして適用します。16個のスプライトを順に選び、毎秒24サンプルのアニメーションクリップを作ります。分割の各オプションはUnityのSprite Editorガイドで説明されています。

最後の行が埋まっていない場合、たとえば15フレームを4×4グリッドに並べた場合は、どちらのエンジンも空きマスの分までセルを作ります。それはアニメーションに入れないでください。AnimGenのGodot向けとUnity向けのパッケージを使えばこの手作業は不要で、Godot 4の読み込み検証では実際に動くプロジェクトでその1つを確認しています。

使う前に確認したい問題

サイズの上限について：4096 × 4096は、モバイルやWebGLで安全とされる一般的な目安です。スプライトシートとPNG連番の比較では、この上限を超える5120 × 5120のシートを計測し、分割する方法を示しています。

スプライトシート作りでよくある質問

無料でスプライトシートを作れるツールはありますか？

この記事で使った sprite sheet maker と動画変換ツールは無料で、ブラウザ上で動き、アカウントも不要です。ほかの無料スプライトツールでは、GIFの変換、既存シートの切り分け、シートからGIFへの変換ができます。Asepriteを使っているなら、内蔵の書き出し機能でまとめられます。商用のアトラス作成ツールTexturePackerには、ポリゴンパッキングやエンジンごとの書き出し機能があります。これらは多数のスプライトを詰め込む大きなアトラスで効果を発揮し、アニメーション1本ではあまり必要になりません。

ChatGPTでスプライトシートは作れますか？

画像生成モデルは、キャラクターの複数のポーズを1枚の中にグリッド状に描くことができます。この記事ではChatGPTを検証していません。そうした画像を使う前に、すべてのセルが同じ大きさか、セル間でキャラクターの縮尺や体型が変わっていないか、ポーズが隣のセルにはみ出していないか、背景が透明か除去できる単色かを確認してください。スプライトシート・カッターを使えば、そうした画像を個別のフレームに切り分け、同じフレームサイズで並べ直せます。キャラクター画像から連続した動きを生成してフレームとして書き出したい場合は、前述のAIの方法を使ってください。

スプライトシートの形式は何ですか？

透過を保ったまま劣化しないPNGが一般的で、そこにデータファイルが付きます。自作のコードやWebゲームではJSONが最もよく使われます。エンジン独自の形式もあり、分割矩形を持つUnityの .meta ファイル、Godotの SpriteFrames リソース、Cocos Creatorの .plist などがあります。使うエンジンやローダーが読める形式を選び、PNGとデータファイルは常に一緒に管理してください。

一連の流れを試すなら、ロボットのフレームをダウンロードして sprite sheet maker でまとめ、上の手順でエンジンに読み込んでみてください。キャラクターはあるけれどアニメーションがまだない場合は、AnimGenのスタジオから始めれば、そこから直接スプライトシートを書き出せます。