実践的な制作手順
スプライトの支点を揃える：描き直さず透明な余白を追加
切り抜きサイズの違うアニメーションフレームを同じ中心位置に置くと、配達員の足が跳ねることがあります。絵を変更すると別の問題が生じかねません。エンジンで解釈できる共通フレームと、明示した接地点を準備します。
Ciyoのファイル作業機能で架空のピクセルスプライトを3つ作り、共通フレームに余白を加えました。足元の支点は指定した座標で、エンジンから検出したピボットではありません。元画像の矩形は正確に保持していますが、読み込みとアニメーション再生は別途確認が必要です。
余白を加える前に支点を記録する
地面に触れる靴底など、各ポーズで意味が一貫した点を選びます。原点を明記して座標を記録します。見た目の中心、外接矩形の中心、足の接地点は別の概念です。ゲームの要件に合わせて選びます。
原本PNGは二値の透明度を持つ、余白を切り詰めたRGBA画像です。Aは18×22で局所支点(9,21)、Bは20×20で(10,19)、Cは16×24で(8,23)です。左上の画素を原点にしています。
共通のフレームと接地点を決める
透明な32×32フレームと共通支点(16,28)を選びました。平行移動後も元画像全体が収まる必要があります。端が切れるなら、出力前にフレームを大きくするか共通点を変更します。
配置オフセットは共通支点から局所支点を引いて求めます。拡大縮小のない整数座標の移動です。承認済みフレームを保つ作業では、新しいポーズや滑らかな輪郭を求めません。
| フレーム | 原本 | 局所支点 | 配置オフセット | 共通支点 |
|---|---|---|---|---|
| A | 18×22 | (9,21) | (7,7) | (16,28) |
| B | 20×20 | (10,19) | (6,9) | (16,28) |
| C | 16×24 | (8,23) | (8,5) | (16,28) |
透明なフレームに画素を直接コピーする
CiyoはRGBAの元画像矩形を丸ごと出力にコピーしました。アルファを貼り付けマスクにすると、直接コピーではなく画素が混ざる場合があります。半透明な縁を保つなら処理を明確に指定します。
今回の原本は透明か不透明のアルファのみですが、直接コピーは不要な混合を避けられます。準備済みフレームと未変更の原本を並べて保管し、比較を再現できるようにします。
既存のRGBAスプライトを透明な32×32フレームに配置してください。共通支点は(16,28)、局所支点はA (9,21)、B (10,19)、C (8,23)で、すべて左上原点です。A (7,7)、B (6,9)、C (8,5)にRGBAを直接コピーし、サイズ変更や描き直しはしません。保存後に開き直し、元の矩形を厳密に比較し、外側のアルファが0であることを確認します。ファイルと支点マニフェストを返してください。保存した矩形と空白部分を確認する
3つの出力を独立してダウンロードし、デコードしました。元の矩形は全RGBA画素が一致し、外側の全画素はアルファ0で、接点は(16,28)に来ていました。ファイル準備の検証であり、アニメーションコントローラの動作検証ではありません。
最初の比較ボードでCiyoがラベルの重なりを検出し、修正版を作りました。古い下書きを外した後、保存済みの整理された配置を表示するにはページの再読み込みが必要でした。その記録も残しています。表示配置の変更でスプライト自体は変わっていません。
エンジンの座標規則に変換する
エンジンは原点を正規化座標、中心からのオフセットなどで表すことがあります。このマニフェストは左上原点の画素座標を記録します。意味を変換せず、別規則の入力欄へ数値をそのまま貼り付けないでください。
短いシーケンスを読み込み、必要に応じて不要な平滑化を止め、再生中の接地を確認します。一貫した接点は揺れの原因を1つ減らしますが、ポーズ、タイミング、描画の不整合は修正しません。
フレームと支点マニフェストを渡す
原寸、局所支点、配置オフセット、共通支点を一緒に保管します。スクリーンショットから推測せず配置を監査できます。下のJSONには実際のファイル名と確認結果があります。
別のスプライトでは承認済みの絵から接点を選び、収まりと画素比較を繰り返します。透明な余白は共通の容器を作る処理で、すべてのキャラクターの物理的に正しい支点を推定する処理ではありません。
よくある質問
アトラスの間隔と同じですか？
違います。ここでは各フレームの接地点を余白で揃えます。アトラスの間隔は詰めた画像間のサンプリングの混入を抑えます。
ゲームエンジンで支点を試しましたか？
いいえ。左上原点の画素座標を準備しました。対象エンジン向けに変換して確認してください。
スプライトの形は変わりましたか？
いいえ。独立したデコード比較で、元の矩形が完全に同じことを確認しました。
短いスプライト列の支点を揃える
承認済みフレームをCiyoで開き、共通支点を指定して、確認済みの透明余白とマニフェストを依頼しましょう。