はじめる

実践的な制作手順

AIスプライトアトラス:余白と基準点を保ってまとめる方法

象牙色のトレーに置かれ、琥珀色の間隔材で離された四つのグラファイト色の彫刻
間隔と形の整列を表す抽象アート。

スプライトアトラスは、既存の絵をまとめる作業です。エンジンが必要とするのは、各コマの位置と基準点です。

入力は架空の配達員の実際の歩行試作PNG8枚です。アトラス準備とキャラクター生成を分け、既存の画素と順序を保持して配置します。アニメーション自体の修正は別の工程です。

まず入力ファイルを確認する

Ciyoの新しいプロジェクトに承認済み画像を読み込み、ファイル名を残します。幅、高さ、アルファチャンネルを記録してください。歩行コマの一枚だけが30 × 32で、ほかが32 × 32なら、その違いが意図したものか先に判断します。

合成された一覧画像だけを元データにしないでください。個別ファイルがあれば、まとめた領域と元の絵を比較できます。アニメーション名とコマ順も明記します。名前順ではframe_10がframe_2より先になることがあります。

Ciyoキャンバス全体:Generated Filesには実際の32 × 32 PNGが8枚並びます。この試作の歩行フレームを配置します。承認済みの待機フレームは実演に含みません。
Generated Filesには実際の32 × 32 PNGが8枚並びます。この試作の歩行フレームを配置します。承認済みの待機フレームは実演に含みません。

アトラスの仕様を決める

対象エンジンと、対応するマニフェスト形式を選びます。未定なら、まず単純なJSONの対応表を作業記録として依頼します。すべてのエンジンで使えるとは決めつけません。

デザインエージェントに、作業領域の既存ファイルを処理するよう依頼します。承認済みのピクセルを維持してください。コマの配置と座標の出力に、生成による画像編集は必要ありません。

Ciyoキャンバス全体:仕様は4列2行、外周4 px、間隔4 pxです。回転とトリミングは無効にします。数値はあくまで例です。
仕様は4列2行、外周4 px、間隔4 pxです。回転とトリミングは無効にします。数値はあくまで例です。
この指示をコピー
承認済みの配達員PNGを一つのアトラスにまとめてください。描き直し、再サンプリング、色変更はしないでください。回転は無効、元のコマ順を維持します。例の設定として4ピクセルの透過間隔を設けます。filename、x、y、width、height、元サイズをJSONに記録してください。実際の出力サイズと読めなかった入力を報告してください。

余白は実際の設定で試す

余白は隣接するスプライトを離します。一方、端の色を外側へ複製する処理もあります。透過の間隔と端のピクセルの複製は別の操作なので、無断で置き換えないよう指定します。

Unityに余白などの設定があるのは、読み込みとフィルターが結果に影響するためです。例の4ピクセルは出発点です。倍率、ミップマップ、圧縮の全条件で十分とは限りません。最終設定で確認します。

トリミングと基準点を分ける

透過部分を切り詰めると面積は減りますが、画像の開始位置が変わります。元のフレームサイズとオフセットを復元できる情報が必要です。

最初はトリミングと回転を無効にします。動作したら最適化を一つずつ有効にし、再び再生確認します。容量が減っても、バッグや足の位置がずれるなら改善にはなりません。

PNGとマニフェストを照合する

すべての矩形が画像内に収まり、重ならず、ファイル名が重複しないことを確認します。いくつかの領域を切り出し、元ファイルとピクセルを比較します。小さなアトラスなら全コマを確認してください。

アトラスの受け入れ確認
項目確認できる根拠問題のある状態
座標切り出した画像と矩形が一致欠けや重なり
順序意図した順で歩行が再生ファイル名の文字順で並ぶ
アルファ透過の余白が透過のまま不透明な背景が入る
基準点未トリミングのコマで共通再生中に人物が跳ぶ
Ciyoキャンバス全体:実際のアトラスは148 × 76です。8領域の画素は元のフレームと一致し、間隔の3056画素はすべて透明です。エンジンでの分割とフィルタリングは未検証で、配置しても歩行ポーズは直りません。
実際のアトラスは148 × 76です。8領域の画素は元のフレームと一致し、間隔の3056画素はすべて透明です。エンジンでの分割とフィルタリングは未検証で、配置しても歩行ポーズは直りません。

最後にエンジンへの読み込みを試す

対象エンジンに読み込み、明るい背景と暗い背景で待機・歩行を再生します。実寸と製品で使う倍率を確認してください。隣の色が端に混ざっていないか、ループの境目で位置が跳ばないかを見ます。

元のコマ、パッキング設定、マニフェストをまとめて残します。読み込みに失敗しても、キャラクターを生成し直さず再配置できます。確認済みPNGは参考になりますが、互換性には実際の読み込み結果が必要です。

よくある質問

アトラスと一覧画像は同じですか?

アトラスは配置領域と読み込み仕様を持ちます。一覧画像は見た目を確認するだけの場合があります。

4ピクセルの余白で十分ですか?

フィルター、圧縮、ミップマップ、表示倍率によって変わります。対象エンジンで確認してください。

各スプライトをぴったり切り抜けますか?

マニフェストとエンジンが元のサイズとオフセットを復元できる場合に限ります。位置の跳びを調べるときは、切り詰めずに始めます。

承認済みのスプライトをまとめる

元のコマをCiyoの一つのボードに残し、書き出す前にパッキング仕様を決めましょう。