Aiming
本 Tips の注意点
このサンプルは以下のサイトで公開されているプログラムをもとに解説しています。 分かりやすいように若干コードを変えたり日本語で説明しているようにしていますが、 基本的には元コードをそのまま使用しているので、実際にゲームプログラムに採用する場合は適時修正して使用してください。
また、MonoGame や XNA についてある程度基本知識を持っている前提で説明していますので 初歩的な部分については MonoGame Tips や XNA Tips を参照してください。
特に数学としてベクトルや三角関数、行列などは必須なのである程度どういうものかは知っておいてください。
環境
- プラットフォーム
-
- Windows 10
- コードを流用すれば MonoGame 対応の他のプラットフォームでも動作可
- Visual Studio
-
- Visual Studio 2019
- .NET Core
-
- 3.1
- MonoGame
-
- 3.8
サンプルについて
ターゲットのいる方向にライトが向くようにライトが回転して追跡を行います。
マウスやキーなどで猫を移動すると、
ライトが猫に追ってきます。
操作方法
| 操作内容 | キーボード | ゲームパッド(XInput) | マウス | タッチ |
|---|---|---|---|---|
| 猫の移動 | ↑↓←→ |
|
左ボタン | 任意の場所をタッチ |
| ゲームの終了 | Esc | Back | - | - |
準備するもの
ターゲットを動かす画像と追跡するライトの画像です。
プログラム
全コードはプログラムをダウンロードして参照してください。
定数
<summary>猫が動くスピード。これはフレームあたりのピクセル数です。</summary>
const float CatSpeed = 10.0f;
<summary>スポットライトが回転する速度。これはフレームあたりのラジアンで表されます。</summary>
const float SpotlightTurnSpeed = 0.025f;
猫の移動やライトの追跡は瞬時に行われるわけではなく、フレーム単位で移動、回転する形となっています。
ちなみに本サンプルではゲーム時間を使用していませんので、プラットフォームによっては実時間の動作とスピードは異なる可能性があります。 実際に作るゲームではゲーム時間を使うようにしてください。
フィールド
readonly GraphicsDeviceManager _graphics;
<summary>画像を表示するための SpriteBatch です。</summary>
SpriteBatch _spriteBatch;
<summary>スポットライトのテクスチャー(画像)です。</summary>
Texture2D _spotlightTexture;
<summary>スポットライトの位置です。</summary>
Vector2 _spotlightPosition = new Vector2();
<summary>スポットライトの中心位置です、ここを中心に回転します。</summary>
Vector2 _spotlightOrigin = new Vector2();
<summary>スポットライトが現在向いている角度。単位はラジアンです。値 0 は右を指します。</summary>
float _spotlightAngle = 0.0f;
<summary>猫のテクスチャー(画像)です。</summary>
Texture2D _catTexture;
<summary>猫の位置です。</summary>
Vector2 _catPosition = new Vector2();
<summary>猫の中心位置です。</summary>
Vector2 _catOrigin = new Vector2();
基本的にはスプライトを表示するための情報を持っているだけです。
重要なのは _spotlightAngle をターゲットに向くように自動計算させるところになります。
コンストラクタ
public AimingGame()
{
graphics = new GraphicsDeviceManager(this);
ontent.RootDirectory = "Content";
sMouseVisible = true;
graphics.PreferredBackBufferWidth = 320;
graphics.PreferredBackBufferHeight = 480;
// フルスクリーンにしたい場合はコメントを外してください。
//graphics.IsFullScreen = true;
}
モバイル向けに解像度が低くなっている以外に注意点はないです。
Initialize メソッド
protected override void Initialize()
{
base.Initialize();
// base.Initialize が完了すると、GraphicsDevice が作成され、ビューポートの大きさがわかります。
// スポットライトを画面の中央に配置する必要があるため、ビューポートを使用してそれがどこにあるかを計算します。
Viewport vp = _graphics.GraphicsDevice.Viewport;
_spotlightPosition.X = vp.X + vp.Width / 2;
_spotlightPosition.Y = vp.Y + vp.Height / 2;
// もう一度ビューポートサイズを使用して、今度は猫を画面に配置します。位置は x=1/4 y=1/2 です。
_catPosition.X = vp.X + vp.Width / 4;
_catPosition.Y = vp.Y + vp.Height / 2;
}
各画像の初期位置を決定しています。
注意点としては Viewport を使用するために base.Initialize() の後にコードを記述しているところです。
LoadContent メソッド
protected override void LoadContent()
{
// テクスチャをロードし、スプライトバッチを作成します。
_spotlightTexture = Content.Load<Texture2D>("spotlight");
_catTexture = Content.Load<Texture2D>("cat");
_spriteBatch = new SpriteBatch(_graphics.GraphicsDevice);
// テクスチャをロードしたので、それらを使用して、描画時に使用するいくつかの値を計算できます。
// スポットライトを描くときは、光源の周りを回転する必要があります。
// 今回用意した画像は左中央が光源なのでその位置を中心位置として設定します。
_spotlightOrigin.X = 0;
_spotlightOrigin.Y = _spotlightTexture.Height / 2;
// 猫の中心位置を決定します。とりあえず画像の真ん中とします。
_catOrigin.X = _catTexture.Width / 2;
_catOrigin.Y = _catTexture.Height / 2;
}
SpriteBatch の作成、テクスチャーの読み込みを行っています。
また、ここで猫画像の中心位置とスポットライトの中心位置(回転軸)を設定しています。画像によって中心位置は変わりますので 個別に設定しています。
Update メソッド
protected override void Update(GameTime gameTime)
{
HandleInput();
// 猫が画面外に出ないように制御します。
Viewport vp = _graphics.GraphicsDevice.Viewport;
_catPosition.X = MathHelper.Clamp(_catPosition.X, vp.X, vp.X + vp.Width);
_catPosition.Y = MathHelper.Clamp(_catPosition.Y, vp.Y, vp.Y + vp.Height);
// TurnToFace 関数を使用して、_spotlightAngle を更新して猫の方を向くようにします。
_spotlightAngle = TurnToFace(_spotlightPosition, _catPosition, _spotlightAngle, SpotlightTurnSpeed);
base.Update(gameTime);
}
HandleInput メソッドは後に説明するプレイヤーの操作処理を行っています。入力によって猫の位置を決定しています。
また、Viewport を使用して猫が画面がに出ないように処理しています。
TurnToFace メソッドはスポットライトの回転処理を行っています。スポットライトの位置と猫の位置、現在のライトの角度と最大回転速度を指定して今フレームのライトの向きを確定しています。
処理内容については後程説明します。
ちなみに本 Tips では使用していませんが、ゲームスピードに合わせるなら gameTime 変数を使う必要があります。
HandleInput メソッド
<summary>
入力を処理します。
</summary>
void HandleInput()
{
KeyboardState currentKeyboardState = Keyboard.GetState();
GamePadState currentGamePadState = GamePad.GetState(PlayerIndex.One);
MouseState currentMouseState = Mouse.GetState();
TouchCollection currentTouchState = TouchPanel.GetState();
// ゲーム終了操作を確認します。
if (currentKeyboardState.IsKeyDown(Keys.Escape) ||
currentGamePadState.Buttons.Back == ButtonState.Pressed)
{
Exit();
}
// ユーザーが猫を動かしたいかどうかを確認します。 catMovement というベクトルを作成します。
// これは、すべてのユーザーの入力の合計を格納します。
Vector2 catMovement = currentGamePadState.ThumbSticks.Left;
// y を反転：スティックでは、下は -1 ですが、画面では、下がプラスです。
catMovement.Y *= -1;
if (currentKeyboardState.IsKeyDown(Keys.Left) ||
currentGamePadState.DPad.Left == ButtonState.Pressed)
{
catMovement.X -= 1.0f;
}
if (currentKeyboardState.IsKeyDown(Keys.Right) ||
currentGamePadState.DPad.Right == ButtonState.Pressed)
{
catMovement.X += 1.0f;
}
if (currentKeyboardState.IsKeyDown(Keys.Up) ||
currentGamePadState.DPad.Up == ButtonState.Pressed)
{
catMovement.Y -= 1.0f;
}
if (currentKeyboardState.IsKeyDown(Keys.Down) ||
currentGamePadState.DPad.Down == ButtonState.Pressed)
{
catMovement.Y += 1.0f;
}
// タッチポイントに向かって移動します。
// CatSpeed からタッチポイントまでの距離内に入ると、猫の速度を落とします。
float smoothStop = 1;
//if (currentTouchState != null )
{
if (currentTouchState.Count > 0)
{
Vector2 touchPosition = currentTouchState[0].Position;
if (touchPosition != _catPosition)
{
catMovement = touchPosition - _catPosition;
float delta = CatSpeed - MathHelper.Clamp(catMovement.Length(), 0, CatSpeed);
smoothStop = 1 - delta / CatSpeed;
}
}
}
Vector2 mousePosition = new Vector2(currentMouseState.X, currentMouseState.Y);
if (currentMouseState.LeftButton == ButtonState.Pressed && mousePosition != _catPosition)
{
catMovement = mousePosition - _catPosition;
float delta = CatSpeed - MathHelper.Clamp(catMovement.Length(), 0, CatSpeed);
smoothStop = 1 - delta / CatSpeed;
}
// ユーザーの入力を正規化して、猫が CatSpeed より速く進むことができないようにします。
if (catMovement != Vector2.Zero)
{
catMovement.Normalize();
}
_catPosition += catMovement * CatSpeed * smoothStop;
}
プレイヤーの入力処理です。ここで行っているのは 猫の移動 と ゲームの終了 操作です。
入力デバイスは キーボード, ゲームパッド, マウス, タッチ と一通り対応しています。
基本的には方向キーで移動、またはタッチ、クリックした位置に猫を向かわせる処理を行っているだけなのであまり詳しい説明ましません。 細かい制御点としては、
- スティックは上方向がプラスなのに対し、画面位置は下方向がプラスなので反転させている
- マウスやタッチで猫が目的の位置に達した後にポイントを超えて移動しない
- 移動方向を決定したら正規化して単位ベクトル(方向のみ)にして、最後に移動スピードをかけ合わせる
となります。
TurnToFace メソッド
<summary>
オブジェクトの位置、ターゲットの位置、現在の角度、および最大回転速度を指定して、
オブジェクトが直面する必要のある角度を計算します。
</summary>
<param name="position">オブジェクトの位置。ここではスポットライトの位置。</param>
<param name="faceThis">ターゲットの位置。ここでは猫の位置。</param>
<param name="currentAngle">現在の角度。</param>
<param name="turnSpeed">最大回転速度。</param>
<returns>決定された角度。</returns>
private static float TurnToFace(Vector2 position, Vector2 faceThis, float currentAngle, float turnSpeed)
{
// :
// :
}
今回の Tips のメインとなる処理です。スポットライトが猫の方向を向くように角度を決定する処理です。 引数としてスポットライトの位置, 猫の位置, 現在の角度, 最大回転速度を渡します。 戻り値は最終的な回転位置です。現在位置からの回転量ではありません。
// この図を参照してください。
//
// C
// /|
// / |
// / | y
// / o |
// S----
// x
//
// ここで、S はスポットライトの位置、C は猫の位置、o は猫を指すためにスポットライトが向いている角度です。
// o の値を知る必要があります。
// これには三角法を使用して算出します。
//
// tan(theta) = 高さ / 底辺
// tan(o) = y / x
//
// この方程式の両辺のアークタンジェントを取ると
//
// arctan( tan(o) ) = arctan( y / x )
// o = arctan( y / x )
//
// したがって、x と y を使用して、「desiredAngle」である o を見つけることができます。
// x と y は、2つのオブジェクト間の位置の違いにすぎません。
float x = faceThis.X - position.X;
float y = faceThis.Y - position.Y;
// Atan2 関数を使用します。Atanは、y / x のアークタンジェントを計算し、x と y の符号を使用して、
// 結果を入れるデカルト象限を決定するという追加の利点があります。
// https://docs.microsoft.com/dotnet/api/system.math.atan2
float desiredAngle = (float)Math.Atan2(y, x);
コメントにも記載しているとおり、位置から角度を計算するには三角法(逆三角関数)を使用します。
数学の中身まで説明するとそれで一つの Tips になってしまいますので、ここではアークタンジェントを使用すればよいと知ってもらえればよいです。
使用するメソッドは Math.Atan2 です。Math.Atan ではないことに注意してさい。
戻り値は以下の図を参照してください。+x の方向を 0 として -π から +π の値を返します。 +y 方向がプラスの結果を返しますが、ウィンドウ座標では下が +y 方向になることに注意してください。
// これで猫を向くために必要な設定角度がわかりました。turnSpeed (回転スピード) に制約されていなければ簡単です。
// desiredAngle を返すだけです。
// 代わりに回転量を計算し、それが turnSpeed を超えないようにする必要があります。
// まず、WrapAngle を使用して、-Pi から Pi（-180度から180度）の結果を取得し、
// どれだけ回転させたいかを判断します。
// これは猫の方向に向くのに必要な回転角度です。
float difference = WrapAngle(desiredAngle - currentAngle);
// -turnSpeed と turnSpeed の間にクランプします。
// 要は１フレームの回転角度上限を超えないようにします。
difference = MathHelper.Clamp(difference, -turnSpeed, turnSpeed);
// したがって、ターゲットに最も近いのは currentAngle + difference です。
// もう一度 WrapAngle を使用して、それを返します。
return WrapAngle(currentAngle + difference);
ターゲットを向くための角度が求められたら、後は現在位置から目的の角度まで回転するまでの角度を決定します。
ここでは１フレームに回転できる最大速度があるため、
MathHelper.Clamp(difference, -turnSpeed, turnSpeed) で最大値を超えないようにしています。
また、単純にプラスマイナスだけで計算すると +π と -π の範囲を超えて逆方向に回転してしまったりするので WrapAngle メソッドで調整しています。 このメソッドについては次項で説明します。
最終的に回転先の角度が決定したら return します。
WrapAngle メソッド
<summary>
-Pi と Pi の間のラジアンで表される角度を返します。
例えば degree で -200°なら +360°して 160°とします。反対側も同様です。
</summary>
private static float WrapAngle(float radians)
{
while (radians < -MathHelper.Pi)
{
radians += MathHelper.TwoPi;
}
while (radians > MathHelper.Pi)
{
radians -= MathHelper.TwoPi;
}
return radians;
}
角度が -π～+π の範囲を超えると本来回転すべき方向と逆方向に回転してしまったりするので、 この範囲を超えた場合は 2π を加算、または減算させて上記の範囲に抑えるようにします。
Draw メソッド
protected override void Draw(GameTime gameTime)
{
GraphicsDevice device = _graphics.GraphicsDevice;
device.Clear(Color.Black);
// 猫を描画します。
_spriteBatch.Begin();
_spriteBatch.Draw(_catTexture, _catPosition, null, Color.White, 0.0f, _catOrigin, 1.0f, SpriteEffects.None, 0.0f);
_spriteBatch.End();
// 加算合成でスプライトバッチを開始し、スポットライトを当てます。 加算合成は、ライトや火などの効果に非常に適しています。
_spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.Additive);
_spriteBatch.Draw(_spotlightTexture, _spotlightPosition, null, Color.White, _spotlightAngle, _spotlightOrigin, 1.0f, SpriteEffects.None, 0.0f);
_spriteBatch.End();
base.Draw(gameTime);
}
位置や回転を計算したら、あとはその数値に沿ってスプライトを描画するだけです。 猫にライトが当たっているように表現するために、スポットライト描画時は加算合成を行っています。
まとめ
ゲームにおいて相手がどの方向にいるかを判断するという場面は比較的多いのでこの手法について知っておくことは非常に重要だと思います。 この方法は 2D ゲームでよく使われ、3D ゲームではクォータニオンを使って計算することが可能です。 ですが 3D でも 2D の計算を使うことは多々あるので、知っておいて損はないはずです。