新手入門,練手貪吃蛇項目,首先是解決蛇頭對應方向角度移動的問題。
先設置一個蛇頭的初始角度假設是90度,正確的蛇頭移動方向應該是向上移動
// 設置蛇頭為90度
this.head.angle = 90
接下來是解決向量計算的問題,因為Math.cos/Math.sin方法需要傳入的值為弧度,所以首先我們要根據蛇頭的旋轉角度求出弧度。
/**
*
* @returns 返回蛇頭的朝向弧度
*/
getRadian(): number {
// 獲取弧度,引用對應公式: 弧度 = (PI/180) * 角度 ; 角度 = 弧度 * (180/Math.PI);
var radian = (Math.PI / 180) * (this.head.angle)
return radian
}
拿到蛇頭的弧度,我們就要利用三角函數的相關知識,解釋的不到位還請抬舉我。
x軸的增量幅度為radian的余弦值,鄰邊(X軸線)比斜邊(向量線);所以x軸的增量為: Math.cos(radian) * this.speed
y軸增量幅度為radian的正弦值, 對邊(Y軸線)比斜邊(向量線);所以y軸的增量為: Math.sin(radian) * this.speed
以下為update函數里的求向量增量的代碼:
update(deltaTime: number) {
var x:number, y:number;
// 當前蛇頭朝向
var radian = this.getRadian()
// x軸等于弧度余弦值 cos為鄰邊(X軸線)比斜邊(向量線)https://baike.baidu.com/item/%E6%AD%A3%E5%BC%A6%E5%80%BC/10802586
// 所以,cos(弧度)為x要增的量
x = Math.cos(radian) * this.speed
// y軸等于弧度的正弦值 sin為對邊(Y軸線)比斜邊(向量線),https://baike.baidu.com/item/%E4%BD%99%E5%BC%A6/73670
// 所以,sin(弧度)為y要增的量
y = Math.sin(radian) * this.speed
var speedVelocity = v2(x, y)
// 設置剛體速度達到移動
this.headRigidbody.linearVelocity = speedVelocity
}
求出向量的增量后,問題就好辦了,我們只需要把蛇頭的位置x和y分辨增量就行,可以通過逐元素向量加法得到移動后的position位置坐標,然后設置蛇頭的position就行了
// 棄用,剛體盡量使用物理速度改變位置
// 逐元素向量加法,add(out,a,b), out = a + b
// Vec3.add(this._targetPos, this._curPos, new Vec3(x, y))
// 以下為設置墻壁穿越的代碼,可忽略
// if (Math.abs(this._targetPos.x) > this.gameObj.canvasWidth / 2) {
// this._targetPos.x = -this._targetPos.x
// }
// if (Math.abs(this._targetPos.y) > this.gameObj.canvasHeight / 2) {
// this._targetPos.y = -this._targetPos.y
// }
// this.head.setPosition(this._targetPos)
上述方法已經可以達到移動的目的,但由于我們給蛇頭節點加入了RigidBody2D組件,用于物理碰撞檢測,我推薦大家使用為剛體設置速度的方式來完成移動,很簡單,我們只需要把對應的向量增量(x,y 的增量)設置給linearVelocity就行,讓我們在update方法最后面加上以下代碼
update(deltaTime: number) {
...
// 設置剛體速度達到移動
// this.headRigidbody = this.head.getComponent(RigidBody2D)
this.headRigidbody.linearVelocity = speedVelocity
}
還有一點需要注意的是,我們為蛇頭節點設置了剛體(RigidBody2D),需要把其RigidBody2D.type設置為Kinematic,否則為出現開局蛇頭直接下落的情況。
以下為官方文檔的剛體類型介紹(v3.3)
https://docs.cocos.com/creator/3.3/manual/zh/physics-2d/physics-2d-rigid-body.html
剛體類型
Box2D 原本的剛體類型是三種:Static、Dynamic、Kinematic。在 Cocos Creator 中多添加了一個類型:Animated。
Animated 是從 Kinematic 類型衍生出來的,一般的剛體類型修改 旋轉 或 位移 屬性時,都是直接設置的屬性,而 Animated 會根據當前旋轉或位移屬性,與目標旋轉或位移屬性計算出所需的速度,并且賦值到對應的移動或旋轉速度上。
添加 Animated 類型主要是防止對剛體做動畫時可能出現的奇怪現象,例如穿透。
-
RigidBodyType.Static
靜態剛體,零質量,零速度,即不會受到重力或速度影響,但是可以設置他的位置來進行移動。
-
RigidBodyType.Dynamic
動態剛體,有質量,可以設置速度,會受到重力影響。
-
RigidBodyType.Kinematic
運動剛體,零質量,可以設置速度,不會受到重力的影響,但是可以設置速度來進行移動。
-
RigidBodyType.Animated
動畫剛體,在上面已經提到過,從 Kinematic 衍生的類型,主要用于剛體與動畫編輯結合使用。