スプライトシート分割ツール

シートに合う分割方法を選ぶ

スプライトシートには、アニメーションフレームを正確な行列に並べたもの、一定の余白を持つタイルセット、アイコンを不規則に配置したものがあります。配置によって適した検出方法は異なります。このツールでは各方法を一つの作業手順にまとめつつ、最終判断は利用者が行えます。

これらの設定は一般的なスプライト作業に沿っています。UnityのSprite Editorは、自動分割、セルサイズまたはセル数によるグリッド、開始位置、余白、空の矩形、ピボットの設定に対応しています。Asepriteのスプライトシート読み込みでも、x/y開始位置、スプライトの幅と高さ、余白、読み取り順を指定します。このツールは画像の切り出しに特化しているため、切り出し座標は出力しますが、Unity、Godot、Asepriteのプロジェクトファイルは作成しません。

自動検出は出発点であり、結果を保証するものではありません

自動検出は、互いにつながっていない可視領域を探します。スプライトの間に透明な空間があれば素早く動作しますが、どの検出方法でもすべてのシートで作者の意図した境界を推測することはできません。接触した2体のキャラクターは一つの領域に見え、離れた影や火花は別の領域として扱われる場合があります。Phaserの抽出ガイドも同じ連結ピクセルの制約を説明しており、接触したスプライトはまとめて検出されます。

書き出す前に、番号付きの範囲を必ず確認してください。自動検出には許容値、最小サイズ、結合距離を調整するスライダーがないため、結果は手動で修正します。単色の背景が画像として誤検出される場合は、空きピクセルの検出を隅の背景色に設定するか、検出をオフにして格子で分割します。結果が細かく分かれすぎる場合は、余分な範囲を削除し、スプライト全体を囲む範囲を1つ描きます。2つのフレームが接している場合は、結合された候補を手動の範囲に置き換えます。元のシートは変更されません。

ZIPとframes.jsonの内容

PNGはピクセルと透明度を正確に保持するため、既定の出力形式です。選択した各フレームには、指定した名前または接頭辞を基に、安全で重複しないファイル名が付きます。ZIPにはこれらのPNGとframes.jsonの一覧が含まれます。各項目にはフレーム名、順序、元画像上の矩形が記録されます。

{
  "name": "player-run-03",
  "x": 128,
  "y": 64,
  "width": 32,
  "height": 48
}

座標は元画像の左上を起点とするピクセル値です。スクリプトや独自の処理に利用できますが、意図的に汎用形式としており、特定のゲームエンジン用アトラスや読み込みファイルではありません。

復元期限を設けた非公開のローカル処理

画像のデコード、検出、編集、切り出し、ZIPの作成はブラウザー内で行われます。画像データとファイル名はサーバーへ送信されません。複数手順の作業を復元できるよう、使用中のタブは容量を制限したローカル作業コピーと設定を最長2時間保持できます。最初からやり直すを選ぶと、使用中のタブのプロジェクトは直ちに削除されます。別に開いたタブには独立したコピーがあり、ほかのタブを初期化しても2時間以内に自動削除されます。

大きなシートを扱う場合は、画像を多く使うほかのタブを閉じ、空のフレームを何百個も作らないようにしてください。品質を無断で下げるのではなく、サイズまたはフレーム数の上限に達したことを通知します。ダウンロードには一時的なブラウザーのオブジェクトURLを使い、MDNの案内に従って使用後に解放します。

書き出し前の確認項目

• 読み取り順がアニメーションまたはタイルの順序と一致するか確認します。
• 拡大し、最初、中間、最後のフレームに1ピクセルのずれがないか確認します。
• 位置自体に意味がない限り、空のセルや意図しない孤立ピクセルを除外します。
• 異なる名前を付け、ZIPを作る前に重複を確認します。
• コントラストのあるプレビュー背景で透明な端を確認します。
• 正確なドラッグが難しい場合は入力欄やボタンで範囲を修正します。W3Cのキーボード操作指針に沿って、キーボードでも操作できます。