CocosCreator3D微信小游戏入门RunningBall（一）: 物理

CocosCreator3D微信小游戏入门：RunningBall（一）

在CocosCreator3D发布之前，虽然CocosCreator2.x版本已经有了3D的功能，但是这些3D功能并不能完全支持一个纯3D的游戏开发，更多的只是辅助2D游戏，提升2D游戏的表现。那现在CocosCreator3D已经发布了1.0.0正式版，也就意味着我们可以使用它来进行纯3D游戏开发，并且如果是有着creator使用经验的同学，上手会非常的快速。这里带来一个简单的3D跑酷小游戏，目标平台是微信小游戏，希望通过这个游戏的开发，能够快速掌握并上手CocosCreator3D。

下载并安装CocosCreator3D

下载地址：https://www.cocos.com/creator3d
（本文使用的是Cocos Creator 3D v1.0.0版本）

下载完成后解压安装即可，没有什么太多的注意事项。
唯一需要注意的就是Cocos Creator 3D需要的nodejs版本，如果你的nodejs版本比较低的话，安装后可能会出现一些编辑器的bug或者是打不开编辑器。如果碰到这种情况，可以升级下nodejs，重新安装即可

另外需要准备的工具即是微信web开发者工具

新建项目

安装完成之后，打开CocosCreator3D，就可以看到熟悉的Dashboard界面了，与Creator2D非常的相似。
这里我们选择New Project，新建一个项目

项目打开后我们可以看到，整个编辑器的界面和Creator2D非常的相似

具体详细的编辑器面板介绍，包括操作介绍可以参考官方文档，如果你是具有一定的3D游戏开发基础的，可以忽略。CocosCreator3D的编辑器绝大部分是参考了Unity以及UE去设计的，对应的操作也基本相同

##Canvas
在Scene节点下创建一个Canvas节点，我们用它来作为UI的根节点

和Creator2D不同的地方是，在Creator3D中，场景默认为3D场景，因此也没有默认的去创建Canvas节点。如果这个场景你有一些UI或者是2D的渲染需要显示的话，需要手动创建Canvas节点。

Plane

在Scene节点下新建一个3D节点，我们选择3D Object中的Plane控件，顾名思义，这就是一个平板模型，只有一个平面的模型。

在层级管理器中选择这个节点，在右边的属性检查器中，点击AddComponent按钮，给它添加一个刚体组件，也就是RigidBodyComponent组件

接着，我们再点击AddComponent按钮，给它添加一个碰撞组件，这里我们使用BoxColliderComponent组件

添加完成后，我们在场景编辑器中可以看到：

这时我们的碰撞组件的大小已经与我们的模型相吻合了。如果是其他的一些自定义模型，在添加了碰撞组件后，碰撞组件的大小并不会与模型非常的吻合，你发现有需要调整的地方，这时你可以通过鼠标拖动画面中我们看到的几个绿点来调整碰撞组件的大小。
碰撞组件的位置目前这个版本还不能在场景编辑器中调整，需要在右边的属性检查器中，通过改变数值进行调整。

由于我们这个游戏使用的都是基础的模型，所以基本上不怎么需要去调整碰撞组件的大小。

去掉RigidComponent组件上的UseGravity属性，这样可以让这个刚体不受重力的影响。
同时我们勾选上IsKinematic属性，这样可以让这个物体的状态不受物理模拟所影响。类似于UE中的Static Actor。

这样我们就完成了一个基本的地面节点的创建。

我们把这个节点的Z轴缩放改为0.5

然后将它的命名改为NormalPlane，拖入到我们的资源管理器中，生成一个Prefab资源，留待后续关卡编辑使用

刚体组件和碰撞组件，我们可以参考看下官方文档

Sphere

在Scene节点下面，我们再创建一个Sphere球形模型，选择3D Object中的Sphere即可，

同样我们给这个节点添加RigidComponent组件和一个SphereColliderComponent组件，SphereColliderComponent组件和BoxColliderComponent组件一样，都是碰撞组件，只是一个是盒形碰撞，一个是球形碰撞

注意这里的UseGravity属性和IsKinematic属性使用默认的值，不需要像Plane那样去设置。

这个小球就是我们游戏中，玩家去操控的对象了。我们需要控制这个小球，完成一系列的跑酷关卡。

接下来，我们调整一下小球的坐标，将Y轴坐标设置为0.5，这样让我们的小球处于地面的上方，并且更改名称为Charactor

最后我们设置一下RigidComponent组件上的LinearDamping属性，这是线速度的衰减系数，可以让我们的小球就像真实物理世界的那样，逐渐因为一些阻力停下来

这时我们调整一下默认摄像机节点Camera的位置以及角度,预览一下可以看到小球停留在地面上静止不动

接下来我们创建两个脚本CharactorMovement和CharactorController，分别用来实现Charactor小球的运动以及控制。

CharactorMovement.ts脚本

先来看CharactorMovement这个脚本，这个脚本主要是要实现与小球的运动相关的代码

在资源管理器中，我们右键选择create -> TypeScript来创建脚本

由于小球是由物理进行运动模拟的，因此对于小球的运动，我们不能直接给予它位置上的改变，我们必须通过给予冲量Impluse或者是持续给予一个力Force来对小球进行速度上的改变，从而达到移动小球的目的。

如果是给予力Force的话，参考的物理公式就是牛顿定律：F = m * a

如果是给予冲量Impluse的话，参考的物理公式就是动能定律

这里我们给予小球冲量来改变速度即可

const {
    ccclass, property, requireComponent } = _decorator;

@ccclass("CharactorMovement")
@requireComponent(RigidBodyComponent)

首先使用requireComponent装饰器，定义我们的CharactorMovement组件必须要依赖于一个RigidComponent组件，毕竟我们的CharactorMovement组件是操作同一个节点上的RigidComponent组件的，有了这个装饰器，可以保证挂载了CharactorMovement的节点上肯定会有一个RigidComponent组件。如果没有RigidComponent组件，编辑器就会自动给这个节点添加一个RigidComponent组件，用来保证CharactorMovement组件的顺利运行。

接着我们给CharactorMovement定义一个私有属性_rigidBody

private _rigidBody: RigidBodyComponent = null;

然后我们在start方法中获取节点上的刚体组件并赋值给_rigidBody属性

this._rigidBody = this.node.getComponent(RigidBodyComponent);

接下来我们实现一些运动的接口

	//给予小球向前移动的冲量
	 addFrontImpluse (power: number) {
   
        if (this._jumping) {
   
            return;
        }
        this._rigidBody.applyImpulse(new Vec3(power, 0, 0));
        this.playMovementAudio();
    }

	//给予小球向左移动的冲量
    addLeftImpluse (power: number) {