Skip to content
第08回 画像リソースの管理

3 / 4 表示矩形による画像の拡大縮小描画 ​

このステップの目的

素材のピクセル寸法、表示領域(DrawRect)、命中範囲(Hitbox)を分ける理由を理解します。

画像の素材寸法にゲームルールを依存させない ​

初学者向けのプログラムでは、読み込んだ画像の幅、たとえば64×64の寸法をそのまま移動範囲や当たり判定に使いがちです。

この方法には、大きな落とし穴があります。
デザインを細かく描き直したり、余白を調整したりして画像を差し替えるだけで、移動速度や当たり判定の広さまで変わってしまいます。その結果、ゲームバランスも崩れます。

プロのゲーム開発では、次の3つの大きさを独立させて管理します。

大きさの種類決定する理由管理する場所
1. 素材のピクセル寸法画像ファイル(PNG)の都合や解像度PNGファイル内部
2. 画面上の表示矩形(DrawRect)画面上でどの位置に、どのサイズで見せるかGameTuning.h(表示パラメータ)
3. ゲーム上の命中矩形(Hitbox)ゲームルールとしてどこに触れたら被弾とするかGameTuning.h(ゲームバランス値)

DrawExtendGraphによる拡大縮小描画 ​

ImageManager::Draw()は、画像IDに加えて、描画すべき領域を表すRect(表示矩形)を受け取ります。
内部のDrawExtendGraph()で、元画像のサイズにかかわらず、指定された矩形に合わせて拡大・縮小して描きます。

ImageManager.cppcpp
void ImageManager::Draw(Id id, const Rect& rect) const
{
    int handle = handles[ToIndex(id)];
    DrawExtendGraph(
        static_cast<int>(rect.x),
        static_cast<int>(rect.y),
        static_cast<int>(rect.x + rect.width),
        static_cast<int>(rect.y + rect.height),
        handle,
        TRUE);
}

32×32のドット絵でも128×128の高精細なイラストでも、DrawRectが同じなら、画面上の大きさは同じになります。

素材を自由に差し替えられる設計は、チーム制作でも役立ちます。

チェックリスト
  • 素材の画像寸法、画面上の表示矩形(DrawRect)、当たり判定(Hitbox)の3つが分離されている理由を説明できる
  • DrawExtendGraphを用いて、指定した表示矩形に合わせて伸縮描画されていることを理解している
  • 画像ファイルを差し替えても、当たり判定やゲームバランスが勝手に変化しない構造になっている