手作業で切り出すと、セルサイズを推測し、余白を数え、1ピクセルずれた切り口を直す羽目になります。このツールはまずシートを読み取ります。切り線がスプライトのピクセルを横切らない均等なグリッドを探し、グリッドのないシートなら連結ピクセルから個々のスプライトを検出します。切り線はシートの上に表示され、調整しながらアニメーションが再生され、どのセルもクリックで外せます。
スプライトシート分割ツールの使い方
- 透過または単色背景のシートをドロップします。すぐにグリッドが検出され、シートの上に描かれます。
- 推測が外れていたら、行数と列数を指定するか、「セルサイズ」に切り替えてフレームサイズを入力します。枠やフレーム間の余白があるシートにはオフセットと間隔を使います。
- グリッドのない詰め込み型シート（アイテムセットや小物のタイルセット）では「スプライト検出」を選びます。結合距離で、剣先のような離れたパーツをスプライトにまとめられます。
- シート上のセルをクリックして除外します。空のセルは自動でスキップされます。
- プレビューを見ながら FPS を設定し、フレームの ZIP、GIF、または Godot・Unity・Phaser・Aseprite 用データ付きの再構成シートをダウンロードします。
得られるもの
- フレーム ZIP：各フレームを個別の PNG に（グリッドモードではセル、スプライト検出モードではぴったりの枠）。元シート上の位置を記録した JSON 付き。
- サイズを揃えたフレーム：全フレームを同じサイズのセルに下中央揃えで配置。すぐにアニメーションに使えます。
- 間隔を整えた再構成シート。Aseprite、Phaser/TexturePacker、Godot 4、CSS のデータと GIF も付きます。
対応エンジン
- 下中央揃えにより、どのフレームでも足が同じ線に乗ります。横スクロールや見下ろし型のキャラに必要な揃え方です。
- 再構成シートのデータファイルは、Godot 4（SpriteFrames）、Phaser 3（アトラス）、Aseprite ベースの Unity・Godot 用インポーターでそのまま読み込めます。
ゲーム制作で使って得たコツ
- アセットストアのシートはフレーム間に 1px の間隔があることがよくあります。切り線が1ピクセルずれるなら、間隔 X/Y を 1 にしてください。
- スプライト検出でキャラがバラバラに分かれる場合は、1体が1つの枠になるまで結合距離を上げます。
- 隣り合う2つのスプライトがくっついてしまう場合は、結合距離を 0 に下げます。
- 不透明な背景のシートは「背景色を除去」をオンにすると、フレームが透過で書き出されます。
活用例
- アセットストアのシートから1フレームだけ取り出して、ポーズを編集する。
- アイコンやアイテムのシートを個別の PNG に分け、UI やインベントリで使う。
- エンジンのグリッド分割で扱えるよう、シートの間隔を詰め直す。
- シートを GIF にして、制作の進捗を共有する。
よくある質問
グリッドの自動検出はどういう仕組みですか？
シートを割り切れるすべての列数・行数を試し、切り線がスプライトのピクセルを通ったりスプライトを2つに割ったりするグリッドを除外します。さらに、大半のセルに何かが入っていることを条件にし、通過した中で最も細かいグリッドを採用します。アトラスや UI キットのように均等なグリッドが合わない場合は、スプライト検出に切り替わります。
スプライトがグリッドに並んでいない場合は？
スプライト検出を使ってください。連結したピクセルのまとまりごとにラベルを付け、結合距離内のまとまりを統合し、最小サイズより小さい点を捨て、読み順（上の行から下へ、左から右へ）に並べます。
単色背景のシートも分割できますか？
はい。背景色は縁から検出され、検出時には空白として扱われます。「背景色を除去」をオンにすると、書き出したフレームが透過になります。
ファイルはアップロードされますか？
いいえ。分割、検出、エンコードはすべてブラウザ内で行われます。シートが端末の外に出ることはありません。
フレームのファイル名はどうなりますか？
シート名にゼロ埋めの連番を付けた名前です（例：hero_00.png、hero_01.png）。どこでも正しい順に並びます。
フレームを別の並びに組み直せますか？
はい。書き出しパネルで列数とパディングを指定してシートを再構成できます。詰め込み配置、エッジの押し出し、2のべき乗サイズが必要ならスプライトシートメーカーを使ってください。