位置が跳ねるスプライトアニメーションを修正：キャンバスサイズ、基準線、トリミングのオフセット
それぞれのポーズは単独では問題なく見えても、再生するとキャラクターの位置が跳ねることがあります。最初に変えるべきものが速度であることは、ほとんどありません。動きの原因が元の絵なのか、切り出しの原点の違いなのか、最後から最初へのつなぎ目なのかを見極めてください。
一時停止して、実際のフレーム範囲を比較
連続画像を読み込み、再生せずにサムネイルを順にクリックしてください。エディターで各元フレームの寸法を記録します。64 × 64のポーズの後に、ぴったり切り抜いた28 × 45のポーズがあると、同じ座標系ではなくなります。プレビューで中央に置くと自然に見えても、キャラクターの足が動く場合があります。
スプライトシートアニメーターは、GIF書き出し時に小さいフレームを最大のキャンバス内で中央配置します。足、ピボット、武器の持ち手は推定しません。正確に位置合わせするなら、自動中央配置に頼らず、アップロード前に共通の透明キャンバスを用意してください。
動きに適した基準点を選択
| 連番 | 参考情報 | 避ける |
|---|---|---|
| 接地した待機動作 | 床の基準線と接地した足 | 頭の上端を揃える |
| 回転するUIアイコン | 意図した回転の中心 | 変化する切り抜きをそれぞれ中央に置く |
| 武器の振り | 持ち手または取り付け点 | 刃先を揃える |
| 爆発 | 意図したエフェクトの原点 | 非対称なすべてのポーズを、無理に中央に見せる |
歩行には意図した体の動きがあります。キャラクターのすべての部分を同じ座標に固定しないでください。胴体が上がる一方で、接地している足は床にとどまることがあります。アニメーションの目的を表す基準を選び、他の部分の意図した動きはそのまま残してください。
オフセットがあればトリミング済みフレームを復元
Asepriteが64 × 64のポーズからオフセット(19, 20)にある22 × 38の切り抜きを出力したら、透明な64 × 64の画像を作り、切り抜きを(19, 20)へ戻します。対応するJSONは、spriteSourceSizeでこのオフセットを提供します。frame内のアトラス座標は、ピクセルを読む場所を示すもので、復元したポーズ内で置く場所ではありません。
メタデータがあれば展開ツールを使います。内容ぎりぎりに切ったPNGだけが残っているなら元オフセットは失われているため、エディターで参照に合わせて手動配置します。高いFPSや大きいGIFでも、切り抜きだけからその座標は復元できません。
位置合わせのずれと、順序による飛びを区別
- 隣り合うポーズをゆっくり確認してください。切り抜きのために同じ基準点がキャンバスに対して動く場合は、元画像の配置を修正します。
- 基準点が安定しているのに体のポーズが急に変わる場合は、フレームの欠落や順序違いを確認してください。
- 最後のポーズの直後に最初のポーズを確認してください。内部では滑らかな連続画像でも、ループ境界で破綻することがあります。
- これらを確認してから再生速度を選んでください。FPSを増やすと一部の跳ねは隠れますが、修復はしません。
意図した動きを不具合とせず、出力を確認
反動、小さなジャンプ、踏み込みでは、基準点が動くのが適切な場合があります。連続するフレームを静止した輪郭に揃えてしまわず、意図した動作と比較してください。位置を揃えた可逆形式のバージョンを保持し、GIFを書き出して数回ループを確認します。GIFの色の変化や遅延時間の丸めは、空間的な位置合わせとは別の問題です。