Cocos Creator 基础概念和用法敲录

Cocos Creator的特性：组件化 脚本化 数据驱动模型

1. 拿到当前脚本组件所依附的节点：this.node;

2. 拿到当前脚本组件：this

3. 获取其它节点如取得节点的父节点：this.node.parent;

4. 获取其它节点如取得子节点数组：this.node.children;

5. 通过节点名获取子节点：this.node.getChildByName('node-1'); //子节点

6. 动画(cocos creator编辑)/动作(代码this.node.runAction())的使用：

     eg1: 移动 this.node.runAction(cc.MoveTo(duration, posx, posy)); 或者 this.node.runAction(cc.moveTo(duration, cc.v2(posx, posy)));  ( 配套动画还有 cc.moveBy() ,类似还有cc.scaleTo/cc.scaleBy、 cc.rotateTo/cc.rotateBy、cc.skewTo/cc.skewBy、cc.jumpTo/cc.jumpBy、 cc.fadeTo/cc.fadeIn/cc.fadeOut、cc.delayTime 等 )

        eg2: 渐变 this.node.runAction(cc.fadeIn(duration));

        eg3: 序列动画 this.node.runAction(cc.sequence( cc.fadeOut(1), /*cc.removeSelf(true)传true才彻底从场景中删除，false删除了节点引用 还是存在于场景中 */ cc.callFunc(this.callBack,this, {hello:'world'})));

                callBack:function(targetNode, arg){ // targetNode是this.node  arg是{hello:'world'} }

        eg4: 缓慢动作 cc.moveTo(1,cc.v2(10,10)).easing(cc.EaseElastic)    //cc.EaseElastic 弹性缓动作基类，类似有很多，参考文档

7. 事件 通过节点on来注册监听事件 off来关闭监听事件 两者参数必须完全一致

 this.node.on('mousedown', function ( event ) {
      console.log('Hello!');
    });

onEnable: function () {
    this.node.on('foobar', this._sayHello, this);
  },

  onDisable: function () {
    this.node.off('foobar', this._sayHello, this);
  },

    发射事件：我们可以通过两种方式发射事件：emit 和 dispatchEvent。两者的区别在于，后者可以做事件传递。 我们先通过一个简单的例子来了解 emit 事件：只有执行 this.node.emit后才会执行this.node.on，所以叫发射

cc.Class({
  extends: cc.Component,

  onLoad: function () {
    this.node.on('say-hello', function (event) {
      console.log(event.detail.msg);
    });
  },

  start: function () {
    this.node.emit('say-hello', {
      msg: 'Hello, this is Cocos Creator',
    });
  },
});

例子1：

cc.Class({

extends: cc.Component,

properties: {

node1 : cc.Node,

node2 : cc.Node,

},

// LIFE-CYCLE CALLBACKS:

onLoad:function () {

//this.node相当于事件监听者

this.node.on('发射', this.node1Event, this.node1);

this.node.on('发射', this.node2Event, this.node2);

//发射事件

this.node.emit('发射');

//可传参数：this.node.emit('发射'，{hello:world});

},

start:function () {},

// update (dt) {},

node1Event: function() {

//根据上述绑定 此处的this是this.node1对象 而不是 this.node对象

this.runAction(cc.moveTo(1,cc.v2(50,50)));

},

/* 传参事件写法

node1Event: function(arg) {

//根据上述绑定 此处的this是this.node1对象 而不是 this.node对象

this.runAction(cc.moveTo(1,cc.v2(50,50)));

//可以打印显示参数详情

cc.log(arg.detail);

},

*/

node2Event: function() {

//根据上述绑定 此处的this是this.node2对象 而不是 this.node对象

this.runAction(cc.scaleTo(0.5, 0.5, 0.5));

},

});

例子2：

制作鼠标点击，精灵则跟着响应到点击处：坐标转换，this.node.convertToNodeSpaceAR(arg.getLocation()); 

坐标原点以convertToNodeSpaceAR的调用者锚点为参考！所以一般情况要以节点树的最高层(尺寸是整个设计尺寸如Canvas)作为调用者。

查找节点树中的某个精灵：cc.find();  eg:cc.find('node-1/node-3<cc.Sprite>'); 这样就可以找到node-1下面node-3里面的精灵组件

cc.find('Canvas').on('touchstart', this.touchStartCallBack, this);

touchStartCallBack: function(arg){ 

    //我此处例子this.node.parent就是Canvas节点

    let locationOfThisNodeParent = this.node.parent.convertToNodeSpaceAR(arg.getLocation());

    this.node.position = locationOfThisNodeParent;

}

8. 节点的两种删除：this.node.removeFromParent(); //仅仅把节点从父节点移除 还存在于场景，身上也会绑定原有组件

                        this.node.destroy(); //彻底把节点从场景中移除

9. 动态添加节点到场景：

     let newnode = new cc.Node();

    newnode.name = 'nodeTest';

    this.node.addChild(newnode); //这样在当前this.node下就创建了新的空的节点 并添加到节点树中

    代码动态给节点添加组件：

    let sprite = this.node.addComponent('cc.Sprite');  //动态组件添加

    this.node.removeComponent('cc.Sprite');    //动态组件移除

    this.node.getComponent('cc.Sprite');    //动态组件获取

10. 预制体Prefreb

11. 定时器

12. 全局变量