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工程

在完成了一系列的关卡元素后，我们就可以很快速的搭建出各种各样的关卡了。

标签：动画,otherCollider,CocosCreator3D,微信,小球,RunningBall,var,关卡,节点
来源： https://blog.csdn.net/zzx023/article/details/102759470