第10章 背景表示の様々なテクニック

10-2 一枚絵のスクロール

背景画像を自動的にスクロールさせるプログラムを考える。
一枚絵がスクロールしているように見せるためには、画像の右端と左端が違和感なくくっつくような画像を用意する必要がある。
ゲーム画面の背景として用意した宇宙の画像はそのように作られているため、この画像を使い、横スクロールを実現させる。

横スクロールの考え方

【1回目のループ】

背景画像をそのままバック・バッファへ転送する。

【2回目のループ】

  1. 背景画像の左側をスクロール幅(10ピクセルとする)分切り取った残りの画像を、バック・バッファの左端に転送する。
  2. 先ほど転送しなかった背景画像の左側を、バック・バッファの描画されていない部分へ転送する。

【3回目以降のループ】

  1. スクロール幅を増やしながら、2回目のループの処理を繰り返す。
  2. スクロール幅がバック・バッファの幅と同じになったら1回目のループに戻る

プログラム例(Game.cpp)

【背景処理用グローバル変数の定義】

/* 背景描画用変数 */
static int Back_X;

【初期化処理】

//-----------------------------------------------------------------------------
// 関数名 : GameInit()
// 機能概要: スタート処理初期化
//-----------------------------------------------------------------------------
void GameInit(HWND hWnd)
{
    //------------------------------------------------------- 各変数の初期化
    /* 背景スクロール */
    Back_X = 0;
    /* 自キャラ(カーソルキーで移動) */
    StatusInit(&MyChara, 0, 0, 40, 40, 310, 230, 4, 4);
    /* ゴキブリ(動かない) */
    StatusInit(&Goki, 64, 394, 96, 426, 400, 300, 0, 0);

    //------------------------------------------------------- フレームナンバーセット
    g_FrameNo = GAME_FRAME;

}

【背景描画処理】

//-----------------------------------------------------------------------------
// 関数名 : BackDraw()
// 機能概要: 背景描画処理
//-----------------------------------------------------------------------------
static void BackDraw(void)
{
    HRESULT      hRet;
    RECT         rcBack;

    /* 1枚目を描画 */
    SetRect(&rcBack, Back_X, 0, 640, 480); // 左側に表示する画像の矩形をセット
    hRet = g_pDDSBack->BltFast(0, 0, g_pDDSGame, &rcBack, DDBLTFAST_NOCOLORKEY);
    if (hRet != DD_OK)
        return;

    /* 2枚目を描画 */
    if (Back_X > 0)
    {
        SetRect(&rcBack, 0, 0, Back_X, 480); // 右側に表示する画像の矩形をセット
        hRet = g_pDDSBack->BltFast((640 - Back_X), 0, g_pDDSGame, &rcBack, DDBLTFAST_NOCOLORKEY);
        if (hRet != DD_OK)
            return;
    }

    /* 背景の移動 */
    Back_X++;
    if (Back_X >= 640)
        Back_X = 0;

}

【解説】

  1. Back_xは、「スクロールの幅」と「切り取る画像の境界線」をあらわす
  2. 本来、640や480などの定数はマクロ(#define)で定義するべきである
  3. スクロールスピードを1で考えているため、スクロール幅の増分計算を Back_x++ で行っているが、これもマクロで定義した定数を使うべきである
  4. スクロール幅増分計算に時間制御をかければ、もっとゆっくりしたスクロールになる

10章2練習問題1(必須)

第10章用プログラムをダウンロードしてプロジェクト作成後、上記修正を行い、ゲーム画面で背景が右から左に流れることを確認しなさい。

[ 実行結果サンプル ]

10章2練習問題2(自由)

練習問題1のプログラムを修正する。「S」キーを押すと、背景スクロールのスピードが1段階速くなり、「A」キー押すと1段階遅くなるように改造しなさい。

[ 実行結果サンプル ]

10章2練習問題3(自由)

練習問題1のプログラムを修正する。実習で使用している背景画像は、縦にスクロールできるように作られている。背景画像を実習用のものと入れ替え、縦スクロールするように改造しなさい。
(背景画像の縦幅が480ピクセルではないことに注意!!)

解答例】自力でできた人のみ参考にしてください


[ TOP ] [ NEXT ]