Cocos 入门教程

环境预准备

Cocos Creator v2.0.9 https://www.cocos.com/creator
建议使用2.0.9，高版本可能不稳定

工具篇

除了cocos creator，还是有其他的必要工具的
VS Code
比如 VS Code 就必不可少的代码编辑器
下载：
https://code.visualstudio.com/
安装好vscode后,在cocos中的资源管理器里, 右键新建一个脚本文件,然后双击这个脚本文件,就会弹出对话框, 让你绑定编辑器, 然后选择vscode的程序路径,绑定好就行.

关联了代码编辑器后(建议做下面步骤):

在cocos中的菜单栏[开发者],选择 VS Code工作流, 然后依次点击
更新 VS Code 智能提示数据
安装 VS Code 扩展插件
添加 Chrome Debug 配置
可以全部点一遍

再在vscode 装一个 Debugger for Chrome的插件

TexturePackerGUI
非必须。
该工具用于将多张图片合并成一张大图，并且会生存 *.plist 文件，图片和 plist 文件同时放入 cocos的assets文件夹的话，cocos会识别并把大图罗列成每一个组成的小图的列表供用户使用。
将多图合并为一张图的好处是，减少游戏读取图片文件的IO开销

ShoeBox
非必须。
用于将一张大图拆解成多张小图，相当于 TexturePackerGUI的逆过程。
用法：将一张大图拖动到该软件的 “提取Sprite表” 中，即可拆解产生很多小图

认识cocos编辑器

场景编辑器+控件库+层级管理器

如图，将控件库的控件拖动到场景编辑器中，就会成为场景的一部分。
而这些控件，会以一种树结构的方式组织起来，显示在下图的层级管理器中：

如上图，整个场景的最底层的view是 Canvas
然后Canvas包含两个节点，一个是 Main Camera（摄像机）
另一个是 BaseView
而BaseView是整个游戏视图的根view，其下面包含了：
游戏背景：New Sprite
游戏人物：Hero
滚动按钮：ButtonRoll
跳跃按钮：ButtonJump

注意一下叠加关系：
如果ButtonRoll 放在 New Sprite 的下面，就说明 ButtonRoll会叠在 New Sprite这个组件的上面

而创建控件除了从控件库中拖拽到场景编辑器这种方式外，也可以右键点击层级管理器中的view来创建有父子关系的组件

比如：在Button上，再添加图标

这有个好处，对父组件的操作会同步操作给子组件，因此旋转，移动按钮组件，其子组件 Sprite也会跟着旋转移动

assets管理器

其实所有内容最后都是体现为assets文件夹下的一个文件
比如整个游戏场景，Canvas，mainCamera 等等，最后体现为 ：
assets/Scene/GameScene.fire 这个文件
保存场景，即保存这个场景文件的修改。
因此也可以新建一个场景

新建场景后，双击场景文件，就可以在场景编辑器中编辑这个场景文件了。

assets还包括脚本文件，纹理文件，动画文件等等。在资源管理器中双击这些文件,就可以编辑对应的文件, 比如场景文件, 动画文件等等

如何获得帮助?

查看官方范例集合
用cocos新建项目,选择范例集合

新建后: 点击选择 TestList 这个游戏场景

然后点击运行

然后就可以查看cocos可以实现的各种各样的功能. 点击即可查看名称对应的范例

比如点击
03_gameplay/02_actions下面的SimpleAction就可以看跳跃的动作例子

然后找到这个例子对应的代码:
在 assets/03_ganmeplay/02_actions/SimpleAction/SimpleAction.js

通过代码,我们就可以学习到这个范例的实现方法, 比如03_gameplay/02_actions下面的SimpleAction这个例子的实现方法是:

使用cc.Node类的 runAction 方法, 参数是一个 action对象
action对象可以由cc.moveBy() 等函数产生. 或者 cc.sequence() 函数将多个action串联到一起产生

查看api

查看类方法
https://docs.cocos.com/creator/api/zh/
在左上角搜索栏输入 Sprite 或者 Animation等类名，就可以找到对应的类方法了.
例如:
cc.Node.TypeEvent

如何调试代码

首先,确保查看本文工具篇中vscode的安装步骤,将vscode安装好,并且关联好代码编辑器.

然后做以下操作:

打开vscode, 安装插件 Debugger for Chrome

然后在cocos creator中点击菜单栏中,开发者选项->VS Code工作流->添加 Chrome Debug 配置

然后用vscode打开该项目
(可以直接双击cocos中assets文件夹下的脚本文件, 就直接在vscode中打开了)

打开之后, 打开vscode项目中 .vscode/launch.json 文件

打开后内容大致如下:

我们需要添加一行内容, 用来确定chrome浏览器的路径:

"runtimeExecutable": "C:/Users/niko/AppData/Local/Google/Chrome/Application/chrome.exe",

(把我上面的 C:/Users/niko… 改成你自己的chrome浏览器的路径)

添加后如下:

好了, 然后点击菜单栏 Debug/Start Debugging 就可以开始调试了

知识篇

基础知识(必学)

1.cocos中脚本代码的形式是这样的:

即简化来说是
cc.Class( {} )
而 {} 就是一个字典, 即 key : value 的形式.
比如
properties : {}
onLoa