第02回ゲームループと描画

今回の授業内容

ゲームループの更新と描画の順序を確認する
プレイヤーの座標をGameクラスに追加する
Update()とDraw()の役割を分ける
DXライブラリの図形描画でプレイヤーを表示する
座標や色を変更して、画面への影響を確認する

今回の開始状態

第01回終了時点のプロジェクトから始めます。
画面にはDX Library Projectという文字だけが表示されています。

今回の終了時点では、画面下部にプレイヤーの仮図形を表示します。
まだ入力では動きません。

変更するファイル

ファイル	変更内容
`Game.h`	プレイヤー座標をメンバ変数として追加する
`Game.cpp`	初期化、更新、描画処理を追加する

ゲームループの役割

ゲームは、入力を読み、状態を更新し、画面を描く処理を毎フレーム繰り返します。
開始用プロジェクトでは、すでに次の流れが用意されています。

cpp

while (ProcessMessage() == 0 && CheckHitKey(KEY_INPUT_ESCAPE) == 0)
{
    Update();
    Draw();
    ScreenFlip();
}

Update()はゲーム内の値を変える処理です。
Draw()は現在の値を画面に表示する処理です。

プレイヤー座標を追加する

まず、Game.hにプレイヤーの中心座標を追加します。

cpp

private:
    void Update();
    void Draw() const;

    int playerX = 0;
    int playerY = 0;

次に、Initialize()で初期位置を決めます。
画面サイズを直接書かず、screenWidthとscreenHeightから計算します。

cpp

bool Game::Initialize()
{
    playerX = screenWidth / 2;
    playerY = screenHeight - 60;
    return true;
}

プレイヤーを描画する

Draw()で、文字表示の代わりにプレイヤーの仮図形を描きます。
最初は画像ではなく、三角形で構いません。

cpp

void Game::Draw() const
{
    ClearDrawScreen();

    DrawTriangle(
        playerX,
        playerY - 18,
        playerX - 16,
        playerY + 14,
        playerX + 16,
        playerY + 14,
        cyan,
        TRUE
    );
}

この段階では、プレイヤーは動きません。
座標を変えると表示位置が変わることを確認します。

動作確認

ビルドして画面下部に三角形が表示されることを確認する
playerXの初期値を変えて、左右の表示位置が変わることを確認する
playerYの初期値を変えて、上下の表示位置が変わることを確認する
cyanをgreenやyellowへ変えて、色が変わることを確認する

よくある問題

何も表示されない場合は、Draw()がMainLoop()から呼ばれているか確認する
図形が画面外に出る場合は、playerXとplayerYの値を確認する
screenWidthが使えない場合は、Game.cppでCommon.hをインクルードしているか確認する

今回の完成条件

Gameクラスにプレイヤー座標を追加できる
Initialize()で初期位置を設定できる
Draw()でプレイヤーの仮図形を表示できる
Update()とDraw()の役割の違いを説明できる

まとめ

今回は、ゲームループ上にプレイヤーの仮表示を追加しました。
次回はキー入力を読み取り、プレイヤーを上下左右に動かします。

第02回 ゲームループと描画 ​

今回の授業内容 ​

今回の開始状態 ​

変更するファイル ​

ゲームループの役割 ​

プレイヤー座標を追加する ​

プレイヤーを描画する ​

動作確認 ​

よくある問題 ​

今回の完成条件 ​

まとめ ​