無料Webツール

スプライトシート作成

複数画像を規則的に並べてスプライトシートPNGを生成します。

入力と設定

使い方と確認ポイント

複数画像を同じ256pxセルへ並べ、1枚のスプライトシートPNGにまとめます。列数だけ指定するシンプルな作成ツールです。

  1. スプライトにまとめたい画像を複数選びます。
  2. 1行あたりの列数を1〜12で指定します。
  3. 生成された配置を確認し、PNGを保存します。
列数
1〜12列
セル
256×256px
配置
各画像を縦横比を保ってセル中央へ収める
出力
PNG

入力例・設定例

16枚のキャラクター画像 → 4列 → 4×4のスプライトシートを作成。

各セルは256px固定ですが、元画像を引き伸ばしてセルいっぱいにするのではなく、縦横比を保って収めます。画像ごとの余白量は元の比率で変わります。

同じ256pxセルにそろうので、配置計算がしやすい

4列なら1行の幅は1024px、4行なら全体は1024×1024pxです。セル位置が規則的なので、ゲームやWebで「何列目・何行目」を指定して切り出す用途に向いています。

ただし“自動トリミング”はしない

縦長画像も横長画像も、256px角へ収まるように縮小して中央配置します。透明余白が大きい素材を入れると、その余白も含めた見た目になるため、素材側のキャンバスを先にそろえると結果が安定します。

コンタクトシートとは用途が違う

コンタクトシートはファイル名付きの確認一覧、こちらはラベルなしの規則的な画像グリッドです。画像を人が選ぶための一覧ならコンタクトシート、プログラムから座標で扱うならスプライトシート、と分けると迷いません。

例えば16フレームのアニメなら

4列を指定すると4×4で並びます。1セル256pxなので、左上から順にフレームを切り出す実装なら座標計算も単純です。順番は選択したファイルの並びを前提に確認してください。