CocosCreator教程（入门篇）

目录
一、项目结构
二、资源分类
三、资源小知识点
四、场景小知识点
五、子系统重点
六、脚本开发
七、发布游戏

系列教程
CocosCreator教程（初识篇）
CocosCreator教程（编辑器篇）

---

一、项目结构

ProjectName（新建项目）
├──assets
├──library
├──local
├──packages
├──settings
├──temp
└──project.json

子结构	功能
assets	与资源管理器的内容同步，游戏的核心目录（每个文件都有相应.meta文件）
library	这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式
local	编辑器使用习惯记录（如：窗体布局）
settings	项目设置
project.json	版本控制，必须与assets共同存在
build	打包导出目录，构建项目时，自动生成

PS：.meta文件——记录某资源在项目中的唯一标识，以及其配置信息，只有在编辑器中对资源做修改，.meta文件才会实时变化。因此，不要在编辑器外，对资源的内容进行操作。

---

二、资源分类

1、场景（scene）

自动释放资源：切换场景后，上一个场景中的资源，从内存中释放。
延迟加载资源：意味着不用等待所有资源加载完毕，才显示场景。（快速切换场景，资源陆续在画面显示）

2、贴图（texture）

普通图，子层为一张spriteFrame。

3、预制（prefab）

创建方式：拖拽场景节点，到资源管理器。

4、图集（atlas）

精灵图，子层为多张spriteFrame。（精灵图合成软件：TexturePacker、Zwoptex）

5、自动图集（auto-atlas）

打包时，将所在目录中的所有碎图，合成为图集。

6、艺术数字（label-atlas）

数字为内容的图集。

7、字体（font）

动态字体：.ttf
位图字体：.fnt + .png（存在于同一目录）

8、粒子（particle）

小型动画

9、声音（audio）

模式：web audio、dom audio

10、骨骼动画（spine / dragonBones）

文件格式	功能
.json	骨骼数据
.png	图集纹理
.txt / .atlas	图集数据

11、瓦片图（tiledMap）

文件格式	功能
.tmx	地图数据
.png	图集纹理
.tsx tileset	数据配置文件

12、文本（text）

13、脚本（script）

14、json

---

三、资源小知识点

1、跨项目导入导出资源

操作流程：
（1）导出：文件 => 资源导出，选择 .fire场景文件，输出assets目录的 .zip压缩包。
（2）导入：文件 => 资源导入，选择压缩包源路径、解压路径，输出assets目录内容。

2、图像资源自动剪裁

基于size mode，尽量去除spriteFrame无像素的部分，减小图片尺寸。

---

四、场景小知识点

1、场景中的元素，即是节点，可内嵌组件。

2、坐标系

类别	坐标轴方向
cocos坐标系（世界、本地坐标系）	x右、y上、z外
设备屏幕坐标系	x右、y下

3、锚点

作用：用于变换、子节点定位基准。

---

五、子系统重点

1、渲染系统

对摄像机、渲染组件的了解。

2、UI系统

对widget、layout等UI组件的了解。

3、动画系统

（1）创建动画的基本流程
（2）时间曲线（双击动画线，进入编辑窗口）
（3）事件管理（双击游标、加减按钮控制参数个数）
（4）脚本控制

4、物理系统

碰撞组件（普通碰撞）
（1）editing——是否为编辑模式
（2）regenerate points——计算图形边界，自定生成控制点，数值为控制点的生成密度 / 准确度
（3）ctrl + 点击——删除控制点
（4）组件类型：矩形、圆形、多边形
（5）设置碰撞组（项目 => 项目设置 => 分组设置）：
制定分组 => 匹配分组 => 碰撞组件所在节点上，设置所属分组
（6）脚本控制

Box2D物理引擎（高级碰撞）

5、音频系统

（1）audioSource组件
（2）脚本控制

---

六、脚本开发

1、使用 cc.Class 声明类型

（1）定义 CCClass

var Sprite = cc.Class({
    //...
});

（2）实例化

var obj = new Sprite();

（3）判断类型

cc.log(obj instanceof Sprite);       //使用原生JS的instanceof 

（4）构造函数（ctor）

var Sprite = cc.Class({
    //使用ctor声明构造函数
    ctor: function () {
        cc.log(this instanceof Sprite);
    }
});

（5）实例方法

var Sprite = cc.Class({
    // 声明一个名叫 "print" 的实例方法
    print: function () { }
});

（6）继承（extends）