← チュートリアル一覧に戻る

スプライトシートからスプライトを抽出する方法

スプライトシートは2Dゲーム開発の要です。複数のアニメーションフレームやポーズを1つの画像ファイルにまとめてレンダリングを最適化します。しかし、それらのフレームを再び個別の画像ファイルに抽出する必要がある状況は多々あります。

アセットをダウンロードした場合や元のファイルを紛失した場合など、素早く確実に切り出す方法が必要です。このガイドでは、Easy2DTools スプライト分割ツールを使用して、ファイルをアップロードせずにブラウザ内で安全に抽出する方法を説明します。

なぜEasy2DToolsスプライト分割ツールを使うのか？

ツールの主な利点は以下の通りです：

100%クライアント側処理： 画像はブラウザ内でローカルに処理され、サーバーには一切アップロードされません。知的財産は完全に保護されます。
自動検出機能： 高度なエッジ検出アルゴリズムにより、透明な背景上のスプライトを自動で見つけ出します。
手動グリッド分割： グリッド状に整列している場合は、ピクセル単位の幅と高さを指定して均等に切り出せます。
即時エクスポート： 抽出した全フレームをすぐにZIPファイルとしてダウンロードできます。

スプライトシートの切り出し手順

ステップ 1：画像の読み込み

スプライト分割ツールにアクセスします。画像は以下の方法で読み込めます：

ドラッグ＆ドロップ： 画像ファイルを画面のドロップゾーンにドラッグします。
ファイル参照： テキストをクリックしてファイルを選択します。
クリップボードから： 画像をコピーしてページ上でCtrl+Vを押します。

読み込み後、キャンバスにスプライトシートが表示されます。

ステップ 2：切り出し方法の選択

スプライトシートの形式に合わせて、2つの方法から選択できます。

方法 A：自動検出（ランダム配置に推奨）

スプライトが不規則に配置されている場合は自動検出が便利です。

右側のパネルで自動検出タブを選択します。
「スプライトを検出」ボタンをクリックします。
透明なピクセルを分析し、不透明なピクセルの塊の周りに境界線を描画します。
ヒント： キャラクターのパーツが離れている場合は、許容値を調整するかグリッドモードを使用してください。

方法 B：グリッドモード（均等配置に推奨）

フレームが厳密なグリッド（例：32x32ピクセル）に配置されている場合に使用します。

グリッドタブを選択します。
フレームの幅と高さをピクセルで入力します。
グリッドが左上から始まらない場合は、オフセットX/Yを調整します。
フレーム間に余白がある場合は、間隔X/Yを調整します。
プレビューグリッドが画像の上に表示されます。

ステップ 3：フレームの確認と選択

キャンバスの下に抽出されたフレームのリストが表示されます。クリックして選択または解除できます。

ステップ 4：ZIPエクスポート

切り出したフレームを保存するには：

「選択項目をZIPでエクスポート」ボタンを見つけます。
クリックすると、個別のPNGファイルが含まれたZIPファイルが生成されます。
解凍すれば、ゲームエンジンにインポートする準備が整います。

次のステップ

アニメーションとしてどのようになるかをプレビューしてみましょう。スプライトアニメーターガイドをチェックしてください。