# アトラス セルをソースおよび宛先の四角形にマッピングする

> 1 つのレンダリング マップ内でソース四角形、トリミング ルール、ピボット、ロード チェックを定義することで、スプライト アトラス フレームを整列させます。

- URL: https://oneshotgems.ai/ja/topics/sprite-atlas-rendering
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

スプライト アトラスは 1 つの画像に多くのフレームを詰め込みますが、ブラウザは描画を要求した四角形のみを描画します。フレーム幅が間違っていると、隣接するフレームが切り取られる可能性があります。ピボットが一致しないと、各画像が有効であってもアニメーションがぐらついて見える可能性があります。 1 つのデータ マップでフレーム ジオメトリを定義し、ソース ピクセルをゲームで使用されるデスティネーション サイズから分離します。これにより、アトラスのデバッグは、各描画呼び出しを目で調整するのではなく、明示的な四角形をチェックすることになります。

## フレームのジオメトリとアニメーションの順序を説明する

規則的なグリッドでは、セルの幅と高さ、列数、各アニメーションのフレームインデックスを保存します。ソースxは（フレームインデックスを列数で割った余り）×セル幅、ソースyは（フレームインデックス÷列数を切り捨てた行インデックス）×セル高さとして求めます。不規則なアトラスではソース矩形を明示的に保存します。アニメーションの順序とファイルの順序は分けてください。画像が連続順ではなくポーズ別に並んでいる場合、8フレームの歩行アニメーションには [0, 1, 2, 1, 0, 3, 4, 3] のインデックスを使えます。

スプライトをトリミングして透明な余白を削除する場合は、元のキャンバス サイズとトリム オフセットも保存します。キャラクターの足など、安定したピボットの周りに描画して、アートワークの変化に応じてフレームの境界によって衝突ボディや視覚的な地面の接触が動かないようにしてください。

## ソース長方形を意図的に使用する

Canvas の drawImage()drawImage には、ソース四角形を選択し、それを宛先四角形に拡大縮小するオーバーロードがあります。 MDN では、ソースの x、y、幅、高さを宛先の x、y、幅、高さとは別に文書化します。この分離を使用して、レンダリング サイズを変更しながらアトラスのトリミングを正確に保ちます。最初、最後、および行境界フレームをテストします。間違った列カウントは、境界にある隣接するスプライトからの 1 ピクセルの細片として現れることがよくあります。

## ジオメトリを診断する前に継ぎ目と荷重を確認してください

拡大縮小して描画した際に隣の画像がにじむ場合は、アトラスのセル間に透明な余白を設け、選んだフィルタリング方式が絵柄に合っているか確認します。描画先の各フレームをデバッグ用の矩形で囲み、一時的にインデックスを表示します。描画前に画像の読み込みとデコードを待ち、実際のcanvasの拡大率と内部描画バッファの解像度でテストします。拡大していないフレームと拡大したフレームを比較してください。拡大した場合だけ継ぎ目が出るなら、ソース座標を変える前にサンプリングとアトラス内の余白を調べます。

## よくある質問

**隣のスプライトの一部が表示されるのはなぜですか?** ソース四角形には隣接するピクセルが含まれる場合があります。または、スケーリングされたサンプリングにより、密に詰め込まれたアトラスからのエッジ ピクセルが表示される場合があります。フレーム順序を変更する前に、クロップを確認し、セル間に適切な余白を設けしてください。

**コリジョン ボックスはトリミングされたスプライト境界を使用する必要がありますか?** 通常、コリジョン ディメンションは、付随的な透明ピクセルではなく、ゲーム キャラクターに関連付けられて保持されます。安定したピボットと明示的な当たり判定形状により、アニメーション フレームによるゲームプレイ ジオメトリの変更が防止されます。

## 気になることを、もっと

- [空白のスタートをせずにゲームアセットをロードする](https://oneshotgems.ai/ja/topics/game-asset-loading): 実際の進行状況を報告し、失敗を処理し、クリティカル フレーム中の大きなイメージのデコードを回避するアセットの読み込みシーケンスを計画します。
- [ゲーム画像を鮮明にするCanvas解像度の設定](https://oneshotgems.ai/ja/topics/canvas-pixel-density): ゲームを画面全体で鮮明に見せる必要がある場合は、キャンバスの背景解像度、デバイスのピクセル比、メモリ使用量、描画コストのバランスをとります。

## 関連情報

- [キャンバス上の画像を使用する MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [MDN 描画イメージ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
正規ページ: https://oneshotgems.ai/ja/topics/sprite-atlas-rendering