2021-12-29 主角根据旋转角度移动

新手入门，练手贪吃蛇项目，首先是解决蛇头对应方向角度移动的问题。
先设置一个蛇头的初始角度假设是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，否则为出现开局蛇头直接下落的情况。

image.png

以下为官方文档的刚体类型介绍(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 衍生的类型，主要用于刚体与动画编辑结合使用。

2021-12-29 主角根据旋转角度移动

刚体类型

Peace