ドット絵の騎士の走りモーション
透明な背景のスプライトシートから6フレームを背景で見つけ、同じサイズにそろえました。アニメーションがぶれずに再生されます。
スプライトシート分割：すべてのスプライトをPNGに
スプライトシートをドロップするだけで、この無料のスプライトシート分割ツールが透明や単色の背景からスプライトをすべて見つけるか、グリッドで分割します。フレームはPNG、ループするGIF、JSONアトラスでダウンロードでき、すべてブラウザーで完結します。
スプライトシート分割無料・ブラウザーで動作
スプライトシートをここにドロップ
PNG、JPG、WebP、GIFに対応。処理はすべてブラウザー内で行います。
- 無料、ブラウザーで完結
- 背景からスプライトを自動検出
- グリッドは列数・行数かセルのサイズで
- PNG、GIF、JSONアトラス
スプライトシート分割の作例
この作例のために作った8枚のスプライトシートを、このページのスプライトシート分割ツールでそれぞれ分割しました。開くと、すべての設定を試せます。
マゼンタ背景のRPGアイテム
マゼンタ単色のスプライトシートに並んだアイテムのアイコン12個を、1つずつ透過PNGとして切り出しました。
白背景のアプリアイコンセット
フラットなアイコン12個のスプライトシート。カートの車輪のように数ピクセル離れたパーツも、それぞれのアイコンにまとまります。
爆発エフェクト、4×2グリッド
エフェクトのスプライトシートの8フレームを列数と行数で分割し、ループするGIFとして再生しました。
弾むスライムの待機モーション
地面の影がついた4フレームのスプライトシートを、アニメーション用に下中央でそろえました。
回転するコイン、8×1グリッド
やわらかな光をまとった8フレームのスプライトシート。淡い光の設定で、コインが1枚ずつ分かれます。
2Dアクションゲームのタイルセット
互いに接した16枚のタイルのスプライトシートを、セルのサイズ128pxで分割しました。
絵文字ステッカーシート
明るいグレーの背景に並んだ12の表情。チャット用のステッカーにそのまま使えます。
スプライトシートを分割する方法
3ステップで完了。何もアップロードされません。
PNG、JPG、WebP、GIFをドロップ、貼り付け、または選択します。スプライトシートはお使いの端末の中で開きます。
「背景で分ける」は、マゼンタや白も含め、透明や単色の背景にあるスプライトをすべて見つけます。「グリッドで分ける」は列数と行数、またはセルのサイズで同じ大きさのセルに分割し、オフセットと間隔も指定できます。
すべてのスプライトをPNGにして1つのZIPで保存したり、フレームを再生してアニメーションGIFで保存したり、ゲームエンジン用のJSONアトラスを受け取ったりできます。
このスプライトシート分割ツールの強み
アイコンセット1枚からアニメーション1本分まで、スプライトシート分割で得意な6つのことです。
スプライトシート透明な背景も単色の背景も
スプライトシートの端から背景を読み取ります。透明、マゼンタ、白など、どんな単色でも、設定した許容範囲で判定します。スプライトはどれも透過PNGで書き出されます。
スプライトシートパーツはスプライトと一緒に
剣のきらめき、影、カートの車輪のように数ピクセル離れたパーツも同じスプライトにまとまり、小さな点は取り除かれます。スプライトには左上から読む順に番号が付きます。
位置のそろったアニメーションフレーム
「全フレームを同じサイズに」をオンにすると、すべてのスプライトが同じキャンバスサイズの下中央にそろい、足が地面に着いたままになります。フレームは好きな速度で再生でき、ループするGIFで保存できます。
ゲームエンジン用のJSONアトラス
スプライトシート上のフレーム名と位置を、PhaserやPixiJSが読み込めるJSON Hash形式で、PNGと一緒にダウンロードできます。
グリッド、ドット絵、余白
スプライトシートを列数と行数かセルのサイズで、オフセットと間隔も指定して分割します。空のセルを飛ばし、余白を加え、ドット絵はピクセルをくっきり保ったまま2倍や4倍に拡大できます。
込み入った背景はAIへ
描き込まれた風景や写真のように背景が単色でない画像は、ワンクリックでAIの画像切り抜きに送れます。1クレジットで物体をすべて切り抜きます。
ガイド：スプライトシートをきれいに分割するコツ
きれいなスプライトに仕上げるための6つのヒントです。
モードを選ぶ
スプライトが透明や単色の背景の上で離れて並んでいるなら、間隔がばらばらでも「背景で分ける」を使います。どのフレームも同じ大きさのセルに収まっているときや、タイル同士が接しているときは「グリッドで分ける」を使います。
色の許容範囲を調整する
スプライトのまわりに背景が少し残るなら「色の許容範囲」を上げ、スプライトの一部が消えるなら下げます。スプライトシートの端に色が混在しているときは、背景色を手で選びます。
パーツをまとめ、小さな点を無視する
「この距離内のパーツをまとめる」は、離れたパーツをスプライトと一緒に保ちます。別々のパーツでできたアイコンには値を上げます。「これより小さい点を無視」は散らばった点を取り除きます。透明なスプライトシートでは、淡い光の設定で、光をまとったスプライトも1つずつ分かれます。
アニメーション用のフレーム
歩きモーションやエフェクトでは「全フレームを同じサイズに」をオンにし、アニメーションを確認してからGIFかZIPで保存します。グリッドのフレームはセルのサイズのまま保たれ、「各フレームの余白を詰める」で余白を詰めることもできます。
ドット絵
2倍や4倍に拡大すれば、プレビューやストアページに使えるくっきりした大きなフレームに。どのピクセルも正方形のまま保たれます。
ダウンロードされるファイル
書き出すPNGには、元のファイル名をもとにした名前と、読む順の番号が付きます。JSONアトラスには、元のスプライトシート上での各フレームの位置が記録されます。
スプライトシートの分割はこんな方に
スプライトシートを分割するよくある理由です。
ゲーム開発者
ダウンロードしたスプライトシートや昔の素材をフレームに分割し、ゲームエンジンでアニメーションを組み直せます。
ドット絵アーティスト
自作のスプライトシートを1フレームずつに分け、くっきり拡大して、アニメーションのプレビューを共有できます。
アプリ・Webデザイナー
アイコンのスプライトシートからアイコンを1つずつ透過PNGとして取り出せます。
ステッカー・絵文字クリエイター
ステッカーや絵文字のシートを、チャットアプリ用に1枚ずつのファイルに分けられます。
スプライトシート分割のよくある質問
スプライトシートの分割、ファイル、プライバシーについての回答です。
スプライトシートを開き、「背景で分ける」のまま、または「グリッドで分ける」に切り替えて、スプライトシート上の枠を確認します。あとはPNGをまとめたZIP、アニメーションGIF、JSONアトラスをダウンロードするだけです。
はい。すべてブラウザーで動作し、アカウント登録は不要で、ウォーターマークも入りません。
いいえ。スプライトシートの読み込みも分割もお使いの端末で行われ、サーバーには何も送られません。ページを読み込んだあとはオフラインでも使えます。
はい。スプライトシートの端から背景色を読み取り、どのPNGでも透明にします。「色の許容範囲」を調整したり、背景色を手で選んだりすることもできます。
「グリッドで分ける」で列数と行数かセルのサイズを指定し、オフセットと間隔を加えます。空のセルは飛ばされ、各フレームはアニメーション用にセルのサイズを保ちます。
はい。フレームを好きな速度で再生し、背景が透明なループGIFとして保存できます。
JSON Hash形式は、Phaser、PixiJSをはじめ多くのゲームエンジンやツールで読み込めます。各フレームの名前と、スプライトシート上の位置が記録されています。
グリッドで分割するか、AIの画像切り抜きに送ります。1クレジットで物体をすべて見つけて切り抜きます。