CocosCreator3D微信小游戏入门：RunningBall（三）
CharactorCamera
前面我们完成了基本的操作和游戏胜负判断，但是玩起来，我们的摄像机只能停止在那里不动。我们想让摄像机跟随小球Charactor节点一起运动起来。
在这里我们调整一下摄像机节点，新建一个空节点命名为CameraArm。将原本Scene下面的摄像机节点Camera，移动到CameraArm下面，让它成为CameraArm节点的子节点。
接下来我们新建一个脚本名为CharactorCamera.ts，脚本代码：
export class CharactorCamera extends Component {
//小球节点
@property(Node)
charactor: Node = null;
//是否跟随小球的X轴坐标
@property
XAxisFollow: boolean = true;
//是否跟随小球的Y轴坐标
@property
YAxisFollow: boolean = false;
//是否跟随小球的Z轴坐标
@property
ZAxisFollow: boolean = false;
update (deltaTime: number) {
var pos: Vec3 = this.node.position;
if (this.XAxisFollow) {
pos.x = this.charactor.position.x;
}
if (this.XAxisFollow) {
pos.y = this.charactor.position.y;
}
if (this.XAxisFollow) {
pos.z = this.charactor.position.z;
}
this.node.position = pos;
}
}
很简单的逻辑，就是在update方法中，根据我们配置，更新节点的位置。
编写完成后将这个脚本挂载到CameraArm节点上，这样我们整个游戏最核心的部分就基本完成了。
丰富我们的关卡元素
接下来我们制作一些关卡元素，用来丰富我们的游戏，让游戏更有挑战
SpeedUpPlane
这是一个加速的机关，当小球与它发生碰撞，它就会给小球一个加速度，加速小球的运动
首先我们还是利用一个Plane模型来开始，新建材质球，换上它的贴图
然后给它添加RigidBodyComponent组件和BoxColliderComponent
这里要注意的是，BoxColliderComponent的IsTrigger属性我们要标记为true
这样的话这个碰撞组件就只会产生碰撞事件，但并不会影响与它发生碰撞的刚体的运动状态。类似一个触发器
调整节点的大小，这里我使用的缩放值如下：
接下来我们编写它对应的逻辑脚本（SpeedUpPlane.ts）
export class SpeedUpPlane extends Component {
//发生加速时，给予小球的冲量力度
@property
SpeedUpPower: number = 0;
//是否已经加速过
private _isSpeedUpped: boolean = false;
start () {
var collider = this.node.getComponent(BoxColliderComponent);
//注意这里由于我们的IsTrigger属性为true，因此我们不再是监听onCollisionEnter事件
//而是onTriggerEnter事件，同样回调参数的属性为ITriggerEvent，而不是ICollisionEvent
collider.on("onTriggerEnter", (event: ITriggerEvent) => {
var otherCollider = event.otherCollider;
var ball = otherCollider.node;
if (ball.name == "Charactor" && !this._isSpeedUpped) {
var movement = ball.getComponent(CharactorMovement);
//触发后给予小球向前的冲量，加速小球的运动
movement.addFrontImpluse(this.SpeedUpPower);
this._isSpeedUpped = true;
}
});
}
}
完成后将脚本挂载到节点上，配置好属性
最后我们同样将它拖到资源管理器中，生成Prefab，方便后续的关卡编辑
JumpPlane
这个关卡元素是当小球触发它时，它会给予小球一个向上的冲量，让小球跳起来
代码与SpeedUpPlane是类似的，只是SpeedUpPlane调用的是CharactorMovement的addFrontImpluse方法，而我们现在的这个机关，需要调用的事CharactorMovement的addTopImpluse方法
相关代码：
export class JumpPlane extends Component {
@property
JumpPower: number = 0;
private _isJumped: boolean = false;
start () {
// Your initialization goes here.
var collider = this.node.getComponent(BoxColliderComponent);
collider.on("onTriggerEnter", (event: ITriggerEvent) => {
var otherCollider = event.otherCollider;
var ball = otherCollider.node;
if (ball.name == "Charactor" && !this._isJumped) {
var movement = ball.getComponent(CharactorMovement);
movement.addTopImpluse(this.JumpPower);
this._isJumped = true;
}
});
}
}
最后我们同样将它拖到资源管理器中，生成Prefab，方便后续的关卡编辑
MovePlane
这个关卡原始事当小球进入它的触发范围时，它会升起来，作为一个障碍物出现
我们先创建一个Cube模型
添加刚体组件RigidBodyComponent
然后添加一个BoxColliderComponent作为它的碰撞组件
添加一个SphereColliderComponent作为它的触发碰撞组件，这个Collider组件的IsTrigger要勾选上，因为我们只是用来作为触发器使用
调整一下SphereColliderComponent的Radius属性，调整一下它的大小，你也可以在场景编辑器中进行调整
新建一个空节点，把这个Cube节点拖到这个空节点下，作为它的子节点
回到Cube模型节点，我们给它添加一个Animation组件。
在顶部菜单打开Animation编辑窗口
点击Create a new AnimationClip file按钮，创建一个AnimationClip资源
我们也可以通过在资源管理器中右键，选择创建AnimationClip来创建这个资源
创建好后，将这个资源赋值给Animation组件的Clips数组中，以及赋值给DefaultClip属性
点击动画编辑器中的Enter animation editing mode按钮，进入编辑器编辑动画
整个动画编辑器的操作与CocosCreator2D是一致的，只是界面上会有一些变化
比如关键帧的属性在这里进行设置
先点击关键帧，然后点击左边的属性标签，这个设置框就可以显示出来了
另外除了基础属性可以在动画编辑器中进行编辑，节点的材质球属性，也可以通过动画编辑器去编辑
比如材质的MainTexture属性
我们可以通过动画编辑器在动画过程中更换MainTexture所使用的纹理资源，将资源拖到这个设置框中就行
ps:目前使用下来材质动画部分属性设置是无效的，还未完善，下个版本基本上就没问题了
动画编辑器的使用可以参考官方文档，这里就不详细叙述了，相信大家看完文档后都可以很快速的完成这个位移的小动画。
最后我们编写一下它的脚本，新建脚本命名为MovePlane.ts，将它挂载给Cube节点
其中代码如下：
export class MovePlane extends Component {
//是否已经触发过
private _isMoved: boolean = false;
//动画组件
private _animation: AnimationComponent = null;
start () {
// Your initialization goes here.
this._animation = this.node.getComponent(AnimationComponent);
var collider = this.node.getComponent(SphereColliderComponent);
//监听球形碰撞题的触发事件，注意这里getComponent的属性时SphereColliderComponent
//如果你写的是ColliderComponent，那么就有可能获取到的组件是节点身上的BoxColliderComponent组件
collider.on("onTriggerEnter", (event: ITriggerEvent) => {
var otherCollider = event.otherCollider;
var ball = otherCollider.node;
if (ball.name == "Charactor" && !this._isMoved) {
//如果是小球触发，则播放升起来的动画
this._animation.play();
this._isMoved = true;
}
});
}
// update (deltaTime: number) {
// // Your update function goes here.
// }
}
完成后我们还是把这个关卡元素制作成Prefab，方便我们后续编辑关卡时重复使用
其他的关卡元素
相信做到这里，通过前面的几个关卡元素，你已经可以自己很简单快速的制作很多有趣的关卡元素了，这里我们就不多说了。我自己还做了一些其他的关卡元素，详见demo工程
在完成了一系列的关卡元素后，我们就可以很快速的搭建出各种各样的关卡了。