CocosCreator-常用

基本语法

1.JS

// 代码组件模版类
cc.Class({
    extends:cc.Component, //继承

    properties:{
          // 放置属性、对象
          // 这里的属性、对象会映射到画布的属性检查器中
          pos:cc.p(0,0),
          size:cc.size(0,0),
          test_Node:{//定义，获取操作对象;在属性检查器中拖入要操控的组件
              type:cc.Node,
              default:null,
          },
        FIXED_TIME:0.03,
    },

    onLoad(){
    },

    start(){
        //放置 初始化数据，控制画布初始样式
    },

    update(dt){
        // 画布刷新，放置一些需变动的画布样式/节点
    },
});

生命周期

onLoad

onLoad 回调会在组件首次激活时触发，比如所在的场景被载入，或者所在节点被激活的情况下。在 onLoad 阶段，保证了你可以获取到场景中的其他节点，以及节点关联的资源数据。onLoad 总是会在任何 start 方法调用前执行，这能用于安排脚本的初始化顺序。通常我们会在 onLoad 阶段去做一些初始化相关的操作。

start

start 回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。start 通常用于初始化一些中间状态的数据，这些数据可能在 update 时会发生改变，并且被频繁的 enable 和 disable。

update

游戏开发的一个关键点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中。

lateUpdate

update 会在所有动画更新前执行，但如果我们要在动画更新之后才进行一些额外操作，或者希望在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调。

onDestroy

当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。

onEnable

当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。

onDisable

当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。

2.组件实例化

rope:{
    type:cc.Node,
    default:null,
},
cow_prefab:{
    type:cc.Prefab,
    default:null,
},
cow_root:{
    type:cc.Node,
    default:null,
},
// 组件实例化
var cow = cc.instantiate(this.cow_prefab);
// 添加节点
this.cow_root.addchild(cow);

//从节点下移除
cow.removeFromparent();

3.随机数

//随机取3-5
var time = 3 + Math.random() *2;
//随机0-2
var num = Math.random() *2;

4.间隔性调用方法

get_one_cow(){
    // 在节点下产生一头牛
    var cow = cc.instantiate(this.cow_prefab);
    this.cow_root.addChild(cow);
    // 初始位置
    cow.y = -66; 
    cow.x = 550;
  
    // 隔3-5秒产生一头牛
    var time = 3 + Math.random() * 2;
    this.scheduleOnce(this.get_one_cow.bind(this),time);
}

5.节点下的组件数、组件

hit_test(){ //套牛触发
    for(var I=0;i<this.cow_root.childrenCount;i++){
        // 取节点下的组件
        var cow = this.cow_root.children[I];
        if(cow.x >= 78 && cow.x <= 152){
            return cow;
        }
     }
     return null;
}

6.制作cow组件

1.层级管理器画布下创建空节点cow_root
2.在cow_root下创建空节点cow
3.将节点cow拖至资源管理器自动生成cow组件

7.动作回掉

var end_func = cc.callFunc(function(){
    // 操作代码
  
}.bind(this));

8.顺序动作（按顺序执行）

start(){
      this.is_throwing = false;
 },
//为避免重复按钮点击加一个bool值
on_throw_button_click(){
    if(this.is_throwing){
        return;
    }
    this.rope = -560;
    // 移动
    var m1 = cc.moveTo(0.5,cc.p(0,57));
    var mid_func = cc.callFunc(function(){
          // 判断是否套住牛,m1执行完调用此方法
    }.bind(this));
    
    var m2 = cc.moveTo(0.5,cc.p(0,-500));
    var end_func = cc.callFunc(function(){
        this.is_throwing = false;
    }.bind(this));
    
    // 按顺序调用
    var seq = cc.sequence(m1,m2,end_func);
   // Action
   this.rope.runAction(seq);
}

9.获取脚本对象

// 获取cow脚本对象
var cow_js = cow.getComponent("cow")

// 获取脚本对象中的属性c_type
var cow_type = cow.getComponent("cow").c_type;

引用脚本joy.js

var joy = require("joy");
properties:{
  stick:{
      type:joy,
      default:null,
  }
}

10.场景切换

// 发生mousedown事件，场景一切换到场景二
onLoad(){
    this.node.on('mousedown',function(){
        cc.director.loadScene('scene2');
    })
}

11.倒计时场景切换

properties:{
    time_label:{
        type:cc.Label,
        default:null,
    }
},
onLoad(){
    var timeIn = 5;
    this.schedule(function(){
        timeIn--;
        // js控制其label显示 
        this.time_label.string = timeIn;
        if(timeIn === 0){
            cc.director.loadScene('scene3');
        }
    },1);
}

12.this、this.node

this 指当前组件实例
this.node 指当前组件实例所在的节点

13.代码示例

cc.Class({
    extends: cc.Component,
    properties: {//属性列表
        rope:{ // 节点
            type:cc.Node,
            default:null,
        },

        cow_prefab:{ //自主生成的组件
            type:cc.Prefab,
            default:null,
        },

        cow_root:{
            type:cc.Node,
            default:null,
        },

        rope_img:{ //图片数组
            type:cc.SpriteFrame,
            default:[],
        },

        rope_sprite:{
            type:cc.Sprite,
            default:null,
        },

    },

    // onLoad () {},

    start () { // 初始化
        this.rope.y = -560;
        this.is_throwing = false;
        this.rope_sprite.spriteFrame = this.rope_img[0];
        this.get_one_cow();
    },

    get_one_cow(){//产生一头牛

        console.log('一头牛')
        
        var cow = cc.instantiate(this.cow_prefab);//实例化
        this.cow_root.addChild(cow);//放到节点下

        cow.y = -66;
        cow.x = 550;

        //3-5秒产生一头牛
        var time = 3 + Math.random() * 2;//随机3-5
        this.scheduleOnce(this.get_one_cow.bind(this),time);//隔一段时间调用此方法

    },

    hit_test(){//套牛
        for(var i=0;i<this.cow_root.childrenCount;i++){

             var cow = this.cow_root.children[i];
             if(cow.x >= 78 && cow.x <= 152){
                 return cow;
             }
        }
        return null; 

    },

    on_thorw_button_click(){

        console.log('thoow -click');
        // this - game-scene 当前组件实例
        // this.node - Canvas 组件上的节点

        if(this.is_throwing){
            return;
        }
        this.is_throwing = true;

        this.rope.y = -560;

        this.rope_sprite.spriteFrame = this.rope_img[0];//图片切换成没套住牛的初始图片

        var m1 = cc.moveTo(0.5,cc.p(0,57));

        var mid_func = cc.callFunc(function(){//完成上个方法/语句，进入此方法
            var cow = this.hit_test();
            if(cow){ //套牛成功

                var cow_type = cow.getComponent("cow").c_type;//获取脚本对象 - 属性

                cow.removeFromparent();

                this.rope_sprite.spriteFrame = this.rope_img[cow_type];//图片切换成套住牛的图片
                this.rope.y = 143; //同一个牛头 适应位置
            }

        }.bind(this));

        var m2 = cc.moveTo(0.5,cc.p(0,-560));

        var end_func = cc.callFunc(function(){//方法返回，重置
            
            this.is_throwing = false;

        }.bind(this));

        //顺序调用队列
        var seq = cc.sequence(m1,m2,end_func);

        this.rope.runAction(seq);

    },

    update (dt) {//刷新

    },

});