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的参数模式,

1.  中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点           

2. Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走

3. Fill Range: 填充总量(0, 1];

4. FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;