複数ファイル入力
1回の選択につき、最大64枚の PNG、JPG、または WebP フレームを追加できます。
言語: 日本語
PNGアトラス向けスプライトシートパッカー
最大64枚のスプライトフレームを均一グリッドのアトラスに並べ、対応するJSON座標を書き出します。
無料0 クレジットPNG アトラス + JSON
スプライトシートパッカーはフレームをアップロードしますか？
いいえ。最大64フレームがブラウザ内にとどまり、均一なグリッドに配置されます。PNG atlasとJSON座標を取得でき、フレームのトリミングや回転は行われません。
ライブワークスペース
ローカルで作業。きれいに書き出し。
このユーティリティはブラウザ内で動作します。ファイルは端末内に保存されたままで、生成クレジットは使用しません。
ソース＆設定01
ローカルで非公開処理0 クレジット
2フレーム以上追加してください
このユーティリティはローカルで動作します。作品はアップロードされず、クレジットも消費しません。
ゲーム内で
アセットをゲームとして見る。
ゲームプレイ、携帯端末での使いやすさ、統一感のあるデザインを検討できます。これらのAI生成コンセプトは見た目の可能性を示すもので、公開前にはご自身のアセットとエンジン読み込みを確認してください。
ゲーム全体で統一されたアートディレクション
プレイ可能なシーンを、キャラクター・地形・アイテム・UIとあわせて、1つの統一されたデザインとして確認します。
1キャラを方向別・動作別に確認
キャラクターの比率、色、アクションのシルエットを、周囲の世界観と見比べられます。
戦闘・アイテム・UIを1画面で
同じプレイ中の瞬間で、エフェクトの見やすさ、アイコン、UIのコントラストを確認できます。
実践例
同サイズのフレーム8枚をパック
具体的な入力を使い、出力を確認し、現在の制限を見てから次の手順を選んでください。
入力例
下の8つのデモフレームをダウンロードして解凍してください。各透明PNGは 32 × 32 ピクセルです。
確認ポイント
- 8枚のPNGフレームを順番にすべて選び、アトラスを4列に設定してください。
- プレビューを確認してください。横に32ピクセルのセルが4つ、縦に2つ並び、128 × 64のatlasになります。
- アトラスPNGとJSONをダウンロードします。1枚目のフレームが x: 0, y: 0 から始まり、5枚目が x: 0, y: 32 から始まることを確認してください。
期待される出力
32 × 32 の入力8枚を4列で並べると、128 × 64 のPNGアトラスとJSONフレーム座標が生成されます。
現在の制限
ローカルパッカーは、最も大きい入力に合わせた均一グリッドを使用し、最大64ファイルまで対応、フレーム境界も保持します。トリミング、回転、余白追加、最適なbin packingは行いません。
公式ワークフロー参照
独自のインポートを準備する際は、エンジンまたはエディタのドキュメントを確認してください。これらの資料はファイル形式や再生動作を説明するものであり、PixelBox の推奨を意味するものではありません。
提供元とサポート
コンテンツを更新しました:
LlamaGenによって公開・管理されています。このページでは、現在のPixelBoxの操作と書き出し形式を説明しています。記載内容の誤りや書き出しの問題については、チームまでご連絡ください。
01 / 仕組みが機能する理由
プレビューだけでなく、制作向けに作られています。
予測しやすいレイアウト
列数を選択してください。各セルは入力の最大幅と高さを使用し、フレームの元サイズは保持されます。
メタデータ付き
フレーム名、座標、サイズをJSONとして書き出します。
元データから、分かりやすくラベル付きの出力へ。
フレームを追加
アニメーションまたはアセットのPNGファイルを順番に選択してください。
列を選択
アトラスのレイアウトを設定し、生成プレビューを確認します。
両方を書き出し
アトラスPNGとJSON座標をダウンロードします。
03 / FAQ
作成前に条件を明確にしてください。
フレームはアップロードされていますか？
いいえ。パッキングはブラウザ内で行われ、ファイルはデバイス上に残ります。
どのJSON形式を使いますか？
書き出しには、画像名、アトラスサイズ、そしてx、y、width、heightを持つフレームオブジェクトが含まれます。各フレームには一意のファイル名を付けて、JSONの各項目を区別できるようにしてください。
透明ピクセルはトリミングされますか？
いいえ。グリッドパッカーは元のフレーム境界を維持し、フレームの回転や余白の最適化は行いません。トリミングやパディングの調整が必要な場合は、スプライトシートスライサーをご利用ください。