CocosCreator学习1：做一个简单的游戏

把计步器写好了，到了写游戏场景、控件什么的时候，傻眼了。想做一个简单的地图，可以在地图上点击选择城市，发现用Cocos2D-X代码码出来好麻烦，尤其是城市位置问题，需要调试去找对像素区域做一个按钮控制，整个人都不好了。本来还想尝试用Tiled map来做，想法很逗比，应该不能用。今晚被长辈连番教育中，说到了撞墙走弯路才想起来，当初光顾着学引擎看代码了，竟然忘了还有CocosCreator，这么简单实用的工具我竟然没有去用，太傻了。而且现在距离比较提交程序结果时间也比较紧了，直接用CocosCreator做游戏时最明智的。下面将转向CocosCreator的学习。

CocosCreator有很详细的入门教程，下面我就跟随这个教程来进行学习。
http://www.cocos.com/docs/creator/getting-started/quick-start.html#–2

打开项目

教程中提供了一个简单游戏的初始版本，我就从这个游戏入手进行学习。从CocosCreator选择打开其他项目，打开start_project文件夹，选中即可打开。注意下载的start_project不能放在CocosCreator路径下。

打开后如图：

在资源管理器面板中，可以看到项目中的文件。项目资源的根目录叫asserts，对应于解压初始版本得到的文件夹名。其中标注bf图标的文件是位图字体，是一种字体资源，由fnt文件和同名的png图片文件共同组成。

创建场景

下面来创建游戏场景。游戏场景一般包括：场景图像（Sprite）、文字（Label）、角色、以组件形式附加在场景节点上的游戏逻辑脚本。在资源管理器中点击asserts目录前面的加号，选择Scene，会创建一个New Scene的场景文件。

双击New Scene，就会在场景编辑器和层级管理器中打开这个场景。在层级管理器中可以看到当前场景的所有节点和他们的层级关系。

Canvas画布节点/渲染根节点

现在New Scene中只有一个Canvas节点，称为画布节点或渲染根节点，点击选中Canvas可以在属性检查器中看到他的属性。


其中的Design Resolution属性用来指定游戏分辨率，Fit Hight和Fit Width是分辨率自适应匹配方法。只需要把图像放到Canvas下，就可以完成对不同分辨率的自适应，非常简单。

设置场景图像

增加背景图像

在资源管理器中将textures中background图像拖到
层级管理器的Canvas下即可增加背景图像，会看到Canvas下增加了一个background子节点。

点击文件->保存场景或使用快捷键ctrl+s保存场景后，在场景编辑器中便会显示增加的背景图像。

点击窗口左上角工具栏的第四格矩形变换工具，然后选中场景编辑器中的背景图像，可以实现对图像尺寸、位置、锚点的修改。

当然也可以直接使用属性检查器来直接设置这些参数。
在实际的应用开发中背景图像一般都是要大于显示范围的，这样可以让背景图覆盖整个屏幕，不出现穿帮的情况。

增加地面
使用和增加背景图像相同的方法，将地面图像拖到层级管理器的Canvas上，将ground节点移到background节点下方。

在层级管理器中，下方的节点的渲染顺序在上方节点之后，也就是说下方节点会遮挡上方节点。

使用相同的方法可以对地面图像的尺寸、位置、锚点进行修改。

增加主角
同样的方法，将主角图像player拖到ground下方。在之后的动画中，需要主角接触地面并跳跃，因此将锚点改为最下方，即y值为0，然后将它拖到地面上。

编写脚本

创建并添加脚本
脚本也就是游戏的逻辑规则，需要代码实现。
首先在资源管理器中右键点击assets文件夹，新建->文件夹，创建一个名为New Folder的文件夹，然后对其右击选择新建->JavaScript，创建一个JavaScript脚本NewScript，重命名为Player，双击即可打开编写界面。Cocos Creator 中脚本名称就是组件的名称。
在Player中的properties部分增加以下代码：

// Player.js
    //...
    properties: {
        // 主角跳跃高度
        jumpHeight: 0,
        // 主角跳跃持续时间
        jumpDuration: 0,
        // 最大移动速度
        maxMoveSpeed: 0,
        // 加速度
        accel: 0,
    },
    //...

这些属性用于规定主角的移动方式，可以在属性检查器中直接设置属性的数值。

然后在层级编辑器中选择player，在属性检查器中选择添加组件，选择增加用户脚本组件->Player，即可为主角添加组件。

现在可以在属性检查器看到Player组件并修改属性数值了。

跳跃和移动代码
在properties代码块下面定义setJumpAction方法：

// Player.js
    properties: {