初学者使用cocos creator制作第一个小游戏

最近微信小游戏开始萌芽，根据老师的要求开始学习cocos creator紧跟互联网的潮流，先是花了几天大概学了学HTML/CSS/Javascript，之后就直接开始看cocos creator的官方文档，看了两三天总算是根据教程一步一步的做了官方提供的第一个小游戏，官方文档上给的第一个小游戏制作过程确实是比较详细的，但是它没有对用到的每个api做详细的解释，估计目的是让初学者大概了解一下一个小游戏的制作过程和cocos creator的大概使用方法。作为一名喜欢钻牛角尖的程序员，我看见不懂的api和用法就特别喜欢深究，所以就花了两三天研究每一个函数，每一个属性，学完之后感觉收获良多，因此就打算写一个官方文档的补充版，以官方文档的快速上手：制作第一个游戏为基础，整合了其他文档内容，同时添加一下自己学习文档的理解，不仅能复习一下自己学到的知识，也帮助新人学习开发更加简单，好了，废话不多说，进入正题。
ps:
1.观看这篇的博客的读者都默认掌握了Javascript基础知识
2.直到编写主角脚本部分之前都基本是官方文档的内容，从编写主角脚本部分开始会在官方文档的基础上加入自己的理解以及整合了官方没有整合到快速上手：制作第一个游戏 的文档内容，灰底部分为重点
3.有能力的读者建议最好还是自己查阅官方API和说明来理解文档内容，这样理解会更加深刻。
4.如有理解错误，欢迎指正

打开初始项目

1. 我们首先启动 Cocos Creator，然后选择打开其他项目
2. 在弹出的文件夹选择对话框中，选中我们刚下载并解压完成的 start_project，点击打开按钮
3. Cocos Creator 编辑器主窗口会打开，我们将看到如下的项目状态
   

检查游戏资源

下面我们先来了解一下项目中都有哪些资源，请关注名为资源管理器的面板，这里显示的是项目中的所有资源树状结构。（项目资源指的就是游戏的字体、场景图片、主角模型、音乐音效等）
可以看到，项目资源的根目录名叫assets，对应我们解压之后初始项目中的 assets 目录，只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。
资源管理器可以显示任意层次的目录结构，我们可以看到这样的图标就代表一个文件夹，点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后， 资源管理器 中就会呈现如下图的状态。

每个资源都是一个文件，导入项目后根据扩展名的不同而被识别为不同的资源类型，其图标也会有所区别，下面我们来看看项目中的资源各自的类型和作用：

• 声音文件，一般为 mp3 文件，我们将在主角跳跃和得分时播放名为jump和score的声音文件。
• 位图字体，由 fnt 文件和同名的 png 图片文件共同组成。位图字体（Bitmap Font）是一种游戏开发中常用的字体资源
• 各式各样的缩略图标，这些都是图像资源，一般是 png 或 jpg 文件。图片文件导入项目后会经过简单的处理成为texture类型的资源。之后就可以将这些资源拖拽到场景或组件属性中去使用了。

创建游戏场景

场景是承载了所有游戏内容的载体，当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础，让我们现在就新建一个场景。

1. 在资源管理器中点击选中assets目录，确保我们的场景会被创建在这个目录下
2. 点击资源管理器左上角的加号按钮，在弹出的菜单中选择 Scene
   
3. 我们创建了一个名叫New Scene的场景文件，右键点击它并选择重命名，将它改名为game
4. 双击game，就会在 场景编辑器 和层级编辑器中打开这个场景

了解Canvas

打开场景后， 层级管理器 中会显示当前场景中的所有节点和他们的层级关系。我们刚刚新建的场景中只有一个名叫Canvas的节点，Canvas可以被称为画布节点或渲染根节点，点击选中Canvas，可以在 属性检查器 中看到他的属性。

这里的Design Resolution属性规定了游戏的设计分辨率，Fit Height和Fit Width规定了在不同尺寸的屏幕上运行时，我们将如何缩放Canvas以适配不同的分辨率。
由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在Canvas下面。这样当Canvas的scale（缩放）属性改变时，所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。

设置场景图像

添加背景

首先在 资源管理器 里按照assets/textures/background的路径找到我们的背景图像资源，点击并拖拽这个资源到 层级编辑器 中的Canvas节点上，直到Canvas节点显示橙色高亮，表示将会添加一个以background为贴图资源的子节点。

这时就可以松开鼠标按键，可以看到Canvas下面添加了一个名叫background的节点。当我们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。
我们在对场景进行编辑修改时，可以通过主菜单文件->保存场景来及时保存我们的修改。也可以使用快捷键Ctrl+S（Windows）或Cmd + S（Mac）来保存。

修改背景尺寸

在 场景编辑器 中，可以看到我们刚刚添加的背景图像，下面我们将修改背景图像的尺寸，来让他覆盖整个屏幕。
首先选中background节点，然后点击主窗口左上角工具栏第四个 矩形变换工具：

