Aiming

提示中的注意事項

此範例基於以下網站上發佈的程式。 我稍微更改了代碼，以便更容易理解，並用日語解釋它。 基本上，我們使用原始代碼，因此，如果您確實希望將其用於遊戲程式，請及時修復它。

參考網站

• Samples & Demos - MonoGame
• CartBlanche / MonoGame-Samples

此外，我解釋的假設是，我有一些關於單遊戲和XNA的基本知識。 有關基本部分，請參閱單 遊戲提示 和 XNA 提示 。

特別是，要知道向量、三角函數和矩陣作為數學的必要程度。

環境

平臺

• Windows 10
• 代碼可以轉移到其他支援MonoGame的平臺上。

Visual Studio

• Visual Studio 2019

.NET Core

• 3.1

MonoGame

• 3.8

關於示例

燈光旋轉以跟蹤目標的方向。

用滑鼠或鍵移動貓時，

燈跟著貓。

操作方法

準備什麼

移動目標的圖像和要跟蹤的燈光的圖像。

程式

有關完整代碼，請參閱下載程式。

常數

/// <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 創建並載入紋理。

此外，此處設置貓圖像的中心位置和聚光燈的中心位置（旋轉軸）。 因為中心位置會根據圖像而變化 單獨設置。

更新方法

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);
}

漢德輸入方法處理玩家的操作，稍後將進行描述。 輸入確定貓的位置。 此外，Viewport 使用 來防止貓進入螢幕。

TurnToFace 方法旋轉聚光燈。 通過指定聚光燈的位置和貓的位置、當前燈光的角度和最大旋轉速度，現在確定幀的燈光方向。 稍後我們將討論該過程。

順便說一下，我沒有使用這個提示，但為了匹配遊戲速度，我需要使用遊戲時間變數。

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)
{
  // :
  // :
}

這是提示的主要操作。 確定角度的過程，使聚光燈朝向貓的方向。 將聚光燈位置、貓的位置、當前角度和最大旋轉速度作為參數傳遞。 返回值是最終旋轉位置。 不是當前位置的旋轉量。

// この図を参照してください。
// 
//      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);

如註釋中所述，使用三角法（倒三角函數）從位置計算角度。 如果你解釋數學的內容，它變成了一個提示，所以你應該知道，你應該使用弧切線在這裡。 要使用的方法是 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);

當系統詢問目標的角度時，請確定從當前位置旋轉到所需角度的角度。 在此，由於存在能夠旋轉為1幀最大速度， MathHelper.Clamp(difference, -turnSpeed, turnSpeed) 不超過最大值。

此外，我們使用 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* 以將其保持在上述範圍內。

繪製方法

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 計算，因此您一定知道這一點。