Cocos Creator制作第一个游戏（笔记）

事先声明

在下刚刚接触Cocos Creator，并随着官方教程进行游戏制作。关于本文章“制作第一个游戏”于官方处已说明得非常清楚易懂。本文章完全是自己相想要做一个笔记。姑且算是吧

这里放上官方原网址：快速上手:制作第一个游戏。

项目资源

此为官方资源下载地址：

初始资源：里面只包含了相应的图片等资源，项目从零开始。

最终资源：这是教程结束后游戏最终的样子。

过程

创建场景

打开初始资源后，点击资源管理器左上角的“+”并选择“Scene”创建游戏场景（如果没有创建就开始编辑游戏场景，则在退出时会提示创建并保存场景）。

我的v2.0.8版本的Cocos Creator资源管理器默认在左下角。

使用背景等资源

背景图片、地面、玩家操纵的主角等图片资源均可以从资源管理器中直接拖拽到层级管理器的节点中，并于场景编辑器中显示。

这四个功能从左到右分别可以对场景编辑器中的资源进行以下操作：
1.对资源进行 拖拽、移动 。
2.对资源进行 旋转 。
3.对资源进行 缩放 。
4.对资源进行 矩阵变换 ，即可无视长宽比例，通过点击并拖拽资源的四个点或四条边来变换资源的大小。

将背景、地面、角色资源都添加到层级管理器中：

如图，内部紫色的矩形框为分辨率框，可以简单理解为框内才是设备上最终显示内容的部分。官方建议：将场景等资源通过 矩形变换 工具放大到超出紫色框，这样基本上可以覆盖市场上手机的整个屏幕，而不会出现“穿帮”现象。

另外，资源的长宽等属性均可以在属性检查器中查看与修改。

添加代码

创建脚本

先选中我们的项目文件夹（这里是assets），右击新建文件夹并命名，用来装我们的代码文件。创好文件夹后右击新文件夹新建JavaScript脚本，双击脚本文件可以打开编辑器编辑。

简要说明：

properties: {},中放各种属性值，如这个例子中放的是：
// 主角跳跃高度
jumpHeight: 0,
// 主角跳跃持续时间
jumpDuration: 0,
// 最大移动速度
maxMoveSpeed: 0,
// 加速度
accel: 0,

在脚本中设置好各个要调整的属性后，可以选择相应节点（这里是游戏角色Player）在属性检查器最下面选择添加个人组件，并选择添加 用户脚本组件 -> 你的脚本名字（这里命名为Player），如图：

之后便可以在属性检查器中直接查看与设置这些属性了，如图：

这里只对部分地方作笔记，其他具体请看官方教程，那里写得非常详细也易懂，官方教程网址在文章顶部的 事先声明 处。

添加跳跃功能

接下来于properties: {},函数后添加跳跃函数。

    properties: {
        //...
    },													
    		
	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));
    },

这里的代码我引用一下官方教程中的话：
例如在上面的代码中，moveBy() 方法的作用是在规定的时间内移动指定的一段距离，第一个参数就是我们之前定义主角属性中的跳跃时间，第二个参数是一个 Vec2（表示 2D 向量和坐标）类型的对象，为了更好的理解，我们可以看看官方给的函数说明：

/**
* !#en
* Moves a Node object x,y pixels by modifying its position property.
* x and y are relative to the position of the object.
* Several MoveBy actions can be concurrently called, and the resulting
* movement will be the sum of individual movements.
* !#zh 移动指定的距离。
* @method moveBy
* @param {Number} duration duration in seconds
* @param {Vec2|Number} deltaPos
* @param {Number} [deltaY]
* @return {ActionInterval}
* @example
* // example
* var actionTo = cc.moveBy(2, cc.v2(windowSize.width - 40, windowSize.height - 40));
*/
cc.moveBy = function (duration, deltaPos, deltaY) {
return new cc.MoveBy(duration, deltaPos, deltaY);
};

可以看到，方法 moveBy 一共可以传入三个参数，前两个参数我们已经知道，第三个参数是 Number 类型的 Y 坐标，我们可以发现第二个参数是可以传入两种类型的，第一种是 Number 类型，第二种才是 Vec2 类型，如果我们在这里传入的是 Number 类型，那么默认这个参数就是 X 坐标，此时就要填第三个参数，为 Y 坐标。上面的例子中 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)) 第二个参数传入的是使用 cc.v2 方法构建的 Vec2 类型对象，这个类型表示的是一个坐标，即有 X 坐标也有 Y 坐标，因为不需要再传入第三个参数！同时注意官方的一段话 x and y are relative to the position of the object.，这句话的意思是传入的 X、Y 坐标都是相对于节点当前的坐标位置，而不是整个坐标系的绝对坐标。

