第02回 変数の利用と画像の表示
第01回では、四角形の描画座標を直接数値で指定しました。今回は、座標を変数に格納して管理し、その変数を用いて描画処理へ位置情報を渡す方法を学びます。
さらに、幾何学的な図形の代わりにキャラクター画像（青いロボット）を画面に表示します。ゲームプログラムにおける画像リソースのライフサイクルである「読み込み（初期化）」「毎フレームの描画（ループ）」「解放（終了処理）」の流れを把握し、安全に画像を扱えるようにします。
この回のゴール
左上寄りの座標に青いロボットを表示した画面
- 変数に格納した座標を用いて描画を行い、初期値を変更して表示位置を調整できる
- 画像リソースの「読み込み」「描画」「解放」の役割と順序を説明できる
- 画像が表示されない際に、「読み込みの失敗」と「画面外への描画」を切り分けて原因調査ができる
始める前に
関数の呼び出しと、上から順にコードが実行される流れを確認してください。変数は今回説明します。確認したい場合は、ウィンドウの作成と図形の描画を参照してください。
前の回の受講や完成物は必須ではありません。下の開始用プロジェクトを使い、配布済みの処理と今回追加する処理を確認してから進めます。
配布プロジェクト
第02回の開始用プロジェクトをダウンロードしてすべて展開し、展開先にある CppBasics.sln をVisual Studio 2026で開きます。
ウィンドウ上部のツールバーで、ビルド構成が Debug、プラットフォームが x64 に設定されていることを確認してください。ここには第01回終了時点のコードが含まれています。
編集するソースファイルは、引き続き Source/main.cpp です。第01回で作成した自身のプロジェクトをそのまま継続して使用しても構いません。
配布ファイル一覧
| ファイル | 役割 |
|---|---|
| Source/main.cpp | 今回の開始時点のコード |
| CppBasics.sln | プロジェクトをVisual Studioで開くためのファイル |
| Robot.png | 幅48・高さ48ピクセルの青いロボット画像 |
| Walker.png | 幅48・高さ48ピクセルのオレンジ色のロボット画像（第04回で使用） |
表のリンクから個別ファイルの内容を確認できますが、実習を行う際は必ず上記のZIPを一括展開して使用してください。
今回のポイント
四角形などの単純な図形は描画関数に座標を直接渡すだけで表示できましたが、画像を表示するには、あらかじめ画像ファイルをストレージからメモリへ読み込んでおく必要があります。
コンピュータ内部では、読み込んだ画像データを識別するために「画像ハンドル（識別番号）」という整数値を使用します。「座標を保持する変数」と「画像を識別するハンドル」という2つのデータを適切に管理しながら、画面上にキャラクターを描く手順を身につけましょう。