麒麟子Cocos Creator實用技巧七：方向與角度轉換

---

麒麟子做了一個Demo給大家，向大家演示了方向轉角度，角度轉方向的應用。

Demo中有兩個坦克，中間的坦克鎖定了另一個坦克，始終把自己的炮口對準它，並且會不停地發朝另一個坦克發射炮彈。 

發出來的炮彈會追蹤另一個坦克，直到追上另一個坦克纔會銷燬。

而另一個坦克也不閒着，它會繞着中間的坦克轉圈，並且他的移動方向永遠是圈的切線方向，且炮口總是保持和自己移動的方向一致。

在線演示：https://qilinzi.ukylin.net?lesson=07

---

一、在我們的的遊戲中，經常會有這樣的需求

1. 讓一個對象朝着他的方向移動
2. 讓一個對象朝向另一個對象

Cocos Creator 2.0以後，移除了所有的基於點的計算，統一成了cc.Vec2,cc.Vec3。 這一統一，麒麟子就熟悉多了，這就是3D引擎的味道。（注：麒麟子在做棋牌之前，一直做的是3D遊戲引擎方面的工作，對3D遊戲引擎相關的內容比較熟悉，2D遊戲引擎風格的API反而不是那麼熟），

由於目前還沒有涉及3D部分，我們今天只來看看cc.Vec2吧

官方在線文檔：https://docs.cocos.com/creator/api/zh/classes/Vec2.html

 

注意哦：cc.Vec2是類型， cc.v2是快捷創建一個cc.Vec2變量

var v = cc.v2(1,0) 等價於 var v = new cc.Vec2(1,0);

---

二、相互轉換

---

1、讓一個對象朝着他的方向移動

cc.Node節點的rotation是一個角度，因此，我們爲了實現這個目標，首先要根據rotation求出他的dir方向，就好辦了。示例代碼

update(dt){
    //由於Math函數接受的是孤度，所以我們先節節點的旋轉轉化爲弧度
    var angle = this.node.rotation / 180 * Math.PI;
    //合成基於 X正方向的方向向量
    var dir = cc.v2(Math.cos(angle),Math.sin(angle));
    //單位化向量
    dir.normalizeSelf();

    //根據方向向量移動位置
    var moveSpeed = 100;
    this.node.x += dt * dir.x * moveSpeed;
    this.node.y += dt * dir.y * moveSpeed;
}

 

2、讓一個對象朝向另一個對象

通過高中數學我們可以知道， A到B的向量 = B點 - A點。 那我們只需要將目標對象的位置 - 自己的位置，即可得到方向向量。

方向向量轉換爲角度，需要認清一個隱含變量，就是這個角度的基準是 X 軸正方向。 使用向量來表示就是 (1,0)。

cc.Vec2提供了兩個函數  cc.Vec2.angle和cc.Vec2.signAngle， 後者相比前者來說，後者產生的角度是有符號的，而前者會永遠爲正。 我們使用cc.Vec2.signAngle來將方向向量轉換爲弧度。 具體操作請看代碼。

function lookAtObj(target){
    //計算出朝向
    var dx = target.x - this.node.x;
    var dy = target.y - this.node.y;
    var dir = cc.v2(dx,dy);

    //根據朝向計算出夾角弧度
    var angle = dir.signAngle(cc.v2(1,0));

    //將弧度轉換爲歐拉角
    var degree = angle / Math.PI * 180;

    //賦值給節點
    this.node.rotation = degree;
}

---

本DEMO完整地址：https://gitee.com/qilinzi/qlz_ccc_tips   目錄  base/assets/07_rotationtodir

在線演示：https://qilinzi.ukylin.net?lesson=07