Cocos Creator基础

一、坐标系

坐标用Vec2或者Vec3表示（Vector，向量）

Vec2：二维坐标（x, y)
例如：pos = new cc.Vec2(100, 100);
pos = cc.v2(100, 100);

Vec3：三维坐标（x, y, z）
例如：pos = new cc.Vec3(100, 100, 0);
pos = cc.v3(100, 100, 0);

取得一个节点的坐标：
let pos: cc.Vec2 = node.getPosition();
设置一个节点的坐标：
node.setPosition(cc.v2(100, 100));
设置一个节点的缩放：
node.setScale(cc.v3(1, 1, 0));
这个分别表示为x轴，y轴和z轴的缩放比例。

注意：Node.position是相对坐标，相对于父节点。

二、缓动系统

其他的系统：物理系统、碰撞系统、粒子系统等。

缓动，就是缓慢地动，呈现渐动效果。

例如：从（100，100）到（-100，-100）

直接移动为：node.setPosition(cc.v3(-100, -100, 0);

缓动：cc.tween(node).to(1, {position: cc.v3(-100,-100,0)}).start();
这种写法为链式调用；to(duration, args)中duration表示缓动的时长，args表示结束的参数。

更多的用法：
连续动作：先位移、后旋转
cc.tween(node)
.to(1, {position: cc.v3(100, 100, 0)})
.to(1, {rotation: 360})
.start();

并发动作：位移、旋转同时进行
cc.tween(node)
.to(1, {position: cc.v3(100, 100, 0), rotation: 360})
.start();

三、cc.tween用法

1、区分to和by

cc.tween(node).to(…).start()表示对属性进行绝对值计算，传入最终值。

cc.tween(node).by(…).start()表示对属性进行相对值计算，传入改变值。

2、变速运动easing

默认地，从A状态到B状态是匀速改变地。
cc.tween(node).to(duration, props, easing);

例如：速度越来越慢（速度时间地平方）
cc.tween(node)
.by(1, {position: cc.v3(0, 100, 0)}, {easing: ‘quadOut’})
.start();

四、动画

update()每一秒调用60次，即帧率FPS = 60。

帧动画的特点：

• 每帧之间的变化较小
• 帧率高

注意：帧动画不是连续的，每帧之前有16毫秒的间隔。

五、帧率

帧率FPS，实际指的是update()的调用频率。如果update()里没有变化，则游戏画面是不会重绘的。

在update(dt){}中，dt指上一帧的时间间隔，一般dt约为0.016秒，但并不是一个精确数字，或长或短。

一般来说，帧率越高，操作系统的负载越大，可以适当调低帧率：cc.game.setFrameRate(30);
其中cc.game是一个全局对象。

注意：帧率是一个全局设置，所以最好在游戏的初始化脚本中设置，可以建立一个脚本挂在Canvas节点下。

节点的加载顺序：根节点Canvas先于子结点加载。

六、状态控制

1、添加节点的运动状态
direction: cc.Vec2 = null;
（1, 0）向右
（-1, 0）向左
（0，1）向上
（0，-1）向下
null表示原地不动

2、添加按键响应
按下相应的键时，改变运动状态。

3、实现update()
根据当前的运动状态，更新节点的位置。

七、计时器API

Cocos Creator提供的一套计时器API封装在cc.Component中。

启动定时器：
comp.schedule(callback, interval)
comp.schedule(callback, interval, repeat, delay)

停止定时器：
comp.unschedule(callback)

完整调用计时器可以传入4个参数。
comp.schedule(callback, interval, repeat, delay)
callback, 计时器回调
interval, 每次时间间隔
repeat, 重复次数
delay, 多少秒后还时启动

注意：传入回调方法的名字时不能加小括号。

八、gif显示

在Cocos creator里使用GIF，需要预先处理。

相关使用方式：
1、提取出每一帧图片，添加到项目中。
2、制作为图集资源Atlas，添加到项目中。

方式1的步骤：

• 从GIF中提取每一帧，提取出来的PNG图片应该背景透明。
• 将所有图片添加到项目。
• 对每张图片逐一设置。注意需要将属性检查器的Sprite中的Trim Type设置为None，以保证每一张图片的大小相同。

使用脚本来循环显示图片：

• 添加一个图片节点。
• 添加一个脚本挂在该节点上，该脚本可以循环显示N张图片。
• 在属性面板中，指定要显示的图片数组。

注意：定义数组类型的属性
@property([cc.SpriteFrame])
frame: cc.SpriteFrame[] = [];

图集Atlas
图集Atlas，由多张小图合成的一张大图。

九、资源的加载

静态加载：直接在属性管理器中指定，在节点被加载时一并加载。
动态加载：在脚本中使用代码cc.resources.load()运行时加载。

十、加载多个资源

1、指定多个资源路径
cc.resources.load(paths, callback(err, assets){…})
其中paths类型[cc.String]，assets类型[cc.Asset]
2、指定一个资源目录
cc.resources.loadDir(path, callback(err, addets){…})
其中path是一个文件夹路径，assets是[cc.Asset]

十一、触摸事件

触摸事件：touchstart, touchmove, touthend, touchcancel。
鼠标事件：mousedown, mousemove, mouseup, mousewheel, mouseenter, mouseleave

相关的事件类型为：cc.Event.EventTouch
注意：事件中的坐标位置（x, y）是世界坐标。

十二、事件冒泡机制

当一个节点接收到触摸事件时，在处理完之后，该事件会依次上浮到父节点、祖父节点。

注意：

• 同级节点不会接收到此touchstart事件。
• 即使子结点在父节点区域之外，此事件也会传给父节点。
• 可以阻止事件的传递：e.stopPropagation()则此事件到此为止，不会继续后面的传递。

十三、遮罩效果

Widget组件用于辅助定位。

十四、Block Input Events

Block Input Events是一个自带的组件，用于阻止输入事件。

十五、动态创建节点

例如：动态创建一个节点，添加Sprite组件，然后挂在当前节点下面：
let bullet : cc.Node = new cc.Node();
let sprite : cc.Sprite = bullet.addComponent(cc.Sprite);
sprite.spriteFrame = this.bulletIcon;
bullet.parent = this.node;