第01回 ウィンドウの作成と図形の描画
初回となる今回は、自身の手で書いたコードと画面に現れる表示が1対1に対応している感覚を掴むこと、エラーが発生した際の対処法に触れてミスを自力で修正する方法を学びます。
本実習の最終目標は、キーボード入力で操作するキャラクターと、自動で往復するキャラクターの2体を表示するプログラムを作成することです。
まずは初期状態の、何もしない最小限のプログラムから始め、
- ウィンドウの初期化
- 画面を更新し続けるメインループ
- 画面への四角形（矩形）描画処理
を順に追加していきます。
この回のゴール
明るい背景の指定座標に青い四角形を表示した画面
- ウィンドウの初期化、メインループ、終了処理という3つの基本構造を理解し実装する
- 画面座標系の向き（原点の位置と増加方向）を理解し、指定した位置と色で四角形を描画する
- ビルドエラーが発生した際に、エラー一覧から原因箇所を特定して修正する
始める前に
Visual Studioでソリューションを開き、ビルド・実行する操作を確認してください。C++の事前学習は不要です。確認したい場合は、環境の準備を参照してください。
前の回の受講や完成物は必須ではありません。下の開始用プロジェクトを使い、配布済みの処理と今回追加する処理を確認してから進めます。
配布プロジェクト
第01回の開始用プロジェクトをダウンロードしてすべて展開してください。
展開先にある CppBasics.sln をVisual Studio 2026で開き、ウィンドウ上部のツールバーで、ビルド構成が Debug、プラットフォームが x64 に設定されていることを確認してください。
開始時点のコードは、起動直後に何もせずに終了する最小限のものです。
これに各ステップの手順に沿って必要な処理を追加していきます。
編集するソースファイルは Source/main.cpp です。
配布ZIPには第02回以降で使用する画像素材も含まれていますが、今回はまず単純な図形の描画から着手します。
配布ファイル一覧
| ファイル | 役割 |
|---|---|
| Source/main.cpp | 今回の開始時点のコード |
| CppBasics.sln | プロジェクトをVisual Studioで開くためのファイル |
| Robot.png | 幅48・高さ48ピクセルの青いロボット画像 |
| Walker.png | 幅48・高さ48ピクセルのオレンジ色のロボット画像 |
表のリンクから個別ファイルの内容を確認できますが、実習を行う際は必ず上記のZIPを一括展開して使用してください。
今回のポイント
ゲームプログラムは、大きく
- 起動時に1度だけ行う「初期化」
- 毎フレーム繰り返す「ループ」
- ウィンドウを閉じた後に1度だけ行う「終了処理」
という3つのフェーズで構成されます。
これから追加する処理が「1度だけ実行するもの」なのか「毎フレーム繰り返し実行するもの」なのかを意識しながらコードを記述していきましょう。