ペットの複数アニメーション状態に対応する再利用可能なスプライトシートの設計方法

シートの寸法を決める前に、ペットに必要な状態をリストアップします。最小限の構成としては、待機（idle）、移動、簡単なリアクションなどが考えられますが、具体的なリストはプロジェクトによって異なります。各状態について、ループ再生するのか、1回だけ再生するのか、それとも末尾で反転再生するのかを決定します。最初と最後のフレームを指定し、その動きに必要な固有のポーズ数を概算します。これは計画を立てるための補助手段であり、決まり切ったアニメーションの公式ではありません。

Asepriteでは、フレームタグを使用して特定の範囲にアニメーション名を付け、タグごとに順方向、逆方向、ピンポン再生などの再生方式を指定できます。設計の段階で範囲に名前を付けてタグを設定しておくと、後からまとめてエクスポートする場合でも、ソースファイル上で状態の境界が明確になります。Aseprite: Tags

受け取り側のツールが規則的なグリッドを前提としている場合は、アニメーションフレームに対して一貫したセルの幅と高さを設定します。ペットの最も幅が広いポーズ、上がった耳や尻尾、体の外側に及ぶわずかな動きなどを収められる余白を含めてください。ペットは、足元の中心や静止ポーズの中心など、共通のアンカーを基準にして配置します。ペットがポーズを変える際は、アンカー自体を動かすのではなく、そのアンカーの周りで描画を動かしてください。そうしないと、フレーム間でペットが跳ねて見える原因になります。

固定グリッドは、すべてのセルの寸法や行・列の位置が同一であるため、スライスが簡単です。Asepriteのスプライトシートインポートでは、フレームの幅と高さを指定でき、画像に隙間がある場合はオフセットやパディングにも対応します。フレームサイズが大幅に異なる場合や個別のピボットが必要な場合は、均一なグリッドよりも、フレームごとのメタデータを備えたアトラスの方が適していることがあります。Aseprite: Sprite sheets

状態名とフレーム範囲を記した簡単なレイアウト計画をスケッチします。規則的なグリッドの場合、状態ごとに行を割り当て、各状態のフレームを左から右へ再生順に並べます。状態によってフレーム数が異なる場合は、未使用のセルを空のままにしておくか、状態ごとに独立したストリップを使用します。単に行を埋めるためだけに無関係なポーズを配置してはいけません。1行に並べるシーケンスはコンパクトですが確認が難しくなることがあります。一方でマトリックス形式は、人間にとってもシンプルなグリッドベースのインポーターにとっても、状態のグループ分けが明確になります。

行の順序に世界共通の規則はありません。インポーターが想定している順序が重要になります。Asepriteのドキュメントには、インポート時にシートの種類によってフレームが取り込まれる順序が影響を受けると記載されており、エクスポート機能は水平、垂直、マトリックスのレイアウトに対応しています。対象のエンジンが解釈できる順序を選択し、プロジェクトのメモやメタデータに記録しておきましょう。Aseprite: Sprite sheets

スプライトシートは納品用の画像として扱い、唯一の編集ソースにはしないでください。レイヤー、フレーム、タグ、スライスを含むネイティブのプロジェクトファイルを保持しておけば、統合されたエクスポート画像から復元することなく、個別の状態を変更できます。Asepriteのドキュメントによると、.asepriteファイルはレイヤー、フレーム、タグ、スライスなどの情報を保持し、PNGエクスポートは他の環境でアートワークを使用する際に役立ちます。Aseprite: Files

ランタイム側でフレームの特定やタイミング、状態名の読み取りが必要な場合は、メタデータを追加します。Asepriteのエクスポートオプションには、JSONデータ、パディング制御、トリミング、タグ選択などが含まれます。パックされたレイアウトや可変サイズの切り抜きを使用する場合は、そのメタデータを画像と一緒に保持してください。ピクセル座標を行と列だけで安全に推測することはできません。また、Asepriteのスライスは名前付きの境界やピボットを保持でき、スライス情報をスプライトシートのJSONに含めることも可能です。Aseprite: ExportSpriteSheet、Aseprite: Slices

パディングとは、フレーム間やシートの周囲にある空白部分を指します。その適切な量は、インポーターやテクスチャのサンプリング方法によって異なります。対象のワークフローで目に見える隙間が必要な場合や、境界を簡単に確認したい場合は、セル同士を離しておきます。フレーム同士が接している場合は、インポーターが問題なくスライスできるか確認してください。Asepriteにはエクスポート設定としてボーダー、シェイプ、インナーのパディングが個別に用意されているため、「パディング」を一括りの機能として捉えるのではなく、ツール内での各設定の意味を確認してください。Aseprite: ExportSpriteSheet

トリミングは透明な余白を削除するため、空白領域を削減できますが、エクスポートされるフレームの境界が変わってしまう可能性があります。フレームをトリミングする場合は、表示領域の切り抜きを元の共通アンカーの位置に戻すために必要なオフセット、ピボット、その他のメタデータを保持してください。そうしないと、元の描画で正しく位置合わせされていても、シルエットが小さいポーズで位置がズレて見えてしまうことがあります。フレームごとのメタデータを持たない規則的なグリッドのワークフローでは、インポーター側で元の整列情報が保持されない限り、個々のセルをトリミングするのは避けてください。

エクスポートする前に、計画した状態を順番に確認します。各ループの最初と最後のフレームが意図どおりにつながっているか、1回限りのアクションが適切な最後のポーズで停止するか、ペットのアンカーが視覚的にブレていないかを確認してください。その後、対象となるフレーム順序、セルの寸法、オフセット、パディングを使用してシートをインポートします。すべての状態を意図したタイミングで再生してみてください。画像ビューアでは綺麗に見えるシートであっても、インポーターで読み込むと切り抜きの誤り、フレームの抜け、順序の入れ替わりが発生していることがあります。

次のステップにシートを渡す前に、以下の簡易チェックリストを活用してください。

• すべての状態に明確な名前とフレーム範囲があるか。

• グリッドの寸法、フレームの寸法、読み込み順序がインポーターと一致しているか。

• ポーズが変わっても、ペットが同じアンカーに揃えられているか。

• 切り抜きやパディングによってディテールが欠けたり、隣接するセルと混ざったりしていないか。

• エクスポートされたメタデータを使用する場合、正しい画像と対になっており、現在のレイアウトを記述しているか。

• 後からの修正に備えて、編集可能なソースファイルが残されているか。

まず、状態のリストと再生動作を書き出します。次に、インポーターが規則的なグリッドを前提としているか、それともフレームメタデータを処理できるかを判断します。最も幅の広いポーズを基準にセルサイズとアンカーを設定し、各状態を行または名前付きフレーム範囲にマッピングしてから、実際にアニメーションを描画・調整します。すべてのポーズを仕上げる前に、早い段階で小さなテスト用シートをエクスポートし、実際のランタイムにインポートしてみてください。このテストを行うことで、変更コストがまだ低いうちにレイアウトに関する想定のズレを発見できます。

計画において最も重要な選択は、アートワークとインポーターの間の「規約」です。規則的なグリッドには一貫したセルと決められた順序が必要であり、パック形式やトリミングされたシートには信頼できるメタデータと保持された配置情報が必要です。その規約を明確にしておけば、プロジェクトに合わせてエクスポート時のレイアウトが変わっても、同一のソースアニメーションを整然とした状態に保つことができます。

• Sprite sheets — Aseprite Docs

• Tags — Aseprite Docs

• Files — Aseprite Docs

• ExportSpriteSheet — Aseprite API

• Slices — Aseprite Docs