スプライト抽出ガイド

オンラインのスプライト シート アンパッカー: スプライト シートを即座に PNG に分割する方法

自動検出、グリッド スライス、JSON/plist 構成シートを使用して、スプライト シートとテクスチャ アトラスを個々の PNG フレームに分割する方法を学びます。

読了目安 11 分 • 2026-06-05

はじめに

パックされたスプライト シートは実行時のレンダリング効率にとって不可欠ですが、このプロセスを逆に行う必要がある場合があります。ゲーム アーティスト、開発者、モッダーは、個々のフレームを変更したり、レガシー テクスチャを抽出したり、シート タイルを未加工の PNG アセットに分割したりする必要が頻繁にあります。

Web ベースの Sprite Sheet Unpacker は、これを達成するためのゼロセットアップの即時パスを提供します。 image エディタを開いて手動でフレームをトリミングするのではなく、自動アウトライン検出、座標ファイル、またはタイル グリッドを使用してシートをロードし、数秒でシートを分割できます。

このガイドでは、テクスチャ アトラスをオンラインで解凍し、適切なスライス モードを選択し、抽出されたフレーム アニメーションをエクスポート前にデバイス上で検証するためのワークフローについて説明します。

テクスチャ シートのコア展開モード

スプライト シートの構築方法が異なるため、実稼働対応のアンパッカーでは複数のスライス方法を提供する必要があります。グリッドはレトロなタイル マップに最適ですが、トリミングされた非グリッド アトラスには座標ファイルが必要です。

ToolBuddy は、すべてのゲーム アセット構造をカバーする 4 つのスライス方法をサポートし、ファイルを完全にローカル メモリ内で処理して速度とプライバシーを維持します。

  • 自動検出: ピクセル境界を自動的にトレースして、不規則な形状をスライスします。
  • 構成パーサー: JSON、plist、XML、またはアトラス ファイルを読み取り、名前付き座標を解析します。
  • グリッド分割: カスタムのオフセットと余白を使用して、均一なセル サイズでシートを分割します。
  • 手動選択: シート上にカスタム クロップ ボックスを直接描画できます。

スプライト シートを PNG フレームに段階的に分割する方法

まず、スプライト シート image (PNG または JPG) を準備します。座標メタデータ ファイル (Texture Packer からエクスポートされた plist や JSON シートなど) がある場合は、image と一緒にアップロードします。アンパッカーは自動的に形式を検出し、名前をその正確な領域にマップします。

使用可能な構成ファイルがない場合は、「自動検出」を選択して境界パーサーに立体形状の輪郭を描画させるか、「グリッド」モードでセルの寸法を入力します。キャンバス上のスライス ラインを確認し、詳細を検査するフレームを選択して、結果を zip パッケージとしてエクスポートします。

  • スプライト シート image とオプションの座標ファイルをアップロードします。
  • スライス モード (自動、構成、グリッド、または手動) を選択します。
  • ビジュアル インタラクティブ ビューアでスライスされたフレーム ボックスを検査します。
  • 抽出されたフレームを 1 つの ZIP フォルダーに圧縮してダウンロードします。

内蔵アニメーション プレーヤーを使用したスプライトの検証

フレームの解凍は作業の半分にすぎません。スムーズに移行することも確認する必要があります。インタラクティブなキャンバス プレーヤーを使用すると、抽出したフレームをアニメーション ループにコンパイルし、保存する前に再生を確認できます。

FPS スライダーを調整し、ループ状態をプレビューすることで、欠落しているフレームや登録オフセットをブラウザーで直接検出できるため、エンジンのインポートの試行錯誤が不要になります。

  • 抽出されたフレーム用のビジュアル アニメーション ループ コンパイラ。
  • 調整可能な再生速度 (FPS) 設定。
  • パンおよびズーム機能を備えた対話型プレビュー ボックス。

座標ファイル形式について

メタデータ シートには、スプライト名を境界ボックスにマップする命令が含まれています。アセットをリバース エンジニアリングしている場合、使用している形式を把握しておくと、パーサーの警告を解決するのに役立ちます。

ToolBuddy は、Cocos2d の plist シート、Phaser および PixiJS の JSON Hash/Array、Starling の XML シート、および Spine のテキスト アトラス ファイルをサポートし、座標の精度を保証します。

アセットパイプラインへの解凍の統合

シートの解凍の後に最適化が行われることがよくあります。抽出されたフレームのサイズを縮小する必要がある場合は、Image Compressor を介してフレームをルーティングできます。再配置する必要がある場合は、Texture Packer に再インポートして、クリーンで最適化されたシートを作成します。

これらのユーティリティをリンクすると、完全な資産管理フローが提供され、設計の反復サイクルが高速かつ組織的に維持され、完全にローカルで実行されます。

FAQ

このワークフローを読み終えたあとに読者がよく抱く追加の質問です。

JSON または plist ファイルなしでスプライト シートを解凍できますか?

はい。メタデータ ファイルがない場合は、「自動検出」モードを使用して形状の境界を自動的にトレースするか、スプライトが均一なタイルに配置されている場合は「グリッド」モードを使用します。

ツールはどのメタデータ シート形式を解析しますか?

アンパッカーは、JSON (Hash/Array)、plist (Cocos)、XML (Starling/Sparrow)、CSS シート、および Spine .atlas テキスト ファイルを解析します。

オンラインで解凍する場合のファイル サイズ制限はありますか?

いいえ。ファイルはサーバーにアップロードせずにブラウザのメモリ内でローカルに処理されるため、大きなテクスチャ シート (最大 4096 × 4096 以上) を即座に解凍できます。