使用这个工具我们可以方便的修改图像节点的尺寸，将鼠标移动到 场景编辑器 中 background 的左边，按住并向左拖拽直到 background 的左边超出表示设计分辨率的蓝色线框。然后再用同样的方法将 background 的右边向右拖拽。

之后需要拖拽上下两边，使背景图的大小能够填满设计分辨率的线框。

在使用 矩形变换工具 修改背景图尺寸时，可以在 属性检查器 中看到 Node （节点）中的 Size 属性也在随之变化，完成后我们的背景图尺寸大概是 (1360, 760)。您也可以直接在 Size 属性的输入框中输入数值，和使用 矩形变换工具 可以达到同样效果。这样大小的背景图在市面流行的手机上都可以覆盖整个屏幕，不会出现穿帮情况。

添加地面

我们的主角需要一个可以在上面跳跃的地面，我们马上来添加一个。用和添加背景图相同的方式，拖拽 资源管理器 中 assets/textures/ground 资源到 层级管理器 的 Canvas 上。这次在拖拽时我们还可以选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到 background 节点的下方，直到在 Canvas 上显示橙色高亮框，并同时在 background 下方显示表示插入位置的绿色线条，然后松开鼠标，这样 ground 在场景层级中就被放在了 background 下方，同时也是 Canvas 的一个子节点。

在 层级管理器 中，显示在下方的节点的渲染顺序会在上方节点的后面，我们可以看到位于最下的ground物体在 场景编辑器 中显示在了最前。另外子节点也会永远显示在父节点之前，我们可以随时调整节点的层级顺序和关系来控制他们的显示顺序。

按照修改背景的方法，我们也可以使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候，如果拖拽节点顶点和四边之外的部分，就可以更改节点的位置。下图是我们设置好的地面节点状态：

除了矩形变换工具之外，我们还可以使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽，就可以一次改变节点在单个坐标轴上的位置。

我们在设置背景和地面的位置和尺寸时不需要很精确的数值，可以凭感觉拖拽。如果您偏好比较完整的数字，也可以按照截图直接输入position和size的数值。

添加主角

接下来我们的主角小怪兽要登场了，从 资源管理器 拖拽assets/texture/PurpleMonster到 层级管理器 中 Canvas 的下面，并确保他的排序在 ground 之下，这样我们的主角会显示在最前面。 注意小怪兽节点应该是 Canvas 的子节点，和 ground 节点平行。

为了让主角的光环在场景节点中非常醒目，我们右键点击刚刚添加的PurpleMonster节点，选择重命名之后将其改名为Player。

接下来我们要对主角的属性进行一些设置，首先是改变锚点(Anchor)的位置。默认状态下，任何节点的锚点都会在节点的中心，也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果，所以现在我们需要把主角的锚点设置在脚下。在 属性检查器 里找到Anchor属性，把其中的y值设为0，可以看到 场景编辑器 中，表示主角位置的移动工具的箭头出现在了主角脚下。
注意锚点的取值，锚点的取值为(0,0)时表示锚点在节点的左下角，取值为(1,1)时表示锚点在节点的右上角，(0.5,0.5)表示在节点的中心，其他的可以类推。
接下来 场景编辑器 中拖拽Player，把他放在地面上，效果如下图：

这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。

编写主角脚本

Cocos Creator 开发游戏的一个核心理念就是让内容生产和功能开发可以流畅的并行协作，我们在上个部分着重于处理美术内容，而接下来就是通过编写脚本来开发功能的流程，之后我们还会看到写好的程序脚本可以很容易的被内容生产者使用。

如果您从没写过程序也不用担心，我们会在教程中提供所有需要的代码，只要复制粘贴到正确的位置就可以了，之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。

1. 首先在 资源管理器 中右键点击assets文件夹，选择新建->文件夹
   
2. 右键点击New Folder，选择重命名，将其改名为scripts，之后我们所有的脚本都会存放在这里。
3. 右键点击scripts文件夹，选择新建->JavaScript，创建一个JavaScript脚本
4. 将新建脚本的名字改为Player。双击这个脚本，打开代码编辑器。

注意： Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！

编写组件属性

打开脚本后我们会发现里面已经有一些编辑好的代码块：

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
   
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
   
        //     get () {
   
        //         return this._bar;
        //     },
        //     set (value) {
   
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    // update (dt) {},
});

让我们来大概了解一下这些代码的作用。首先我们可以看到一个包裹了全局的cc.Class()方法，什么是cc呢？cc是cocos的简称，cocos 引擎的主要命名空间，引擎代码中所有的类，函数，属性和常量都在这个命名空间中定义。而Class()就是cc模块下的一个方法，这个方法用于声明 Cocos Creator 中的类，为了方便区分，我们把使用 cc.Class 声明的类叫做 CCClass。Class()方法的参数是一个原型对象，在原型对象中以键值对的形式设定所需的类型参数，就能创建出所需要的类。
例如：

var Sprite = cc.Class({
    name: "sprite"
});

以上代码用 cc.Class()方法创建了一个类型，并且赋给了 Sprite 变量。同时还将类名设为 “sprite”，类名用于序列化，一般可以省略。
对于c