Apontando

Notas sobre estas Dicas

Esta amostra é baseada nos programas publicados nos seguintes sites. Eu mudo um pouco o código para facilitar a compreensão e explicação em japonês. Basicamente, usamos o código original como está, então se você realmente adotá-lo em seu programa de jogo, corrigi-lo em tempo hábil e usá-lo.

Site de referência

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

Além disso, explica-se no pressuposto de que você tem algum conhecimento básico sobre MonoGame e XNA. Veja dicas de MonoGame e XNA Dicas para o ruddly.

Em particular, como matemática, vetores, funções trigonométricas, matrizes, etc. são essenciais, então saiba o que são até certo ponto.

ambiente

plataforma

• Windows 10
• O código pode ser usado em outras plataformas habilitadas para MonoGame

Estúdio Visual

• Visual Studio 2019

.NET Core

• 3.1

MonoGame

• 3.8

Sobre amostras

A luz gira para rastrear a luz na direção do alvo.

Se você mover o gato com um rato ou chave,

A luz segue o gato.

Como operar

O que preparar

Imagens que movem o alvo e as luzes para rastrear.

programa

Baixe o programa para obter todo o código.

constante

/// <summary>猫が動くスピード。これはフレームあたりのピクセル数です。</summary>
const float CatSpeed = 10.0f;

/// <summary>スポットライトが回転する速度。これはフレームあたりのラジアンで表されます。</summary>
const float SpotlightTurnSpeed = 0.025f;

O movimento do gato e o rastreamento da luz não são instantâneos, mas movem e giram quadro a quadro.

A propósito, como o tempo do jogo não é usado nesta amostra, a operação e velocidade de tempo real pode ser diferente dependendo da plataforma. Tente usar o tempo de jogo no jogo real que você faz.

campo

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

Basicamente, você só tem a informação para exibir o sprite. O importante é _spotlightAngle ter que calcular automaticamente para apontar para o alvo.

construtor

public AimingGame()
{
  graphics = new GraphicsDeviceManager(this);
  ontent.RootDirectory = "Content";
  sMouseVisible = true;

  graphics.PreferredBackBufferWidth = 320;
  graphics.PreferredBackBufferHeight = 480;

  // フルスクリーンにしたい場合はコメントを外してください。
  //graphics.IsFullScreen = true;
}

Não há nada a ter em mente além de resoluções mais baixas para celular.

Método de inicialização

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

Determina a posição inicial de cada imagem. Observe que você está Viewport escrevendo código depois de usar base.Initialize() .

Método 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 Estou criando e carregando texturas.

Além disso, a posição central da imagem do gato e a posição central (eixo de rotação) dos holofotes são definidas aqui. Porque a posição central muda dependendo da imagem É definido individualmente.

Método de atualização

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

O método HandleInput lida com as operações do jogador, que serão discutidas mais tarde. A posição do gato é determinada pela entrada. Viewport Também usamos para evitar que o gato apareça na tela.

TurnToFace O método gira os holofotes. A posição dos holofotes e a posição do gato, o ângulo atual da luz e a velocidade máxima de rotação estão agora determinados para determinar a orientação da luz na moldura. Falaremos sobre o que estamos falando mais tarde.

A propósito, eu não estou usando nestas Dicas, mas você precisa usar a variável gameTime para corresponder à velocidade do jogo.

Método 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;
}

O processo de entrada do jogador. O que estamos fazendo aqui é o movimento do gato e o fim da operação do jogo .

Os dispositivos de entrada são suportados em uma variedade de campos: Teclado, Gamepad, Mouse, Toque .

Basicamente, eu estou apenas movendo-se com uma chave direcional, tocá-la, ou apontando o gato para a posição que eu cliquei, então eu não vou entrar em muitos detalhes. Como um ponto de controle detalhado,

• A vara é invertida porque a direção para cima é positiva, enquanto a posição da tela é positiva na direção descendente.
• Não se mova além dos pontos depois que o gato alcançar sua posição desejada com o mouse ou toque
• Depois de determinar a direção da viagem, normalize-a para torná-la um vetor unitário (somente direção) e, finalmente, multiplique a velocidade de movimento.

Vem para.

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

Este é o principal processo para dicas. O processo de determinar o ângulo para que os holofotes enfrentem o gato. Posição de destaque de passe, posição do gato, ângulo atual, velocidade de rotação máxima como argumentos. O valor de retorno é a posição de rotação final. Não é a quantidade de rotação da posição atual.

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

Como mencionado nos comentários, trigonométrico (funções trigonométricas inversas) é usado para calcular ângulos a partir de posições. Se você explicar o conteúdo da matemática, será uma dica, então você deve saber que você deve usar arctangent aqui. O método utilizado é Math.Atan2 . Math.Atan note que não é.

Consulte o valor a seguir para o valor de retorno. Retorna um valor de -π para +π com a direção de +x como 0. Observe que a direção +y retorna um resultado positivo, mas na janela coordena a parte inferior é a direção +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);

Uma vez que você tem um ângulo para apontar o alvo, o resto é determinado o ângulo da posição atual para o ângulo desejado. Aqui temos a velocidade máxima que pode ser girada em um quadro, MathHelper.Clamp(difference, -turnSpeed, turnSpeed) não excede o valor máximo.

Além disso, se calculado simplesmente por mais ou menos, ele gira para trás além do alcance de +π e -π, então eu ajustá-lo com o método WrapAngle. Este método é descrito na próxima seção.

Finalmente, quando o ângulo para o qual é girado é determinado, retorne.

Método 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;
}

Se o ângulo exceder a faixa de -π para +π, ele pode girar na direção oposta à direção que deve ser girada, Se este intervalo for excedido, adicione ou subtraia 2π para mantê-lo dentro da faixa acima.

Método de desenho

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

Uma vez calculado a posição e a rotação, tudo o que você tem que fazer é desenhar o sprite ao longo desse número. A fim de expressar o gato como se a luz fosse atingida, a síntese aditiva é realizada ao desenhar os holofotes.

Resumo

Eu acho que é muito importante saber sobre essa técnica porque há relativamente muitas situações no jogo onde você decide em que lado seu oponente está. Este método é comumente usado em jogos 2D, e pode ser calculado usando quaternions em jogos 3D. Mas há muitas coisas que usam cálculos 2D em 3D, por isso é seguro saber.