cocos creator 和 FairyGUI 联合开发下

一：实现加载UI界面

1.先在主界面加一个空节点，一般都是通过空节点来执行主逻辑脚本

节点名必须和脚本名字一致

2.DemoEntry.ts  

在onLoad()中加载ui包CW

初始化场景界面

如 this._view = fgui.UIPackage.createObject("CW", "game_start").asCom获得    开始界面  然后通过 fgui.GRoot.inst.addChild(this._view)加载界面

3.运行界面如下

界面出来了是不是很开心

二：给控件增加监听

1.通过onClick实现点击监听

2.通过.on(fgui.Event.STATUS_CHANGED,function () { 实现对控制器状态改变的监听

上一篇文章写了星星生成的逻辑，详情请看 Cocos Creator开发游戏消灭星星——星星生成

星星消除是发生在用户点击之后，所以需要处理用户触摸 *** 作。在上一篇制作星星预制时有提及，在脚本组件 starCtr.js 的start函数里监听触摸。

消除星星是消除上下左右相连的星星，所以需要根据用户点击的星星找到其他相连的星星。在Utils中增加方法needRemoveList：

现在来完成触摸处理逻辑：

通过用户点击的星星坐标找到与其相连的星星们，然后发射delete_stars事件，通知地图消除星星。关于监听和发射时间参考官方文档 监听和发射事件 。

在matrixCtr.js的onLoad方法中添加事件监听

先添加几个属性来记录消除数据

在回调函数中处理消除逻辑

上一篇 说过，动画和特效主要放在节点 ActionRoot 中处理。如图，combo特效就在combNode节点中播放。

asset、atlasAsset分别存储骨骼动画资源，combName中存储骨骼动画的名字，和资源数组一一对应，_anim是dragonBones组件。

playComb即是播放特效的方法。

combCtr是脚本组件matrixCtr中的属性，即是场景中ActionRoot节点的脚本组件。

将需要消除的星星对应的坐标清空（赋值-1）

按规则星星是一个一个消除的，所以bomb会递归调用，直到所有星星都消除。在消除星星的同时，有分数计算和动画逻辑。

星星的移除是在方法 bombStar 中处理的，在创建星星的时候使用了对象池，所以移除时把它重新放入对象池。

在移除星星的同时，伴随有星星爆炸的特效。 starParticle 是一个预制，层级很简单，在一个空节点中，添加Particle System组件和脚本组件particleCtr。

Particle System组件设置自动移除，在属性检查器中勾选 Auto Remove On Finish 选项。

我们知道一次消除星星方块越多，得分越高。

分数动画有几种：

动画在actionCtr.js中处理：

因为分数也会被频繁的创建和移除，所以也使用了对象池，分数的预制制作后面介绍。

与单个方块的分数动画一样，消除总得分动画：

层级结构很简单，都是空节点下加一个Label节点。父节点上都有一个脚本组件partScore、totalScore。

脚本也很简单，setScore方法给Label赋值。

与单个分数不同的，总得分的Label动画使用Creator的Animation编辑器制作。所以，预制中需要在节点label中添加Animation组件，在这里我们在添加一个脚本组件totalScoreLabel，这个脚本主要处理Animation动画的事件回调方法。

自动释放资源： 切换场景后，上一个场景中的资源，从内存中释放。

延迟加载资源： 意味着不用等待所有资源加载完毕，才显示场景。（快速切换场景，资源陆续在画面显示）

普通图，子层为一张spriteFrame。

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

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

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

数字为内容的图集。

动态字体：.ttf

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

小型动画

模式： web audio、dom audio

*** 作流程：

（1）导出：文件 =>资源导出，选择 .fire场景文件，输出assets目录的 .zip压缩包。

（2）导入：文件 =>资源导入，选择压缩包源路径、解压路径，输出assets目录内容。

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

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

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

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

（1）创建动画的基本流程

（2）时间曲线（双击动画线，进入编辑窗口）

（3）事件管理（双击游标、加减按钮控制参数个数）

（4）脚本控制

碰撞组件（普通碰撞）

（1）editing——是否为编辑模式

（2）regenerate points——计算图形边界，自定生成控制点，数值为控制点的生成密度 / 准确度

（3）ctrl + 点击——删除控制点

（4）组件类型：矩形、圆形、多边形

（5）设置碰撞组（项目 =>项目设置 =>分组设置）：

制定分组 =>匹配分组 =>碰撞组件所在节点上，设置所属分组

（6）脚本控制

Box2D物理引擎（高级碰撞）

（1）audioSource组件

（2）脚本控制

（1）定义 CCClass

（2）实例化

（3）判断类型

（4）构造函数（ctor）

（5）实例方法

（6）继承（extends）

（7）父构造函数

（8）完整声明属性

properties常用参数

（1）获得组件所在的节点

（2）获得其它组件

（3）获得其它节点及其组件

（4）访问已有变量里的值（通过模块访问）

（1）节点状态和层级 *** 作

（2）更改节点的变换（位置、旋转、缩放、尺寸）

（3）颜色和不透明度

（4）常用组件接口

cc.Component 是所有组件的基类，任何组件都包括如下的常见接口：

（1）创建新节点

（2）克隆已有节点

（3）创建预制节点

（4）销毁节点

（1）加载和切换

（2）通过常驻节点，进行场景资源管理和参数传递

（3）场景加载回调

（4）预加载场景

（1）资源属性的声明

（2）静态加载（在属性检查器里设置资源）

（3）动态加载

（4）加载远程资源和设备资源

（5）资源的依赖和释放

（1）监听事件

（2）关闭监听

（3）发射事件

（4）派送事件

（5）事件对象（回调参数的event对象）

（1）鼠标事件类型和事件对象

（2）触摸事件类型和事件对象

（3）其它事件

（1）动作控制

（2）容器动作

（3）即时动作

（4）时间间隔动作

（5）动作回调

（6）缓动动作

（1）XMLHttpRequest——短连接

（2）WebSocket——长连接

对象池的概念

在同一场景中，需要多次进行节点的生成、消失时，假如直接进行创建、销毁的 *** 作，就会很浪费性能。因此，使用对象池，存储需要消失的节点，释放需要生成的节点，达到节点回收利用的目的。

工作流程

（1）初始化对象池

（2）从对象池请求对象

（3）将对象返回对象池

清除对象池

---