1 行
歩き、待機の呼吸、回転するコインなど短いループ向け。全フレームが 1 行に並ぶので、切り分けはシートの幅をフレーム数で割るだけ。自動なら 8 フレームまでは 1 行に並べます。
Aseprite から書き出したもの、手描きのもの、他のツールで生成したもの —— すでに手元にあるフレームを放り込むだけで、ゲームにそのまま使えるスプライトシート PNG が手に入ります。処理はすべてブラウザ内で完結し、何もアップロードされません。
フレームがまだない場合は、AI の スプライトクリエイター にキャラクターとアニメーションを描かせましょう。
初めての方はまず スプライトシートの作り方 →
画像ファイル1つが1フレームです。GIF は静止画として読み込みます。アニメーションの分解は行いません。
クリックすると配置結果が表示されます。現在の画像はサンプルに置き換わります。
列数は1行に並べる画像の数です。 余白は各画像の周囲に追加されます。
フレームを追加するとシートが生成されます
上のサンプルを開くか、左側から画像を追加してください。
透過 PNG · 元のピクセルを保持 · サーバー送信なし




別のキャラクター素材を見ながら、自分のフレームを均一なグリッドに配置できます。下の素材はレイアウトの例です。
フレームを配置
3 ステップ、すべてブラウザ内で。
フレーム画像をドラッグ&ドロップ。ファイル名順に並ぶので walk_01、walk_02 … が正しい順番になります。並べ替えや削除もワンクリック。
列数を選ぶか、自動のまま(8 フレームまでは 1 行)。エンジンがサンプリングする際の隣接フレームのにじみを防ぐため、1〜4 px の余白を追加できます。
各フレームは元のピクセルをそのまま保持。セルは統一(最大幅 × 最大高さ)で、フレームは共通のベースラインに揃うため、固定グリッドで切り出せます。
個別の画像を1枚の PNG にまとめます。列数と余白を選び、元のピクセルを保ちます。
元のピクセル
配置時に画像を拡大縮小しません。
均一なセル
最も幅と高さの大きいフレームからセルサイズを決めます。
ローカル処理
配置と PNG 出力はデバイス内で完結します。
このツールがフレームをどう並べるか、数字で。
| スプライトシートメーカー | |
|---|---|
| [R01] 入力 | PNG / WebP / GIF / JPEG。1 ファイル 1 フレーム |
| [R02] セルサイズ | 最も広いフレーム × 最も高いフレーム |
| [R03] 整列 | 水平中央、下揃え —— 足が同じ基準線に乗ります |
| [R04] 拡大縮小 | なし。元のドットのまま |
| [R05] 列数 | 自動 / 1 / 2 / 4 / 8 |
| [R06] 余白 | 0 / 1 / 2 / 4 px |
| [R07] 順序 | まずファイル名順、あとはドラッグで入れ替え |
| [R08] 出力 | PNG |
| [R09] 実行場所 | ブラウザ内。アップロードなし |
列数でシートの形が決まります。最適な数はアニメの内容と、エンジンでの切り分け方しだいです。
歩き、待機の呼吸、回転するコインなど短いループ向け。全フレームが 1 行に並ぶので、切り分けはシートの幅をフレーム数で割るだけ。自動なら 8 フレームまでは 1 行に並べます。
複数のアクションを 1 枚にまとめるなら、各アクションのフレーム数が同じとき、列数をその数(4 や 8)にします。アクションごとに 1 行ずつになり、各アクションの 1 フレーム目が 1 列目に揃います。
縦長の帯。一部の CSS アニメーションや古いエンジンは、フレームが上から下へ並ぶことを前提にしています。
8 フレームを超えると、自動は正方形に近いグリッドに切り替わります(12 フレームなら 4×3)。正方形のシートはモバイル GPU のテクスチャサイズ上限に収まりやすく、40 フレームを 1 行に並べると幅が大きくなりすぎることがあります。
フレームをまとめる前にゲーム開発者がよく聞くこと。
はい、完全に無料です。ブラウザ内で動作し、フレーム数の制限もアカウントも不要。クレジットを使うのはホームページの AI スプライトクリエイターだけです。
いいえ。フレームはお使いの端末上でブラウザの canvas API により読み込み・結合されます。データが端末の外に出ることはありません。
セルサイズは最も幅の広い・高いフレームで決まります。小さいフレームは水平中央・下揃えになるので、キャラクターの足は同じベースラインに乗ります。フレームは拡大縮小されません。
固定グリッドでシートを切り出せるエンジンならすべて —— Unity、Godot、GameMaker、Phaser、Pygame など。プレビュー下に表示されるセルサイズをフレームの幅・高さに指定してください。
はい。ホームページのスプライトクリエイターは、テキストの説明からキャラクターとアニメーションフレームを描き、完成したスプライトシートを返します。
スプライトシートメーカーは、すでにあるフレームを 1 枚のグリッドにまとめます。スプライトメーカーは、テキストの説明から新しいスプライトを 1 枚生成します。並べる側と、描く側です。
キャラクターと動作を説明すれば、AI スプライトクリエイターが約 1 分でアニメーション付きスプライトシートを返します。
スプライトシートにたどり着く 4 つの道。手元にあるものに合わせて選んでください。