物體在二維空間中的移動

最新推荐文章于 2022-12-04 12:32:30 发布

LarrySai

最新推荐文章于 2022-12-04 12:32:30 发布

阅读量1.4k

点赞数

分类专栏： XNA游戏开发文章标签： XNA

XNA游戏开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

遊戲裡移動的原理很簡單，就是經圖從舊的地方刪除，重新畫在新的地方，只要速度夠快，看起來就會像是在移動。而 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);
    }
}
 
   

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

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

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

再來是下面一行

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

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

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

LarrySai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
物體在二維空間中的移動

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

扫一扫