物體在二維空間中的移動

遊戲裡移動的原理很簡單，就是經圖從舊的地方刪除，重新畫在新的地方，只要速度夠快，看起來就會像是在移動。而
XNA 在每一次呼叫繪圖函數時都會有一行 GraphicsDevice.Clear　(Color.CornflowerBlue)；就是負責把畫面清空用的，所以我們只要改變圖的位置就可以了，話雖如此，但是不斷地改變位置對於需要不斷移動或是移動路徑複雜的物體，實在也很難知道下一次要出現在哪裡，所以必須用算的。於是乎，數學就重要啦！

相信大家在國中的時候就學過幾何數學了，當時或許覺得有趣，也可能認為不知所云！不過現在可能需要稍微回想一下了。在二維空間中物體的移動會有速度，而速度有方向性，在 xna 中可以用 Vector2 記錄，Vector2 支援許多向量的運算。

假設有一顆紅色的球往右上角移動，他的速度是 V，此速度可以分解成 x 和 y 的分量，分別是 Vx 以及 Vy，如下圖：



此時我們可以用 Vector2 中的 X 與 Y 來記錄 Vx 和 Vy。若我們要讓物體往定點移動，假設由 A 點到 B 點速率為 s（速率 s 是純量），速度可以由下面的算式得出：



而當物體在向著目的地移動時，BA向量與速度的內積會是正數（如下圖左上），當物體到達目的地時，BA向量與速度的內積會是零，當物體超過目的地時，BA向量與速度的內積會是負數，（如下圖右下）：



因此我們可以由此關係知道是否已經到達目的地，該停止移動了！

知道以上簡單的幾何數學後，就可以開始設計我們的程式了。首先設計一個飛機物件，他是我們的主角，程式碼如下：

public class Airplane{
private Vector2 _Origin;
private Vector2 _Velocity;
private Vector2 _Position;
private Vector2 _Destination;
private float _Speed;
private bool _IsArrive;

public Texture2D Image { get; private set; }

public Vector2 Origin {
get { return _Origin; }
}

//速度
public Vector2 Velocity {
get { return _Velocity; }
}

//目前位置
public Vector2 Position {
get { return _Position; }
}

//目標位置
public Vector2 Destination {
get { return _Destination; }
}

//速率
public float Speed {
get { return _Speed; }
set { _Speed = value; }
}

//是否已經到達
public bool IsArrive {
get { return _IsArrive; }
}

public Airplane(Texture2D image, Vector2 defaultPosition) {
Image = image;
_Origin = new Vector2(image.Width / 2, image.Height / 2);
_Velocity = Vector2.Zero;
_Position = defaultPosition;
_Destination = defaultPosition;
_IsArrive = true;
_Speed = 200;
}

/// <summary>
/// 計算前往目標位置所需要的速度
/// </summary>
/// <param name="destination">目標位置</param>
public void MoveTo(Vector2 destination) {
_Destination = destination;
Vector2 vector = Vector2.Subtract(destination, Position);
float length = vector.Length();
if (length == 0) {
_IsArrive = true;
} else {
float percent = _Speed / length;
_Velocity = Vector2.Multiply(vector, percent);
_Velocity /= 1000f;
_IsArrive = false;
}
}

public void Update(float time) {
if (_IsArrive == false) {
_Position += _Velocity * time;
if (Vector2.Dot(Vector2.Subtract(_Destination, _Position), _Velocity) <= 0) {
_IsArrive = true;
_Position = _Destination;
}
}
}

public void Draw(SpriteBatch sprite) {
sprite.Draw(Image, _Position, null, Color.White, 0, _Origin, 1, SpriteEffects.None, 0);
}
}

讓我稍微介紹一下 MoveTo 函式，此函式的參數是要到達的目標位置。在寫之前，應該先決定「單位」，一般生活中常用的速率單位是公尺每秒，但我想螢幕可以用公尺算的人應該不多！這裡我們就用像素每秒來當速率的單位！表示每一秒物體移動多少像素。因此 MoveTo 的內容就是一些簡單的幾何數數學了～先求出我與目標的向量，在乘以縮放比率，最後除以 1000 是因為我們輸入的速率是以秒為單位，但遊戲時間是以毫秒為單位，所以除以一千，這樣算出來的速度就是像素每毫秒。 Update 函式傳入毫秒，然後速度乘以時間就是距離，用來計算飛機下一個應該出現在哪裡。再來是利用向量內積來計算有沒有跑過頭，如果過頭了就表示已經到了，就要把飛機的位置設定成目標位置，如果不這樣做，飛機會因為速度太快而跑過頭，越快越明顯。Draw
函式就是讓飛機畫出自己。 在 Game 裡面加入 Airplane 物件，然後當使用者點畫面後，飛機就會移動到那個地方，關鍵程式碼如下：

Airplane Airplane;

protected override void Initialize() {
TouchPanel.EnabledGestures = GestureType.Tap;
base.Initialize();
}

