Cocos Creator 学习笔记（二）

随后几天我们学习了Cocos Creator官方文档中的一个坑爹小游戏

这是我们的第一个主角。运行游戏发现，主角跳跃频率偏快，高度太高，星星出现的位置太高而且超出了画布。

先从人物入手，在人物节点的属性检查器中找到用户自定义脚本组件，点击脚本，顺着提示打开脚本文件。

JS文件中有几个方法需要记录一下（个人理解，可能有错误）：

在该脚本挂载的节点被加载时，脚本中的onLoad函数会首先被执行，随后是start函数；在节点加载完毕后update函数会根据设置的帧率自动刷新画面； onDestory函数则会在节点销毁的时候自动调用。

在游戏设定中，purperMonster是会一直跳跃的，因此先为其创建一个控制跳跃的函数。

具体实现部分官方已经给出了。

setJumpAction: function () {
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 不断重复
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },

值得解释一下的是cc.moveBy这个API，它的第一个参数是跳跃间隔时间，第二个参数是一个cc.v2对象，也就是需要到达的位置。后半部分的.easing，是用来控制移动速度曲线的，为了让跳跃更像跳跃。

onLoad: function () {
        // 初始化跳跃动作
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        // 加速度方向开关
        this.accLeft = false;
        this.accRight = false;
        // 主角当前水平方向速度
        this.xSpeed = 0;

        // 初始化键盘输入监听
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);   
    },

在这段代码中，设置了键盘的监听，据官方文档中描述，cc.systemEvent目前支持按键事件和重力感应事件。

cc.systemEvent.on的第一个参数是系统时间类型，第二个是监听到该事件发生后的回调函数（这里是自定义的onKeyDown和onKeyUp函数），第三个参数是监听目标，可以是null

update: function (dt) {
        // 根据当前加速度方向每帧更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // 限制主角的速度不能超过最大值
        if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 根据当前速度更新主角的位置
        this.node.x += this.xSpeed * dt;
    },

这里的this.accel是通过参数列表在属性检查器中设置的，方便后期改动。

 

Game.js是一个统筹全局的角色，它控制了整个游戏的运行、暂停、结束、开始。在ccc中，可以将节点挂载到脚本上来获取该节点的内部信息。

如果其他脚本需要控制全局，可通过构造一个init函数把game传递给该脚本，这样该脚本就可以使用game.js中的资源。

比如这样：

init: function (game) {
        this.game = game;
    },

在game.js中，可在onLoad中调用该脚本中的init函数，同时将自身（this）传入该函数。

 

为了让purperMonster的跳跃更加有弹性，官方例子中为其加上了形变的效果

setJumpAction: function () {
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 形变
        var squash = cc.scaleTo(this.squashDuration, 1, 0.6);
        var stretch = cc.scaleTo(this.squashDuration, 1, 1.2);
        var scaleBack = cc.scaleTo(this.squashDuration, 1, 1);
        // 添加一个回调函数，用于在动作结束时调用我们定义的其他方法
        var callback = cc.callFunc(this.playJumpSound, this);
        // 不断重复，而且每次完成落地动作后调用回调来播放声音
        return cc.repeatForever(cc.sequence(squash, stretch, jumpUp, scaleBack, jumpDown, callback));
    },

cc.sequence 顺序执行动作，创建的动作将按顺序依次运行。