002--自找麻烦之 cocos creator（简称 ccc ）
这世上只有一种成功，就是能够用自己喜欢的方式度过自己的一生!
1. 项目基本结构
+assets （项目资源的根目录名）
-Texture （存放其他资源）
-Script （存放脚本文件） ccc中脚本名就是组件名，大小写敏感！
-Scene （存放游戏场景）
2. 脚本文件的结构
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!'
},
// 用于初始化
onLoad: function () {
this.label.string = this.text;
},
// called every frame
update: function (dt) {
},
});properties ：组件（挂载到场景中的节点上，提供控制节点的各种功能；这些properties可以直接在属性检查器中设置）
onload ：页面一加载完就执行里面的函数代码
update : 根据时间实时更新，更新回调
3. Prefab（预制资源）
需要重复生成的节点，我们可以将他保存成Prefab(预制)资源，作为我们动态生成节点时使用的模板
比如将Texture文件夹下的一张图片，拖到层级管理器系统即是场景的canvas里面，再从层级管理器拖到Texture文件夹中就是预制资源（预制资源的图标是个灰色正方形）啦（我也觉得这操作有点奇怪）
4. 学习ccc需要对JavaScript非常熟悉
5. 常见基础 API
cc.moveBy("几秒",cc.p("横坐标","纵坐标")) 移动指定的距离
cc.moveTo("几秒",cc.p("横坐标","纵坐标")) 移动到目标位置
cc.easeCubicActionOut() 创建 easeCubicActionOut 缓动对象 ，就是缓慢减速的一种效果
cc.repeatForever("一个序列") 永远地重复一个动作
node.runAction("动作序列名") 执行并返回该执行的动作。该节点将会变成动作的目标。
this.node.addChild("节点名","层级数字"); 添加子节点
"节点名".setPosition(); 设置节点在父节点坐标系中的位置
cc.callFunc 执行回调函数
"节点名".removeFromParent 从父节点中删除该节点
cc.sequence(); 顺序执行动作，创建的动作将按顺序依次运行
6. Scene介绍和基本操作
Scene 每个游戏都会用到场景切换！
Director类 游戏导航仪，控制 初始化，场景切换，游戏暂停继续等等
cc.director.loadScene("场景名"); 加载一个场景
cc.director.preloadScene("场景名"); 预加载场景（比如图片资源比较大就可以用它预先加载）
this.node.on("事件名","函数"); 事件（事件名，function）
this.schedule(function(){},1); 类似js的setTimeout
改变一个标签上面的文字居然是这样的 this.timeLabel.string=4; （说好的和js差不多呢）
模拟手机游戏的场景的canvas要改成 W：640 H: 960
7. 玩家输入事件语法
EventTarget 事件目标是事件触发时，分派的事件对象，Node 是最常见的事件目标， 但是其他对象也可以是事件目标
8. 关闭左下角的fps面板，在场景脚本的文件中 onLoad 的函数中写以下：
cc.director.setDisplayStats(false);=======================================================
腾讯课堂-cocos creator/cocos 2dx 入门 听课笔记
1. 使用ts来做ccc开发新建的脚本文件是这样的: (代码实现一只扇翅膀的小鸟)
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property(cc.Sprite)
bird0: cc.Sprite = null;
@property(cc.Sprite)
bird1: cc.Sprite = null;
@property(cc.Sprite)
bird2: cc.Sprite = null;
@property(cc.Sprite)
bird3: cc.Sprite = null;
@property(cc.Node)
birdParent: cc.Node = null;
@property
text: string = 'hello';
time: number = 0; // 距离上次切换显示的小鸟 流失的时间
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
}
update (dt: number) {
// console.log(dt);
let timeTmp = this.time + dt;
this.time = timeTmp;
if(this.time > 0.5){
if(this.bird0.node.active){
this.bird0.node.active = false;
this.bird1.node.active = true;
}else if (this.bird1.node.active){
this.bird1.node.active = false;
this.bird2.node.active = true;
}else if (this.bird2.node.active){
this.bird2.node.active = false;
this.bird3.node.active = true;
}else if (this.bird3.node.active){
this.bird3.node.active = false;
this.bird0.node.active = true;
}
this.time = 0;
}
let birdY = this.birdParent.y;
this.birdParent.y = birdY - 1;
}
}
// 重点来了，自定义枚举
/**
* 全局变量
* const LEVEL = cc.Enum({EASY:1,HARD:2});
*/
@property({
type:LEVEL
})
enumVa = LEVEL.EASY;2. 帧的概念是这样的： 比如一秒60帧，说明一秒钟画面刷新了60次，帧数为 1/60
3. 节点 Node 是包含 组件的
4. 代码执行遇到return整个函数就都不执行了
5. BMfont 可以用图片数字来代替真实数字（不知道怎么做的）
=============================================================
1. ccc是一个组件化的开发工具
2. Prefab： 预制体，预制资源
// 预（提前）制体
@property(cc.Prefab)//预制体类型
myPrefab:cc.Prefab=null;//需要被克隆的对象
//程序运行后加载对象
start(){
var loadobj =cc.instantiate(this.myPrefab);//将预制体克隆到场景
this.node.addChild(loadobj);//将克隆出的物体作为子物体
//设置物体位置
loadobj.setPosition(cc.p(300,-150));
//5秒之后销毁对象
setTimeout(
function(){ //匿名方法
loadobj.destroy();
}
,5000);
}3. ccc 的生命周期函数：
- onLoad（会在这个组件所在的场景被载入的时候触发，执行最早的方法 只执行一次，在场景加载后立刻执行）
- start（会在组件第一次激活前，也就是第一次执行 update 之前触发，start 在onload 之后执行只执行一次）
- update（游戏开发一个关键是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中，会在所有动画更新前执行）（update 可以不带参数 参数的意思是游戏一帧执行的时间 大概为0.017秒 数值不固定）
- lateUpdate（动画更新后进行额外操作，在update执行之后马上执行 ，需要用到 lateUpdate 回调）
- onDestroy（当组件调用了 destroy()，会在该帧结束被统一回收，此时会调用 onDestroy 回调。执行最晚的方法，物体被销毁之前执行）
- onEnable（当组件的 enabled 属性从 false 变为 true 时，会激活 onEnable 回调。倘若节点第一次被 创建且 enabled
为 true，则会在 onLoad 之后，start 之前被调用。脚本启用会执行）- onDisable（当组件的 enabled 属性从 true 变为 false 时，会激活 onDisable 回调，脚本禁用会执行）
4. Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！
5. 通过学习官网demo摘星星总结开发流程：
- 找好游戏相关资源，包括图片，音频，位图字体文件等
- 新建游戏场景（几个游戏画面就几个场景）（往场景添加背景，主角等）
- 给你的主角写脚本（在 properties 中定义主角会用到的变量--想象主角会做什么动作，如主角会一直跳，我们还可以控制他左右走，跳有高度，也有跳一次所需 时间，左右走有速度，加速度等）
properties： ｛
｝- 编写主角动作代码（主角自动执行的动作，如跳跃，为跳跃写一个方法），既然是自动执行就可以写在生命周期函数onload方法里面初始化调用；控制移动的再写一个方法，监听我们的按键，设置速度之类的属性
- 重复生成的东西就要做成预制资源，为这个预制资源新建一个脚本文件
- 添加游戏控制脚本，主逻辑包括计分，游戏开始，游戏失败等逻辑，一般绑在场景的canvas上面
- 得分一般都是一个label标签，再价格位图字体，然后主逻辑脚本继续写得分逻辑
- 最后加入音效
=================================================
1. 在场景的canvas的属性检查器中找到Group点击编辑可以分组配置碰撞检测
2. 添加物理边缘步骤（点击节点-添加组件-物理-collider-Box）如果边界是静止的吗，要在Rigidbody--type--static
3. 什么是ccc组件化开发： 节点 + 组件1 + 组件2 + 组件3 。。。 （也就是一个节点带着不同功能的组件）（开发一个功能，都是从组件开始的）
a: 创建一个组件类
b: new 组件类出来
c: 管理这些组件实例
(1): 运行场景的时候初始化:
遍历场景里面的每个节点,
遍历节点上面的每个组件实例;
调用 组件实例.onLoad, --> 组件实例在加载的时候调用;
调用 组件实例.start -->组件实例在开始运行之前调用一次;
(2): 每次游戏刷新的时候
4. 在一个节点操作 添加我们自己定义的脚本组件原来就是 实例化一个类
5. 开启物理引擎:
cc.director.getPhysicsManager().enabled = true;开启调试状态/模式（给指定物理系统需要绘制哪些调试信息）：
var draw = cc.PhysicsManager.DrawBits;
cc.director.getPhysicsManager().debugDrawFlags = draw.e_shapeBit|draw.e_jointBit;物理引擎的脚本要挂载到根节点上，然后一定要在该脚本的onload()方法中所有的动作初始化前开启物理引擎。
6. 弧度转角度： 角度值 = 弧度值*180 / Math.PI
7. 碰撞检测：
- onBeginContact: 碰撞开始被调用
- onEndContact: 碰撞结束被调用
- onPreSolve: 碰撞接触更新前调用
- onPostSolve: 碰撞接触更新后调用
- 参数：contact 碰撞信息 ，selfCollider 自己的碰撞器 ， otherCollider 撞到的谁
8. 微信打包发布：
- 发布微信的话 canvas 节点上只能选择 Fit Width ，Fit Height 不能选
- 项目--构建发布--发布平台（Wechat Game），MD5 Cache 选上，设备方向（竖屏选Portrait，横屏选landscape），appid（自己填自己的）--构建--运行（就会打开微信开发工具）--预览--扫描二维码玩游戏
- cocos creator--偏好设置--原生开发环境--wechatGame程...(选择微信开发工具的地址exe的位置)
===============================================
1. moveBy：移动指定的距离
var jumpUp = cc.moveBy(this.jumpTimes,cc.p(0,this.jumpHeight));2. cc.sequence： 顺序执行动作，创建的动作将按顺序依次运行
var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed);3. runAction： 执行并返回该执行的动作。该节点将会变成动作的目标。
this.node.runAction(seq);4. getComponent: 获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。
传入参数也可以是脚本的名称。
var HeroPlayer = require("HeroPlayer");
...
var hero = self.player.getComponent(HeroPlayer);5. 除了微信小游戏以外，其他类型的小游戏 Canvas 中的Fit Height与Fit Width 一定要勾选上（为了适配）
6. cc.winSize: 为当前的游戏窗口的大小。
7. 获取一张图片的宽度：
this._width = this.groundImg.spriteFrame.getRect().width;8. 定时器：参数是回调函数和时间
this.schedule(function(),this.move_time)9. 写动画（帧动画，例如 像素鸟的小鸟不断煽动翅膀）
动画编辑器--添加animation组件--新建animationClip（存储在anim文件夹里面）--点击动画编辑器的左上角编辑按钮--属性列表点击 add property---选择 cc.Sprite.spriteFrame--点 “+” 号 -- 拉一帧点一次 “+” 号 -- 替换帧对应的图片--wrapMode选择Loop--点击左上角的播放按钮--保存--关闭--新建脚本--脚本拉到属性检查器--动画文件拉到对应位置--playOnload打钩--预览
10. 获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。传入参数也可以是脚本的名称：
var pipeUp = cc.instantiate(this.pipePrefabs[0]);
pipe.getComponent('Pipe').init(0);11. 返回父节坐标系下的轴向对齐的包围盒：（包围后是以盒的左下角为中心的）
var boundingBox = node.getBoundingBox();12. 获取与设置本地 localstorage 的值：
cc.sys.localStorage.getItem('name');
cc.sys.localStorage.setItem('name',score);13. 动画效果（例如为得分文字添加小动画）：
- scaleTo 将节点大小缩放到指定的倍数
- sequence 顺序执行动作，创建的动作将按顺序依次运行。
var action1 = cc.scaleTo(this.scoreTime,1.1,0.6);
var action2 = cc.scaleTo(this.scoreTime,0.8,1.2);
var action3 = cc.scaleTo(this.scoreTime,1,1);
//播放形变动画
this.curScoreText.node.runAction(cc.sequence(action1,action2,action3));========================================
1. 任何一个节点都会有一个 cc.Node（cc.Node是场景树中的节点对象）；
2. cc.Node.rotation: 旋转，顺时针为正，数学逆时针为正；
3. cc.Node.anchor: 锚点，左下角(0,0)，右上角(1,1)，可以超过这个范围；
4. 在代码组件里面，使用 this.node 访问这个组件实例挂载的节点对象；
5. cc.Node.children/childrenCount: 获得孩子节点数组、孩子节点数量；
6. cc.Node场景树相关方法：
- getChildByName： 通过名称获取节点的子节点
-
new cc.Node()：代码中创建一个节点
-
setPosition/getPosition: 获取或设置节点的相对位置
-
cc.find(): 方便，不通用, 消耗
7. 触摸事件的类型：START, MOVED, ENDED(物体内弹起), CANCEL(物体外弹起);
- cc.Node.EventType.TOUCH_START
- cc.Node.EventType.TOUCH_MOVE
- cc.Node.EventType.TOUCH_END
- cc.Node.EventType.TOUCH_CANCEL
8. 监听触摸事件： node.on(类型, callback, target(回掉函数的this), [useCapture]);
9. 关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]);
4. targetOff（target）：移除所有的注册事件；
5. 触摸事件中回调函数的参数t：t.getLocation() 获取当前触点位置 ； t.getDelta() 获取触点距离上一次事件移动的距离对象，对象包含 x 和 y 属性（也就是距离上一次触摸变化了多少）
//在触摸移动的事件类型中的回调函数
var delta = t.getDelta();
this.node.x += delta.x;
this.node.y += delta.y;
//以上代码实现节点物体随着你点击移动的位置移动6. stopPropagationImmediate: 立即停止当前事件的传递，事件甚至不会被分派到所连接的当前目标;
7. 监听键盘事件：cc.SystemEvent.on(type, function, target, useCapture);监听的时候，我们需要一个cc.SystemEvent类的实例，我们有一个全局的实例cc.systemEvent,小写开头（实际使用时小写开头的）
- cc.SystemEvent.EventType.KEY_DOWN 按键按下;
- cc.SystemEvent.EventType.KEY_UP 按键弹起;
8. 自定义事件：
- 监听:this.node.on(“自定义事件名称”, function, target, useCapture);
- 自派送: emit(“事件名称”, [detail]); 只有自己能够收到;
- 冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡传递));
start: function() {
// 派发者,只能传递给自己,不会向上传递
this.node.emit("pkg_event", {blake: "huang"});
// end
// 派送者，不只是发给自己，发给我们这个体系;
// true/false, true向上传递, false不向向上传递
var e = new cc.Event.EventCustom("pkg_event", true);
e.detail = {blake: "huang"};
this.node.dispatchEvent(e);
},9. ccc坐标系：
-
相对(节点)坐标系,两种相对节点原点的方式(1) 左下角为原点, (2) 锚点为原点(AR)
-
节点坐标和屏幕坐标的相互转换; 我们到底使用哪个？通常情况下带AR；
// 节点坐标转到屏幕（世界）坐标 cc.p(0, 0)
var w_pos = this.node.convertToWorldSpace(cc.p(0, 0)); // 左下角为原点的 cc.p(430, 270)
console.log(w_pos);
w_pos = this.node.convertToWorldSpaceAR(cc.p(0, 0)); // 锚点为原点 cc.p(480, 320)
console.log(w_pos);
// end
var w_pos = cc.p(480, 320);
var node_pos = this.node.convertToNodeSpace(w_pos);
console.log(node_pos); // cc.p(50, 50)
node_pos = this.node.convertToNodeSpaceAR(w_pos);
console.log(node_pos); // cc.p(0, 0) // 获取节点的包围盒, 相对于父亲节点坐标系下的包围盒
var box = this.node.getBoundingBox();
console.log(box);
// 世界坐标系下的包围盒
var w_box = this.node.getBoundingBoxToWorld();
console.log(w_box);
this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
var w_pos = t.getLocation();
var pos = this.node.convertToNodeSpaceAR(w_pos);
console.log(pos);
pos = this.node.convertTouchToNodeSpaceAR(t);
console.log("====", pos);
}, this);
// 我要把当前这个sub移动到世界坐标为 900, 600;
//
// 把世界坐标转到相对于它的父亲节点的坐标
var node_pos = this.node.parent.convertToNodeSpaceAR(cc.p(900, 600));
this.node.setPosition(node_pos); // 相对于this.node.parent这个为参照物,AR为原点的坐标系
// end
// 获取当前节点的世界坐标;
this.node.convertToWorldSpaceAR(cc.p(0, 0));10. Action的使用：
- Action类是动作命令，我们创建Action,然后节点运行action就能够执行Action的动作；
- Action分为两类: (1) 瞬时就完成的ActionInstant, (2) 要一段时间后才能完成ActionIntervial;
- cc.Node runAction: 节点运行action;
- cc.moveTo, cc.moveBy To: 目标 By: 变化
MoveTo：(x, y) → (x1, y1)
MoveBy：(x, y) → (x + x1, y + y1)
-
cc.sequnce, cc.repeat, cc.repeatForever
-
Action easing(缓动的方式): 加上缓动特效, cc.easeXXXXX查看文档设置自己想要的缓动对象
-
stopAction: 停止运行action
-
stopAllActions: 停止所有的action;
onLoad: function () {
// move
// var mto = cc.moveTo(1, cc.p(100, 100)); // cc.moveTo(1, x, y);
// this.node.runAction(mto);
// var mby = cc.moveBy(1, cc.p(100, 100)); // cc.moveBy(1, x, y); 变化多少
// this.node.runAction(mby);
// rotate
// var rto = cc.rotateTo(1, 180); // 旋转到180度; rotation 180;
// this.node.runAction(rto);
// var rby = cc.rotateBy(1, 75); // 在原来的基础上，变化75，可正，可负
// this.node.runAction(rby);
// scale
// this.node.scale = 2;
// var sto = cc.scaleTo(1, 1.1); // 到1.1倍
// this.node.runAction(sto);
// this.node.scale = 2;
// var sby = cc.scaleBy(1, 1.1); // 原来的基础，变化1.1 * 2
// this.node.runAction(sby);
// opactify
// var fin = cc.fadeIn(1);
// this.node.opacity = 0;
// this.node.runAction(fin);
// var fout = cc.fadeOut(1);
// this.node.runAction(fout); // 物体还是在的的
// var fto = cc.fadeTo(1, 128);
// this.node.runAction(fto);
// function Action
/*var func = cc.callFunc(function() {
console.log("call Func actin!!!!!");
}.bind(this));
console.log("begin ####");
this.node.runAction(func);
console.log("end ####");*/
// 移动到 目的地，后，隐藏这个物体怎办？ // 命令清单, [Action1, A2, A3],
// seq Action
/*var m1 = cc.moveTo(1, 100, 100);
var fout = cc.fadeOut(0.5);
var seq = cc.sequence([m1, fout]);
this.node.runAction(seq);*/
// 一个节点可以同时运行多个Action, 一边，一边
/*var m1 = cc.moveTo(1, 100, 100);
var fout = cc.fadeOut(0.5);
this.node.runAction(fout);
this.node.runAction(m1);*/
// 不断的放大缩小
/*var s1 = cc.scaleTo(0.8, 1.1);
var s2 = cc.scaleTo(0.8, 0.8);
var seq = cc.sequence([s1, s2]);
var rf = cc.repeatForever(seq);
this.node.runAction(rf);*/
// 匀速的飞过，傻了, 缓动
// 回弹
/*this.node.y = 0;
var m = cc.moveTo(1, 100, 0).easing(cc.easeBackOut());
this.node.runAction(m);*/
/*var r = cc.rotateBy(3, 360).easing(cc.easeCubicActionOut());
var rf = cc.repeatForever(r);
this.node.runAction(rf);
// this.node.stopAction(rf);
this.node.stopAllActions();*/
// end
// 移动了到100， 0，删除
/*var m = cc.moveTo(1, 100, 0);
var end_func = cc.callFunc(function() {
this.node.removeFromParent();
}.bind(this));
var seq = cc.sequence([m, end_func]);
this.node.runAction(seq);*/
// cc.Delay,
var d1 = cc.delayTime(3);
var fout = cc.fadeOut(0.5);
var end_func = cc.callFunc(function() {
this.node.removeFromParent();
}.bind(this))
var seq = cc.sequence([d1, fout, end_func]);
this.node.runAction(seq);
},11. cc.Component属性（组件类，所有组件的基类）
var my_item = require("my_item");
...
properties: {
//基本数据类型，数，bool，字符串，color，pos，size
speed: 100,
is_debug: false,
url_str: "",
color: cc.color(0,0,0,255),
pos: cc.p(0,0),
size: cc.Size(100,100)
// 系统的组件
sprite_item: {
type: cc.Sprite,
default: null, // null/[]
}
// 组件的代码组件
custom_comp: {
type: my_item,
default: null, // null/[]
},
}12. cc.Sprite: 配置图片的SIZE_MODE
-
CUSTOM 大小和CCNode的大小一致;
-
RAW 原始的图片大小;
-
TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;
trim: 是否裁剪掉 图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明 度,动画，不至于抖动;
13. Filled模式（游戏中道具的时间进度显示条、个性化时间进度条案例等应用，比较常用，最好掌握）
- 配置Filled模式, 设置为Radius参数
- 配置Radius的参数模式,
- 中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点
-
Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走
-
Fill Range: 填充总量(0, 1];
-
FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;