スプライト抽出ツール

Drop files here or click (max 12 MB)

画像を上にドロップしてスプライト抽出を開始してください。

概要 オンラインスプライト抽出ツール

スプライトシートや静止画像を個別のスプライトに変換する必要がありますか？このスプライト抽出ツールは、スプライト領域を自動検出し、きれいに切り抜き（オプションでトリミングとパディング）、すぐに使用できる透明PNGとしてエクスポートします。🚀 Scratchプロジェクト、2Dゲームプロトタイプ、授業活動、インディーゲームに理想的です。ピクセルアート、UI要素、アイコン、キャラクターに最適です。

このスプライト抽出ツールを使う理由

  • 透明度と設定可能なしきい値に基づく自動スプライト検出
  • 各スプライト周囲の透明ボーダーをオプションでトリミングするクリーンなクロップ
  • パディング、配置（中央/下部）とオプションの均一な出力サイズを制御
  • PNGエクスポートで透明度（アルファチャンネル）を保持 - タイルマップやキャラクターに最適
  • 検出された全スプライトのビジュアルギャラリーでダウンロード前に素早く確認
  • JSZipを使用したクライアントサイドZIPエクスポート、ファイル名とスプライト順序を安定保持
  • Scratch対応：単一のスプライトシートを複数のコスチュームやアセットに素早く変換
  • エンジン間（Scratch、Godot、Unity 2D、Phaserなど）でのアセット再利用に最適

🛠️ スプライトシートからスプライトを抽出する方法 for sprite-extractor

1

1. 画像をドロップ

スプライトシートまたは画像をドロップゾーンにドラッグ＆ドロップするか、クリックしてファイルを選択します。最良の結果を得るには、透明背景のPNGまたはスプライトと背景のコントラストが高い画像を使用してください。

2

2. 自動検出を実行

ツールは画像の軽量な表現を検出エンドポイントに送信し、透明度と最小サイズに基づいて各スプライトのバウンディングボックスを計算します。ボックスは画像上にオーバーレイ表示され、エクスポートされる内容を素早く確認できます。

3

3. 抽出オプションを調整

パディング、透明背景 vs 単色背景、透明エッジのトリミング、配置（中央または下部）、オプションの均一な出力幅/高さを調整します。ツールは各スプライトキャンバスをそれに応じて再構築します。

4

4. スプライトをプレビュー

生成されたスプライトのギャラリーをスクロールして確認します。各プレビューはオフスクリーンキャンバスを使用してクライアント側で構築され、UIオプションに応じて名前変更や削除が可能です。

5

5. PNGまたはZIPをダウンロード

個別のPNGスプライトをエクスポートするか、現在の全プレビューを含む単一のZIPファイルをダウンロードします。ZIPはJSZipを使用してクライアント側で構築され、ファイル名は<code>sprite_0000.png</code>、<code>sprite_0001.png</code>などの連番パターンに従います。

技術仕様

検出とバウンディングボックス

検出フェーズは専用のバックエンドエンドポイントで実行され、クライアントが最終スプライトを構築するために使用するクリーンなバウンディングボックスを返します。

項目動作備考
検出エンドポイントPOST /api/sprite-extractor/inspectデータURLと検出オプションを受け付け、スプライトボックスの配列を返します。
検出入力許容値、アルファ閾値、最小幅、最小高さUIでこれらのパラメータを調整して、微小なノイズを無視したり、意味のあるスプライトのみを捕捉したりできます。
ボックス形状軸に整列した矩形各<code>SpriteBox</code>は、ソース画像座標における<code>x</code>、<code>y</code>、<code>width</code>、<code>height</code>を保持します。
透過処理アルファ対応透過ピクセルはクロップ/トリミングの判断に寄与しますが、出力で保持することができます。
エラー処理適切なフォールバック検出が失敗した場合、ツールは読み取り可能なエラーを表示し、UIを破損させません。

クロップ、トリミング & 整列

ボックスが判明すると、すべてのスプライトレンダリングはHTMLキャンバスを使用してブラウザで行われます。

ステップ実装詳細
初期クロップdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)各スプライトは最初に元の画像から一時キャンバスにクロップされます。
透過トリミングgetImageDataによるアルファチャネルのスキャントリミングが有効な場合、ツールは最小の非透過バウンディングボックスを計算するためにピクセルをスキャンします。
パディング設定可能 0–256 pxトリミングまたはクロップされたスプライトの周囲にパディングが適用され、エンジンでのエッジアーティファクトを軽減します。
整列中央 / 下部スプライトは中央揃えまたは下部揃えにできます（ベースライン上に立つキャラクターに有用）。
均一な出力サイズオプションのspriteWidth / spriteHeight有効にすると、すべてのスプライトは固定サイズのキャンバスにレンダリングされ、アニメーションを標準化します。
背景透過または単色完全な透過性を保持するか、選択した背景RGBA色でキャンバスを塗りつぶします。

