Appearance
第14回 調整できるプレイヤー表示と操作
第14回では、第13回で作成したプレイヤーキャラクターの機能を拡張します。
プレイヤーの位置を中心座標(position)として管理し、画像の表示範囲(DrawRect)と接触判定に用いる矩形(Hitbox)を明確に分離します。さらに、左右キー入力に応じた移動処理と画面端での移動制限、および当たり判定のデバッグ表示機能を実装します。
配布プロジェクト
第14回の開始用プロジェクトを展開し、PlatformerGame2D.sln を Visual Studio 2026 で開いてください。
第13回の完成状態(背景描画、ゲームループ、プレイヤー表示)と同等のプロジェクトから開始します。
配布ファイル一覧
| ファイル | 役割 |
|---|---|
Source/Platformer/Player.h / Player.cpp | プレイヤーの位置管理、入力更新、描画処理 |
Source/Platformer/Input.h / Input.cpp | 左右キーやデバッグキーの入力状態管理 |
Source/Platformer/Game.cpp | ゲームループ内でのプレイヤー更新とデバッグ描画 |
この回のゴール
プレイヤーを左右キーで滑らかに動かし、画面端で正しく停止させます。また、F1キーで表示矩形と命中矩形を画面上に可視化し、それぞれの役割の違いを確認できるようにします。
今回のポイント
3つの大きさを分離する設計
アクションゲームの開発では、「元画像の解像度」「画面上の表示サイズ」「当たり判定の大きさ」を独立して管理することが重要です。
| 区分 | 役割 | 設定場所 |
|---|---|---|
| 元画像サイズ | スプライトシートのピクセル寸法 | 画像ファイル |
表示矩形(DrawRect) | 画面上で表示する位置と大きさ | GameTuning.h |
命中矩形(Hitbox) | 地形や敵との接触に使う範囲 | GameTuning.h |
元画像ファイル
素材解像度から画面上の表示サイズ(DrawRect)へマッピング
表示矩形
表示矩形
見た目の内側に当たり判定(Hitbox)を独立して設定
命中矩形
画像の幅をそのまま当たり判定に使うと、キャラクターの透明な余白や装飾に触れただけで接触と判定され、見た目と操作結果にズレが生じます。GameTuning.h で表示と判定を別々の矩形として定義し、中心座標を基準にオフセットさせる構造を作ります。
作業の準備
開始用ZIPには前回までの到達状態が含まれています。今回の新規ファイルは、本文を進めながら追加します。ファイルの登録方法や変更の引き継ぎ手順は、配布ファイルの手順で確認できます。
| 作業 | 対象 |
|---|---|
| 新規作成 | Source/Platformer/Tuning/GameTuning.h |
| 既存ファイルへ追記・編集 | Source/Platformer/Game.cpp、Source/Platformer/Game.h、Source/Platformer/Player.cpp、Source/Platformer/Player.h |
| 重点的に実装・確認する処理 | Player::Update、Player::GetHitbox |
ヘッダーの宣言、#include、登録テーブル、エラー処理などは、最終ステップの参考実装を参照できます。重点関数は各ステップで処理の流れを確認しながら記述します。関数を変更する際は、宣言・定義・呼び出し元の整合性を保ちます。
GameTuning.h には今回必要な定数を追記し、自身で調整した既存の値を維持します。
授業の進め方
1 / 4座標型と中心基準の矩形計算2次元座標を表す
Vector2 と矩形領域を表す Rect を用い、キャラクターの中心点を基準とした表示矩形および当たり判定矩形の算出方法を理解します。2 / 4表示矩形と当たり判定の分離プレイヤー画像の表示領域(DrawRect)と接触判定に用いる命中領域(Hitbox)を独立した調整値として定義し、素材寸法に依存しない柔軟な設計を実現します。3 / 4左右入力による移動と画面端での境界制限入力抽象化クラス Input から左右キーの状態を取得し、同時押しの相殺と画面端での境界制限を組み込んだ移動処理を実装します。4 / 4デバッグ表示による矩形の可視化と動作確認F1 キーによるデバッグ表示切り替え機能を実装し、画面上のグラフィック、表示矩形、および命中矩形の関係を視覚的に検証します。動作確認
- 左右キーの入力に応じてプレイヤーが滑らかに移動する
- 画面外へプレイヤーがはみ出さず、端で停止する
- 表示矩形と命中矩形を独立してサイズ調整できる
- F1キーで当たり判定のデバッグ枠が表示・非表示できる