Célzás

Megjegyzések ehhez a tippekhez

Ez a minta a következő webhelyeken közzétett programokon alapul. Egy kicsit megváltoztatom a kódot, hogy könnyebben érthető és megmagyarázható legyen japánul. Alapvetően az eredeti kódot úgy használjuk, ahogy van, tehát ha valóban elfogadja a játékprogramjában, javítsa ki időben, és használja.

Hivatkozási hely

• Minták és bemutatók - MonoGame
• CartBlanche / MonoGame-minták

Ezenkívül azzal a feltételezéssel magyarázható, hogy van néhány alapvető ismerete a MonoGame-ről és az XNA-ról. Lásd MonoGame tippek és XNA tippek a ruddly.

Különösen, mivel a matematika, a vektorok, a trigonometrikus függvények, a mátrixok stb. elengedhetetlenek, ezért kérjük, bizonyos mértékig tudják, mik azok.

környezet

peron

• Windows 10
• A kód más MonoGame-kompatibilis platformokon is használható

Visual Studio

• Visual Studio 2019

.NET mag

• 3.1

MonoGame

• 3.8

Néhány szó a mintákról

A fény forog, hogy nyomon kövesse a fényt a cél irányába.

Ha a macskát egérrel vagy kulccsal mozgatja,

A fény követi a macskát.

Hogyan kell működtetni

Mit kell készíteni

Képek, amelyek mozgatják a célt és a lámpákat a nyomon követéshez.

program

Töltse le a programot az összes kódhoz.

konstans

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

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

A macska mozgása és a fénykövetés nem azonnali, hanem keretről képkockára mozgatható és elforgatható.

Egyébként, mivel a játékidőt nem használják ebben a mintában, a tényleges időművelet és a sebesség a platformtól függően eltérő lehet. Próbálja meg használni a játékidőt a tényleges játékban, amit csinál.

mező

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

Alapvetően csak az információ, hogy megjelenítse a sprite. A lényeg az, _spotlightAngle hogy automatikusan kiszámítsuk, hogy a célpontra mutassunk.

Konstruktor

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

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

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

Nincs mit szem előtt tartani, kivéve az alacsonyabb felbontást a mobil számára.

Metódus inicializálása

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

Meghatározza az egyes képek kezdeti helyzetét. Ne feledje, hogy a Viewport használat után base.Initialize() kódot ír.

LoadContent metódus

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 Textúrákat készítek és töltök be.

Ezenkívül itt van beállítva a macskakép középső helyzete és a reflektorfény középső helyzete (forgástengelye). Mivel a középső pozíció a képtől függően változik Egyedileg van beállítva.

Frissítési módszer

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

A HandleInput metódus kezeli a játékos műveleteit, amelyeket később tárgyalunk. A macska helyzetét a bemenet határozza meg. Arra isViewport használjuk, hogy megakadályozzuk, hogy a macska megjelenjen a képernyőn.

TurnToFace A módszer elforgatja a reflektorfényt. A reflektorfény helyzetét és a macska helyzetét, a fény aktuális szögét és a maximális forgási sebességet most úgy határozzuk meg, hogy meghatározzák a fény tájolását a keretben. Majd később megbeszéljük, miről is van szó.

By the way, én nem használom ebben a tippekben, de meg kell használni a gameTime változót, hogy megfeleljen a játék sebességének.

HandleInput metódus

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

A játékos bemeneti folyamata. Amit itt csinálunk, az a macska mozgása és a játék vége .

A beviteli eszközök számos területen támogatottak: Billentyűzet, Gamepad, Egér, Érintés .

Alapvetően csak egy irányított kulccsal mozgok, megérintem, vagy a macskát arra a pozícióra irányítom, amelyre kattintottam, így nem fogok túl sok részletbe belemenni. Részletes ellenőrzési pontként,

• A bot megfordul, mert a felfelé irányuló irány pozitív, míg a képernyő pozíciója pozitív lefelé irányuló irányban.
• Ne lépjen túl a pontokon, miután a macska elérte a kívánt pozíciót az egérrel, vagy érintse meg
• Miután meghatározta az utazási irányt, normalizálja azt, hogy egységvektor legyen (csak irány), és végül szorozza meg a mozgási sebességet.

Ez jön.

TurnToFace metódus

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

Ez a tippek fő folyamata. A szög meghatározásának folyamata, hogy a reflektorfény a macskára nézzen. Adja át a reflektorfény helyzetét, a macska helyzetét, az aktuális szöget, a maximális forgási sebességet argumentumként. A visszatérési érték a végső forgatási pozíció. Ez nem az aktuális pozícióból származó forgás mennyisége.

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

Amint azt a megjegyzésekben említettük, trigonometrikus (inverz trigonometrikus függvényeket) használnak a pozíciók szögeinek kiszámítására. Ha elmagyarázza a matematika tartalmát, akkor ez egy tipp lesz, ezért tudnia kell, hogy itt az arktangentet kell használnia. Az alkalmazott módszer a Math.Atan2 következő: . Math.Atan Ne feledje, hogy nem az.

A visszatérési értéket lásd az alábbi ábrán. -π értéket ad eredményül +π értékre+ x 0-ként. Ne feledje, hogy a +y irány pozitív eredményt ad vissza, de az ablakkoordinátáknál az alsó a +y irány.

// これで猫を向くために必要な設定角度がわかりました。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);

Miután van egy szöge a célponthoz, a többit meghatározzák az aktuális pozíciótól a kívánt szögig. Itt van a maximális sebesség, amely egy keretben elforgatható, MathHelper.Clamp(difference, -turnSpeed, turnSpeed) nem haladja meg a maximális értéket.

Továbbá, ha egyszerűen plusz vagy mínusz alapján számítjuk ki, akkor visszafelé forog a +π és -π tartományon túl, ezért a WrapAngle módszerrel állítom be. Ezt a módszert a következő szakaszban ismertetjük.

Végül, amikor meghatározzák azt a szöget, amelyre elfordítják, térjen vissza.

WrapAngle metódus

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

Ha a szög meghaladja a -π és +π közötti tartományt, akkor az elforgatandó irányban ellentétes irányban foroghat, Ha túllépi ezt a tartományt, adjon hozzá vagy vonjon ki 2π-t, hogy a fenti tartományon belül maradjon.

Rajzolási módszer

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

Miután kiszámította a pozíciót és a forgatást, csak annyit kell tennie, hogy felhívja a sprite-ot a szám mentén. Annak érdekében, hogy a macskát úgy fejezzük ki, mintha a fényt eltalálnák, additív szintézist végeznek a reflektorfény rajzolásakor.

Összefoglalás

Azt hiszem, nagyon fontos tudni erről a technikáról, mert viszonylag sok olyan helyzet van a játékban, amikor eldöntheti, hogy az ellenfél melyik irányba van. Ezt a módszert általában 2D-s játékokban használják, és a 3D-s játékokban kvaternerekkel számítható ki. De sok dolog van, ami 2D számításokat használ 3D-ben, így biztonságos tudni.