パフォーマンス & 制限

ブラウザでの対話的使用向けに設計されています。

パラメータ典型的な動作備考
最大入力サイズ約10MBの画像より大きなファイルも動作する可能性がありますが、読み込み/検出が遅くなります。
スプライト数最大約400スプライト非常に高い数も可能ですが、プレビューのレンダリングとZIP作成に時間がかかります。
エクスポート形式ZIP内のPNG（Blob）ZIPはJSZipを使用して完全にクライアント側で生成されます。
キャンバス操作スプライトごとの切り抜きと描画ブラウザの2DキャンバスAPIに依存します。パフォーマンスは解像度と数に比例します。

コマンドライン代替手段

大規模なスプライトシートや自動化パイプラインには、ImageMagickなどのCLIツールとスクリプトを組み合わせることができます。

Linux / 🍎 macOS

ImageMagickを使用した均一グリッド切り抜き

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

規則的な64×64グリッドを個別のPNGファイルに切り分けます。

すべてのスプライトをZIP化

zip sprites.zip sprite_*.png

生成されたすべてのスプライトを単一のアーカイブにパッケージ化します。

Windows (PowerShell + ImageMagick)

グリッドベースの切り抜き

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Windowsで<code>magick</code> CLIを使用する上記と同じ操作です。

実用的なユースケース

2Dゲーム開発

  • Godot、Unity 2D、Phaser、Construct用のスプライトシートからキャラクターアニメーションフレームを抽出。
  • デザインモックアップからUI要素（ボタン、アイコン、ヘルスバー）を分離。
  • レベルエディタ用にタイルセットを個々のタイルに分解。
// Godot例: 複数フレームを読み込む\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & 教室プロジェクト

  • 単一のスプライトシートをScratchキャラクター用の複数のコスチュームに変換。
  • プログラミングワークショップ用にテーマ別アセットパック（動物、惑星、アイコン）を準備。
  • 生徒が描画ツールでスプライトシートをデザインし、Scratch用に抽出できるようにする。
// シンプルなアニメーションのScratch風疑似コード\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

ピクセルアート & アセットライブラリ

  • 古いピクセルアートシートを検索可能な個別スプライトのライブラリに分割します。
  • 大規模な商用またはオープンソースパックから必要なアセットのみを抽出します。
  • 異なるソースからのスプライト間のパディングと配置を統一します。

❓ Frequently Asked Questions

❓スプライト検出は完全に自動ですか？

ツールは透過性と設定可能な閾値（許容範囲、アルファ閾値、最小幅/高さ）に基づいて自動検出を実行します。多くの場合「そのまま動作」しますが、複雑なシートではオプションを調整したり、再実行が必要な場合があります。

📏エクストラクタは元の画像を変更しますか？

いいえ。元の画像は変更されません。ツールはメモリ内キャンバスに読み込み、領域を新しいキャンバスに切り取り、新しいPNGスプライトとしてエクスポートするだけです。

🎯パディングと配置を制御できますか？

はい。パディング（ピクセル単位）を設定し、透過または単色の背景を選択し、透過エッジのトリミングを有効にし、出力キャンバス内で中央揃えまたは下揃えを選択できます。

🔒画像はサーバーに保存されますか？

検出ステップではスプライトボックスを計算するために画像（データURLとして）が専用エンドポイントに送信されますが、スプライト自体はブラウザ内で構築およびZIP化されます。このサービスは一時的な処理用に設計されており、長期保存用ではありません。常に、厳密に非公開であるべきアセットには第三者ツールを使用しないでください。

🧊エクスポートされたスプライトで透過性は保持されますか？

はい。デフォルトでは出力キャンバスは透過のままで、スプライトはアルファチャンネルを保持します。ターゲットエンジンが不透明アセットを好む場合は、オプションで単色の背景色を選択できます。

Pro Tips

Best Practice

各スプライトの周囲に少量のパディング（2–4 px）を使用して、エンジンでのスケーリングや回転時のエッジブリードを防止します。

Best Practice

スプライトに一貫した名前（例：<code>hero_run_0001.png</code>、<code>hero_run_0002.png</code>）を付けて、アニメーションのインポートとスクリプト作成を簡素化します。

Best Practice

教育現場では、非常にシンプルなスプライトシート（少ない大きなスプライト、明確な背景）から始めて、生徒が即座に結果を確認できるようにします。

Best Practice

エクスポートしたZIPをプロジェクトのソースファイルと一緒に保管して、後でアニメーションを簡単に再生成または調整できるようにします。

Additional Resources

Scratch Wiki – スプライト
Documentation
Godot Docs – 2Dスプライトアニメーション
Documentation
Unity Manual – 2Dスプライト
Documentation

Other Tools