protected override void Update(GameTime gameTime) {
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();

float time = (float)gameTime.ElapsedGameTime.TotalMilliseconds;

while (TouchPanel.IsGestureAvailable) {
var gs = TouchPanel.ReadGesture();
Airplane.MoveTo(gs.Position);
}

Airplane.Update(time);

base.Update(gameTime);
}

protected override void Draw(GameTime gameTime) {
GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code here
spriteBatch.Begin();
Airplane.Draw(spriteBatch);
spriteBatch.End();
base.Draw(gameTime);
}

_Position = defaultPosition;
_Destination = defaultPosition;
_IsArrive = true;
_Speed = 200;
}

/// <summary>
/// 計算前往目標位置所需要的速度
/// </summary>
/// <param name="destination">目標位置</param>
public void MoveTo(Vector2 destination) {
_Destination = destination;
Vector2 vector = Vector2.Subtract(destination, Position);
float length = vector.Length();
if (length == 0) {
_IsArrive = true;
} else {
float percent = _Speed / length;
_Velocity = Vector2.Multiply(vector, percent);
_Velocity /= 1000f;
_IsArrive = false;
}
}

public void Update(float time) {
if (_IsArrive == false) {
_Position += _Velocity * time;
if (Vector2.Dot(Vector2.Subtract(_Destination, _Position), _Velocity) <= 0) {
_IsArrive = true;
_Position = _Destination;
}
}
}

public void Draw(SpriteBatch sprite) {
sprite.Draw(Image, _Position, null, Color.White, 0, _Origin, 1, SpriteEffects.None, 0);
}
}

讓飛機隨著點選的位置移動，但是飛機卻不會轉頭，看起來怪怪的。接著就來試著讓它跟著轉向吧！程式裡的角度轉向和我們以前念的數學也有點差異，主要是起始位置不同，以前數學通常都是由 X 軸逆時針方向旋轉 (下圖左)，但是程式裡是 Y 軸順時針方向旋轉 (下圖右)，這點要特別注意。另外一個要注意的就是遊戲內的角度是弧度，介於 0 到 2π 之間。



要轉向，就要先知道角度，大家是不是又把高中數學還給老師了呢？讓我們複習一下。



用這公式就可以求出兩個向量的夾角。由於我們要計算 Y 軸和目前速度 (V) 的夾角，而Y軸向量是 (0,1)，其長度是 1，所以公式可以簡化如下



看一下程式碼：

public void Update(float time) {
if (_IsArrive == false) {
_Position += _Velocity * time;
_Rotation = (float)Math.Acos((double)(-_Velocity.Y / _Velocity.Length()));
if (_Velocity.X < 0) _Rotation = (float)MathHelper.TwoPi - _Rotation;
System.Diagnostics.Debug.WriteLine(string.Format("{0}:{1}", _Velocity.Y / _Velocity.Length(), _Rotation));
if (Vector2.Dot(Vector2.Subtract(_Destination, _Position), _Velocity) <= 0) {
_IsArrive = true;
_Position = _Destination;
}
}
}

/// </summary>
/// <param name="destination">目標位置</param>
public void MoveTo(Vector2 destination) {
_Destination = destination;
Vector2 vector = Vector2.Subtract(destination, Position);
float length = vector.Length();
if (length == 0) {
_IsArrive = true;
} else {
float percent = _Speed / length;
_Velocity = Vector2.Multiply(vector, percent);
_Velocity /= 1000f;
_IsArrive = false;
}
}

public void Update(float time) {
if (_IsArrive == false) {
_Position += _Velocity * time;
if (Vector2.Dot(Vector2.Subtract(_Destination, _Position), _Velocity) <= 0) {
_IsArrive = true;
_Position = _Destination;
}
}
}

public void Draw(SpriteBatch sprite) {
sprite.Draw(Image, _Position, null, Color.White, 0, _Origin, 1, SpriteEffects.None, 0);
}
}

其中重要的兩行需要稍微講解一下

VB

_Rotation = (float)Math.Acos((double)(-_Velocity.Y / _Velocity.Length()));

注意這裡是負的　_Velocity.Y，這跟坐標系有關，根據上面角度的算法是由　Y　軸順時針起算，這裡　Y　軸是往上為正的笛卡兒座標系，但是螢幕的　Y　軸卻是往下為正，因此當我們的速度是正的，在螢幕上是往下跑，轉換成笛卡兒座標系就必須加個負號。

再來是下面一行

VB

if (_Velocity.X < 0) _Rotation = (float)MathHelper.TwoPi - _Rotation;

當我們用Math.Acos計算出來的角度，會是最小夾角，也就是不論我們的方向是右上還是左上，如下圖，得到的角度都是πD4 (45度)，所以我們要分辨速度的X軸，如果是負的，就要用計算補角，也就是 2π-π/4=7π/4 (315度)



這樣計算的角度才會是我們要的，程式執行後，小飛機就會往我們點擊的地方跑，也會正常地轉頭了！