フレームのジオメトリとアニメーションの順序を説明する
規則的なグリッドでは、セルの幅と高さ、列数、各アニメーションのフレームインデックスを保存します。ソースxは（フレームインデックスを列数で割った余り）×セル幅、ソースyは（フレームインデックス÷列数を切り捨てた行インデックス）×セル高さとして求めます。不規則なアトラスではソース矩形を明示的に保存します。アニメーションの順序とファイルの順序は分けてください。画像が連続順ではなくポーズ別に並んでいる場合、8フレームの歩行アニメーションには [0, 1, 2, 1, 0, 3, 4, 3] のインデックスを使えます。
スプライトをトリミングして透明な余白を削除する場合は、元のキャンバス サイズとトリム オフセットも保存します。キャラクターの足など、安定したピボットの周りに描画して、アートワークの変化に応じてフレームの境界によって衝突ボディや視覚的な地面の接触が動かないようにしてください。
ソース長方形を意図的に使用する
Canvas の drawImage()drawImage には、ソース四角形を選択し、それを宛先四角形に拡大縮小するオーバーロードがあります。 MDN では、ソースの x、y、幅、高さを宛先の x、y、幅、高さとは別に文書化します。この分離を使用して、レンダリング サイズを変更しながらアトラスのトリミングを正確に保ちます。最初、最後、および行境界フレームをテストします。間違った列カウントは、境界にある隣接するスプライトからの 1 ピクセルの細片として現れることがよくあります。
ジオメトリを診断する前に継ぎ目と荷重を確認してください
拡大縮小して描画した際に隣の画像がにじむ場合は、アトラスのセル間に透明な余白を設け、選んだフィルタリング方式が絵柄に合っているか確認します。描画先の各フレームをデバッグ用の矩形で囲み、一時的にインデックスを表示します。描画前に画像の読み込みとデコードを待ち、実際のcanvasの拡大率と内部描画バッファの解像度でテストします。拡大していないフレームと拡大したフレームを比較してください。拡大した場合だけ継ぎ目が出るなら、ソース座標を変える前にサンプリングとアトラス内の余白を調べます。
スプライトアトラスのレンダリングについての質問
隣のスプライトの一部が表示されるのはなぜですか?
ソース四角形には隣接するピクセルが含まれる場合があります。または、スケーリングされたサンプリングにより、密に詰め込まれたアトラスからのエッジ ピクセルが表示される場合があります。フレーム順序を変更する前に、クロップを確認し、セル間に適切な余白を設けしてください。
コリジョン ボックスはトリミングされたスプライト境界を使用する必要がありますか?
通常、コリジョン ディメンションは、付随的な透明ピクセルではなく、ゲーム キャラクターに関連付けられて保持されます。安定したピボットと明示的な当たり判定形状により、アニメーション フレームによるゲームプレイ ジオメトリの変更が防止されます。
関連情報
古い情報を見つけましたか？ 訂正を連絡