Прицеливание

Примечания к этим советам

Этот пример основан на программах, опубликованных на следующих сайтах. Я немного изменяю код, чтобы было легче понять и объяснить его на японском языке. В принципе, мы используем исходный код как есть, поэтому, если вы действительно принимаете его в свою игровую программу, своевременно исправьте его и используйте.

Справочный сайт

• Примеры и демонстрации - MonoGame
• КартБланш / МоноИгры-Сэмплы

Кроме того, это объясняется предположением, что у вас есть некоторые базовые знания о MonoGame и XNA. Смотрите Советы по MonoGame и XNA для мелочей.

В частности, поскольку математика, векторы, тригонометрические функции, матрицы и т. Д. Являются важными, поэтому, пожалуйста, знайте, что это такое в некоторой степени.

окружающая среда

платформа

• Окна 10
• Код можно использовать на других платформах с поддержкой MonoGame

Visual Studio

• Visual Studio 2019

.NET Core

• 3.1

МоноИгра

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

Нет ничего, что нужно иметь в виду, кроме более низких разрешений для мобильных устройств.

Метод инициализации

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

Метод HandleInput обрабатывает операции игрока, которые будут рассмотрены позже. Положение кошки определяется входом. Мы такжеViewport используем, чтобы предотвратить появление кошки на экране.

TurnToFace Метод поворачивает прожектор. Положение прожектора и положение кошки, угол течения света и максимальная скорость вращения теперь определяются для определения ориентации света в кадре. О чем мы поговорим позже.

Кстати, я не использую его в этих советах, но вам нужно использовать переменную 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)
{
  // :
  // :
}

Это основной процесс для подсказок. Процесс определения угла так, чтобы прожектор был обращен к кошке. В качестве аргументов передайте положение прожектора, положение кошки, текущий угол, максимальную скорость вращения. Возвращаемое значение является конечной позицией поворота. Это не величина ротации с текущего положения.

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

После того, как у вас есть угол для наведения цели, в остальном определяется угол от текущего положения до нужного угла. Здесь мы имеем максимальную скорость, которую можно поворачивать за один кадр, MathHelper.Clamp(difference, -turnSpeed, turnSpeed) не превышает максимального значения.

Кроме того, если вычисляется просто по плюсу или минусу, он поворачивается назад за пределы диапазона +π и -π, поэтому я корректирую его с помощью метода WrapAngle. Этот метод описан в следующем разделе.

Наконец, когда определен угол, на который он поворачивается, вернитесь.

Метод 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-играх. Но есть много вещей, которые используют 2D-вычисления в 3D, поэтому это безопасно знать.