スプライトシート作成ツール

概要

スプライトシート作成ツール は、
画像素材からスプライトシートを簡単に作成できるブラウザツールです。

「連続クロップ機能」により、
1枚の元画像から複数のポーズを次々と切り出してストックし、
グリッドに配置することができます。

※スプライトシートとは
「キャラクターの動きや、ゲームの部品を、1枚の大きな画像にまとめて敷き詰めたもの」

機能を搭載しています。

▼スプライトシート作成ツール▼

実行方法 (重要)

コードがリファクタリングされ、ES Modules を使用する構成になりました。ブラウザのセキュリティ制限により、file:// プロトコル（ファイルを直接ブラウザにドロップするなど）では正常に動作しない場合があります。

以下のいずれかの方法でローカルサーバーを立ち上げて実行してください:

メインファイル: index.html

ソース画像のアップロード
- 左上の “Source Images” エリアに、元となる画像（大きなシート画像や写真など）をドラッグ＆ドロップします。
- 画像が「Source Images」リストに追加されます。

画像の切り抜き（クロップ）
- 「Source Images」リスト内のサムネイルをクリックします。
- クロップ編集画面が開きます。大きな画像でも自動的に全体が見えるようにズームされます。
- ナビゲーション画面（Mini-map）:
  - 右側に全体画像の縮小版が表示されます。
  - 赤枠は、現在左側のメイン画面で見えている範囲を示しています。
- 調整:
  - 移動: メイン画面をドラッグして位置を合わせます。
  - ズーム: スライダーまたは [+][-] ボタンで調整します。長押しで連続ズーム可能です。
  - ピクセルグリッド: “Show Pixel Grid” にチェックを入れると、ズーム時（4倍以上目安）に画像のピクセル境界にグリッド線が表示され、位置合わせが容易になります。
- リストに追加:“Add to Stock List” ボタンを押します。
  - 切り抜かれた48pxの画像が、左下の “Stock (Crops)” リストに追加されます。
  - 編集画面は閉じません。 そのまま画像をずらして、次のポーズを切り抜いてください（連続クロップ）。
- 編集が終わったら “Done” ボタンで閉じます。

グリッドへの配置
- 左下の “Stock (Crops)” リストから画像をドラッグし、右側のグリッド（20マス）に配置します。
- 配置:
  - Row 0: Front / 正面
  - Row 1: Right-Front / 右下
  - Row 2: Right / 右
  - Row 3: Right-Back / 右上
  - Row 4: Back / 背中

ストック画像の管理
- ストックリストの画像にマウスを乗せるとボタンが表示されます。
- “×”: リストから削除します。
- “↓”: その48px画像単体をダウンロードします。

シートの書き出し
- “Download Sprite Sheet” ボタンを押すと、グリッド全体（192x240px）が結合されたPNG画像としてダウンロードされます。