スプライトシート作成

スプライトシートとは

スプライトシートは、複数の小さな画像(フレーム)を格子状に配置して1つの画像ファイルにまとめたもので、複数の個別ファイルを別々に読み込むよりも1つの結合画像を読み込む方が効率的で、フレーム単位のアニメーション処理も簡単になるため、ゲーム開発やアニメーションでよく使われます。このツールは同じサイズの複数の画像をアップロードして1つのスプライトシートに結合し、列数や間隔を指定できるようにしたうえで、完成した画像と各フレームの座標を記録したJSONファイルをあわせてダウンロードできるようにします。

シートとフレームデータの生成方法

画像は左から右へ配置され、指定した列数に応じて次の行に折り返されます。それぞれ指定したフレーム間隔だけ離れた計算済みの位置に、共有のキャンバスへ描画されます。アップロードした画像のサイズが異なる場合は、重なりを防ぐため最大の画像に合わせたセル内に各画像を配置します。ダウンロードされるJSONファイルには、最終シート内での各フレームのx・y位置と幅・高さが記録され、ゲームエンジンやアニメーションツールが再生時に各フレームをどこで「切り出す」かを判断する際によく使用されます。

よくある質問

画像だけでよいのに、なぜJSON座標ファイルが必要なのですか?

結合されたPNG単体では、ゲームエンジンやアニメーションライブラリはどこで1つのフレームが終わり次のフレームが始まるかを判断できません。JSONファイルが正確なピクセル座標を提供することで、ソフトウェアが再生時にシートを正しく個別のアニメーションフレームに切り出せるようになります。

アップロードした画像のサイズが異なる場合はどうなりますか?

このツールは問題なく動作しますが、各グリッドセルはアップロードした画像の中で最大のものに合わせたサイズになります。そのため小さい画像は引き伸ばされたり切り取られたりせず、代わりにセル内に余白が残ります。

アップロード後にフレームの順序を変更できますか?

はい。最終的なスプライトシートを生成する前に、並べ替えコントロールでサムネイルを前後に移動したり、個別の画像を削除したりできます。アニメーションの再生方法にとってフレームの順序は通常重要なためです。