第03回 キャラクターの移動操作
第02回では、青いロボットの画像を固定の座標に表示しました。今回は、メインループが1周するたびに座標変数の値を少しずつ更新し、パラパラ漫画の原理でキャラクターを滑らかに動かす手法を学びます。
まずはキー入力なしで自動的に右方向へ進む処理を作成し、続いてキーボードの矢印キー（方向キー）の押下状態を判定して、押されている方向へ自由に動かせるようにします。最後に、キャラクターが画面外へ消えてしまわないよう、四方の画面端で移動を止める境界処理（クランプ処理）を実装します。
この回のゴール
矢印キーで操作する青いロボットの初期画面
- 毎フレーム座標変数に一定値を加算することで、連続した移動アニメーションが成立する仕組みを説明できる
CheckHitKey関数を用いてキー入力を判定し、キーが押されているときだけ座標を更新できる- 画像サイズを考慮した境界判定を行い、キャラクターが画面外へはみ出さないよう移動を制限できる
始める前に
変数の値を変更し、その値を描画位置に使う方法を確認してください。繰り返しと条件分岐は今回説明します。確認したい場合は、変数の利用を参照してください。
前の回の受講や完成物は必須ではありません。下の開始用プロジェクトを使い、配布済みの処理と今回追加する処理を確認してから進めます。
配布プロジェクト
第03回の開始用プロジェクトをダウンロードしてすべて展開し、展開先にある CppBasics.sln をVisual Studio 2026で開きます。
ウィンドウ上部のツールバーで、ビルド構成が Debug、プラットフォームが x64 に設定されていることを確認してください。ここには第02回終了時点（ロボットの表示とエラー処理が実装された状態）のコードが含まれています。
編集するソースファイルは、引き続き Source/main.cpp です。第02回で作成した自身のプロジェクトを継続して使用しても構いません。
配布ファイル一覧
| ファイル | 役割 |
|---|---|
| Source/main.cpp | 今回の開始時点のコード |
| CppBasics.sln | プロジェクトをVisual Studioで開くためのファイル |
| Robot.png | 幅48・高さ48ピクセルの青いロボット画像 |
| Walker.png | 幅48・高さ48ピクセルのオレンジ色のロボット画像（第04回で使用） |
表のリンクから個別ファイルの内容を確認できますが、実習を行う際は必ず上記のZIPを一括展開して使用してください。
今回のポイント
ゲームにおけるキャラクターの移動は、「前フレームの座標に移動量を加算して新しい座標を求める」という計算を毎秒約60回繰り返すことで実現します。
さらに、if 文とキー入力判定関数を組み合わせることで、「キーが押されている間だけ座標を加減算する」というユーザー操作への応答が可能になります。第02回で算出した画面内収容座標（x: 0〜592、y: 0〜432）を活用し、安全で直感的な操作感を作り上げましょう。