了解了参数的含义之后，我们再来关注 moveBy() 方法的返回值，看官方说明可以知道，这个方法返回的是一个 ActionInterval 类型的对象，ActionInterval 在 Cocos 中是一个表示时间间隔动作的类，这种动作在一定时间内完成。到这里我们就可以理解代码 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut()) 前一部分 的意思了，它的意思就是构造一个 ActionInterval 类型的对象，这个对象表示在 jumpDuration 的时间内，移动到相对于当前节点的 （0，this.jumpHeight） 的坐标位置，简单来说，就是一个向上跳跃的动作。

那么 后半部分 easing(cc.easeCubicActionOut()) 的作用是什么呢？easing 是 ActionInterval 类下的一个方法，这个方法可以让时间间隔动作呈现为一种缓动运动，传入的参数是一个缓动对象，返回一个 ActionInterval 类型对象，这里传入的是使用 easeCubicActionInOut 方法构建的缓动对象，EaseCubicInOut 是按三次函数缓动进入并退出的动作，具体曲线可参考下图：

在 onLoad 方法里调用刚添加的 setJumpAction 方法，然后执行 runAction 来开始动作

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

这里可以介绍新功能：

图中中间的三角按钮可以 打开并预览 你目前的成果；左边可以 选择使用你的默认浏览器或者Cocos Creator的模拟器 来打开预览你的作品；右边暂未接触到，之后再补。

到这里如果你点击中间的“预览”按钮，你将会得到一个不断跳跃的主角。

添加左右移动功能

代码：

setJumpAction: function () {
        //...
    },

    onKeyDown (event) {
        // set a flag when key pressed
        switch(event.keyCode) {
            case cc.macro.KEY.a:
                this.accLeft = true;
                break;
            case cc.macro.KEY.d:
                this.accRight = true;
                break;
        }
    },

    onKeyUp (event) {
        // unset a flag when key released
        switch(event.keyCode) {
            case cc.macro.KEY.a:
                this.accLeft = false;
                break;
            case cc.macro.KEY.d:
                this.accRight = false;
                break;
        }
    },

onKeyDown是检测键盘按下的事件，onKeyUp是检测键盘松开的事件。

随后在onLoad中加入代码：

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);   
    },

    onDestroy () {
        // 取消键盘输入监听
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

在update中写入代码：

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;
    },

update 在场景加载后就会每帧调用一次，我们一般把需要经常计算或及时更新的逻辑内容放在这里。

这时预览游戏就可以移动跳跃的主角，按一下主角会以一定初速度持续往某一方向走，按的次数越多（或者按住时间越长）主角速度就会越来越快（初速度越来越大）。

使主角有限制地操控

这一步是我自己加的，官方教程中并没有要求也没有讲解这一功能。这个标题可能描述得不准确。我的意思是：此时按一下a/d马上松开就会让主角一直往左/右走，可是一般游戏我们都是按一下主角走一格，而不是一直往前走的呀。所以我加了这一步。

通过对代码的分析，我们按一下按键，会给主角一定的加速度，也就是说会给主角一定的初速度。而且松开按键后我们没有对初速度作任何处理，所以初速度一直存在，主角也就一直往前走。所以我们需要消除这一个加速度，那怎么消除呢？

在尝试与思考后，我在update中加入了这么一段代码：

if(!this.accLeft && !this.accRight){
	this.xSpeed = 0;
}

在前面的代码中，按键按下accLeft或accRight就会为真，给主角以加速度；松开即为假，但只是不再加加速度，并没有什么处理。

这行代码则使其在没有按键按下时让初速度归零，使主角停在原地。

如果将这段代码改成accLeft及accRight随便其中一个为假就使初速度为零（将&&改为||）的话，你会发现按下任何一个按钮主角都不会走，因为两者随便一个为假（随便一个按钮松开了）都会使初速度为零，主角就不会移动。只有当两个按钮都按下（accLeft与accRight都为真）时主角才会移动。

制作星星

未完待续。。。