[TOOL-02] 無料 · ブラウザ内処理 · 登録不要

スプライトシートメーカー

Aseprite から書き出したもの、手描きのもの、他のツールで生成したもの —— すでに手元にあるフレームを放り込むだけで、ゲームにそのまま使えるスプライトシート PNG が手に入ります。処理はすべてブラウザ内で完結し、何もアップロードされません。

フレームがまだない場合は、AI の スプライトクリエイター にキャラクターとアニメーションを描かせましょう。

初めての方はまず スプライトシートの作り方 →

[SSM-002]シートパッカー
0 フレーム

複数の画像を1枚のスプライトシートに

画像ファイル1つが1フレームです。GIF は静止画として読み込みます。アニメーションの分解は行いません。

サンプルを試す

クリックすると配置結果が表示されます。現在の画像はサンプルに置き換わります。

01画像を追加

02配置を調整

列数
余白
PX

列数は1行に並べる画像の数です。 余白は各画像の周囲に追加されます。

スプライトシート

フレームを追加するとシートが生成されます

上のサンプルを開くか、左側から画像を追加してください。

03シートを保存

透過 PNG · 元のピクセルを保持 · サーバー送信なし

PNG をダウンロード
[03]

スプライトシートメーカーの使い方

3 ステップ、すべてブラウザ内で。

[01] ステップ

フレームを追加

フレーム画像をドラッグ&ドロップ。ファイル名順に並ぶので walk_01、walk_02 … が正しい順番になります。並べ替えや削除もワンクリック。

[02] ステップ

レイアウトを選ぶ

列数を選ぶか、自動のまま(8 フレームまでは 1 行)。エンジンがサンプリングする際の隣接フレームのにじみを防ぐため、1〜4 px の余白を追加できます。

[03] ステップ

シートをダウンロード

各フレームは元のピクセルをそのまま保持。セルは統一(最大幅 × 最大高さ)で、フレームは共通のベースラインに揃うため、固定グリッドで切り出せます。

すべてのフレームを揃えるスプライトシートメーカー

個別の画像を1枚の PNG にまとめます。列数と余白を選び、元のピクセルを保ちます。

手元の素材をそのまま使える

  • 元のピクセル

    配置時に画像を拡大縮小しません。

  • 均一なセル

    最も幅と高さの大きいフレームからセルサイズを決めます。

  • ローカル処理

    配置と PNG 出力はデバイス内で完結します。

$0
料金
0
サーバーへの送信
PNG
出力形式
[06]

スプライトシートメーカーの仕様

このツールがフレームをどう並べるか、数字で。

スプライトシートメーカー
[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] 実行場所 ブラウザ内。アップロードなし
[GUIDE]

スプライトシートの 1 行に何フレーム並べる?

列数でシートの形が決まります。最適な数はアニメの内容と、エンジンでの切り分け方しだいです。

1 行

歩き、待機の呼吸、回転するコインなど短いループ向け。全フレームが 1 行に並ぶので、切り分けはシートの幅をフレーム数で割るだけ。自動なら 8 フレームまでは 1 行に並べます。

列数 = 1 アクションのフレーム数

複数のアクションを 1 枚にまとめるなら、各アクションのフレーム数が同じとき、列数をその数(4 や 8)にします。アクションごとに 1 行ずつになり、各アクションの 1 フレーム目が 1 列目に揃います。

1 列

縦長の帯。一部の CSS アニメーションや古いエンジンは、フレームが上から下へ並ぶことを前提にしています。

8 フレームを超えたときの自動

8 フレームを超えると、自動は正方形に近いグリッドに切り替わります(12 フレームなら 4×3)。正方形のシートはモバイル GPU のテクスチャサイズ上限に収まりやすく、40 フレームを 1 行に並べると幅が大きくなりすぎることがあります。

[05]

スプライトシートメーカーのよくある質問

フレームをまとめる前にゲーム開発者がよく聞くこと。

[+] このスプライトシートメーカーは無料ですか?

はい、完全に無料です。ブラウザ内で動作し、フレーム数の制限もアカウントも不要。クレジットを使うのはホームページの AI スプライトクリエイターだけです。

[+] 画像はどこかにアップロードされますか?

いいえ。フレームはお使いの端末上でブラウザの canvas API により読み込み・結合されます。データが端末の外に出ることはありません。

[+] フレームのサイズがバラバラでも大丈夫?

セルサイズは最も幅の広い・高いフレームで決まります。小さいフレームは水平中央・下揃えになるので、キャラクターの足は同じベースラインに乗ります。フレームは拡大縮小されません。

[+] どのエンジンで使えますか?

固定グリッドでシートを切り出せるエンジンならすべて —— Unity、Godot、GameMaker、Phaser、Pygame など。プレビュー下に表示されるセルサイズをフレームの幅・高さに指定してください。

[+] 代わりに AI でフレームを作れますか?

はい。ホームページのスプライトクリエイターは、テキストの説明からキャラクターとアニメーションフレームを描き、完成したスプライトシートを返します。

[+] スプライトシートメーカーとスプライトメーカーの違いは?

スプライトシートメーカーは、すでにあるフレームを 1 枚のグリッドにまとめます。スプライトメーカーは、テキストの説明から新しいスプライトを 1 枚生成します。並べる側と、描く側です。

[CTA] SIGN-OFF

フレームを描いてほしい?

キャラクターと動作を説明すれば、AI スプライトクリエイターが約 1 分でアニメーション付きスプライトシートを返します。

[06]

このサイトの他のツール

スプライトシートにたどり着く 4 つの道。手元にあるものに合わせて選んでください。