歩くペンギン
6フレームを横一列に。どのフレームも同じ地面の線に立っています。
スプライトシート作成：画像を1枚のシートに
PNGのフレーム、アイコン、ゲームのアイテムをドロップするだけで、数秒で1枚のスプライトシートが完成します。整ったグリッドにも、すき間なく詰めた配置にもでき、JSON・XMLアトラス、CSSスプライト、アニメーションGIFも作れます。この無料のスプライトシート作成ツールはブラウザーで動くので、何もアップロードされません。
スプライトシート作成無料・ブラウザーで動作
画像をここにドロップ
PNG、WebP、JPG、GIF、AVIFを必要なだけ。処理はすべてブラウザー内で行います。
- 無料、ブラウザーで完結
- グリッドも、詰めた配置も
- JSON・XML・CSSに対応
- トリミング・余白・2のべき乗
スプライトシート作成の作例
この作例のために作った8組の画像を、このスプライトシート作成ツールでそれぞれ1枚のシートにまとめました。開くと、すべての設定を試せます。
爆発エフェクト
火花から煙まで、8フレームを正方形のグリッドに。
アプリのアイコン
サイズの違う9つのアイコンを、トリミングしてすき間なく配置。
ドット絵のゲームアイテム
8つのアイテムを200%に拡大し、ピクセルをくっきり保って配置。
CSS用のフルーツアイコン
6つのアイコンを横一列に並べ、そのままWebページのCSSスプライトに。
宇宙のステッカー
6枚のステッカーを3列に並べた、2のべき乗サイズのシート。
飛ぶコウモリ
上から下へ読むゲームエンジン向けに、4フレームを縦一列に。
チェスの駒
高さの違う6つの駒を詰めて配置し、XMLアトラスつきで。
スプライトシートの作り方
スプライトシート作成は3ステップで完了。何もアップロードされません。
PNG、WebP、JPG、GIFのファイルを、必要なだけドロップ、貼り付け、または選択します。名前順に並べたり、ドラッグして順番を変えたりできます。
アニメーションのフレームには同じ大きさのセルが並ぶグリッドを、サイズのばらばらな画像には「詰めて配置」を選びます。トリミング、余白、間隔、サイズも設定できます。
スプライトシートPNGをJSONまたはXMLのアトラスと一緒に保存したり、Webサイト用のCSSスプライトや、フレームを順に再生するアニメーションGIFを書き出したりできます。
このスプライトシート作成ツールの得意なこと
歩きモーションからWebページのアイコンまで、スプライトシート作成ツールが得意なことを6つ紹介します。
画像グリッドも、詰めた配置も
同じ大きさのセルが並ぶグリッドなら、アニメーションのフレームが順番どおりに並びます。「詰めて配置」なら、どんなサイズの画像もできるだけ小さなシートに収めるスプライトシート作成ができます。
透明な部分をトリミング
空の縁を省いてスペースを節約しつつ、アトラスには各画像の元のサイズとオフセットを記録するので、ゲームの中で位置がずれません。
どのゲームエンジンにも合うアトラス
JSONアトラスはPhaserやPixiJSが読み込めるHash形式、XMLアトラスは多くのゲームフレームワークが読み込めるSparrow・Starling形式です。
Webサイト用のCSSスプライト
画像ごとにサイズと位置を指定したクラスを1つずつ書き出すので、ページは何十枚もの画像の代わりに1枚だけを読み込めば済みます。
アニメーションのプレビューとGIF
設定したフレームレートで画像を順番に再生し、共有やテスト用にアニメーションGIFで保存できます。
無料でプライベート
このスプライトシート作成ツールは、すべてブラウザーの中で動作します。アップロードもアカウント登録も不要で、ウォーターマークも入らず、ページを読み込んだあとはオフラインでも使えます。
ガイド：ゲームエンジンに合うスプライトシートの作り方
きれいなスプライトシート作成のための5つのヒントです。
ファイル名に順番の番号をつける
walk_1、walk_2 … walk_10のような名前のファイルは、「名前順に並べる」で正しい順番に並びます。数字は数として扱われ、どの画像もドラッグで移動できます。
アニメーションはグリッド、素材集は詰めて配置
フレームのサイズと位置をそろえたいときはグリッドを使います。サイズの違うアイコン、アイテム、タイルは、詰めて配置すればスペースを節約できます。
トリミングしてもオフセットは保たれる
トリミングでシートは小さくなり、アトラスを読み込むゲームエンジンが各画像を元の位置に戻します。セルのサイズで読み込むシンプルなグリッドなら、トリミングはオフのままにします。
にじみを防ぐ余白
シートを拡大・縮小したりフィルターをかけたりするなら、1〜2pxの余白か間隔をつけると、隣の画像が端に映り込まずきれいに表示されます。
シートのサイズを確認する
サイズはプレビューの下に表示されます。スマホ向けには各辺を4,096px以内に収め、ゲームエンジンが求めるなら「サイズを2のべき乗に」をオンにします。
スプライトシート作成はこんな方に
たくさんの画像をスプライトシート作成ツールで1枚にまとめる、よくある理由です。
ゲーム開発者
キャラクター、エフェクト、アイテムを、ゲームエンジン用のアトラスつきで1枚のテクスチャにまとめます。
Web開発者
アイコンをCSSスプライトつきの1枚の画像にまとめ、リクエスト数を減らします。
ドット絵アーティスト
アニメーションのフレームを並べ、2倍や4倍のサイズできれいなシートに書き出します。
MOD制作者・アニメーター
MOD、ツール、アニメーションソフト向けに、XMLやJSONのアトラスつきシートを作ります。
スプライトシート作成のよくある質問
スプライトシートの作り方、アトラス、プライバシーについての回答です。
画像を追加し、グリッドか「詰めて配置」を選んでから、必要なアトラスやCSSと一緒にスプライトシートPNGをダウンロードします。
はい。すべてブラウザーで動作し、アカウント登録は不要で、ウォーターマークも入りません。
いいえ。画像の読み込みも配置もお使いの端末で行われ、サーバーには何も送られません。
グリッドはすべての画像に同じサイズのセルを割り当てるので、アニメーションに最適です。「詰めて配置」はサイズの違う画像をできるだけすき間なく並べるので、アイコンやアイテムに最適です。
Phaser、PixiJSをはじめ多くのWeb向けゲームエンジンにはJSON、SparrowやStarling系のフレームワークにはXML、WebページにはCSSを選びます。
いいえ。アトラスには各画像の元のサイズとオフセットが記録されるので、それを読み込むゲームエンジンはどのフレームも元の位置に描きます。
はい。GIFを「GIFをスプライトシートに」で開けば、全フレームを表示時間ごと読み込んで、1枚のシートに並べます。
パソコンでは最大1,000枚、スマホでは最大400枚まで、各辺最大16,384pxのシートに配置できます。