6.cc.Component组件类的基本使用

1. 组件入口函数

onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点，以及节点关联的资源数据
start: 也就是第一次执行 update 之前触发
update(dt):组件每次刷新的时候调用,距离上一次刷新的时间(会在所有画面更新前执行)
lateUpdate(dt) 刷新完后调用(会在所有画面更新后执行);
onEnable: 启用这个组件的时候调用;
onDisable: 禁用这个组件的时候调用;
onDestroy: 组件实例销毁的时候调用;

 

2. cc.Component属性

组件类: 所有组件的基类;
node: 指向这个组件实例所挂载的这个节点(cc.Node);
name: 这个组件实例所挂载的节点的名字<组件的名字>;
properties:

 

3. 组件添加查找删除

addComponent(组件的类型): 向节点上添加一个组件实例, 返回添加好的组件实例;
getComponent(组件类型): 查找一个为指定类型的组件实例(如果有多个，第一个匹配);
getComponents(组件类型): 查找这个节点上所有这个类型的组件实例;
    [inst1, inst2, inst3, ...]
getComponentInChildren(组件类型):  在自己与孩子节点里面查找;
getComponentsInChildren (组件类型): 在自己与孩子节点里面查找;
destroy(): 从节点中删除这个组件的实例;

 

4. Shedule定时器操作

sheduleOnce(函数, time): time秒后启动一次定时器;
schedule(函数, time, 次数,  多长时间后开始); 执行的次数为(次数 + 1)， cc.macro.REPEAT_FOREVER
unschedule(函数); // 取消这个定时器操作;
unscheduleAllCallbacks  取消所有的定时器操作;
注意，如果节点或组件没有激活是不会调用的;

 

例:game_scence.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

var my_item = require("my_item");

//返回一个构造函数  继承了cc.Component
//代码组件也有cc.Compoent组件的方法
//cc.Componet,有固定的入口函数
cc.Class({
    extends: cc.Component,

    //属性列表
    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        //基本数据类型
        speed: 100,
        is_debug: false,
        url_str: "",
        color: cc.color(0, 0, 0, 255),
        pos: cc.v2(0, 0),
        size: cc.size(100, 100),
        //end

        //系统组件
        sprite_item: {
            type: cc.Sprite,
            default: null, // null / []
        },

        sprit_arr: {
            type: cc.Sprite,
            default: [],
        },
        //end

        //自定义代码组件
        custom_comp: {
            type: my_item,
            default: null,
        },

    },

    // LIFE-CYCLE CALLBACKS:

    //组件在加载的时候运行
    //可以onload中访问场景的节点和数据,这时候已经准备好了
    onLoad () {
        console.log("--------- onload");

        //this 为当前组件的实例
        //this.node 为当前组件所挂在的节点对象
        console.log(this.node);

        console.log(this.name, this.node.name);

    },

    //组件在第一次update之前调用
    start () {
        console.log("--------- start");

        //添加组件 "组件代码的名字"
        //返回挂上组件的实例
        var com_inst = this.addComponent("my_item");
        this.node.addComponent("my_item");
        //end

        //查找组件实例
        com_inst = this.getComponent("my_item");  //返回一个
        var com_array = this.getComponents("my_item");  //返回组件列表  数组[]
        console.log(com_inst, com_array);
        //end

        //删除一个组件
        //this.destory();

        //启动定时器  节点或者组件必须是激活状态  被隐藏的节点无法启动定时器
        this.scheduleOnce(function() {  //只会触发一次
            //console.log("scheduleOnce called!!!!");
        }.bind(this), 5);

        //schedule(函数, 多长时间调用一次, 次数(永远), 隔多少秒之后开始执行schedule)
        //5秒钟以后,每隔一秒, 调用6+1次
        this.schedule(function() {
            console.log("schedule----------");
        }, 1, 6, 5);

        this.schedule(function() {
            console.log("schedule+++++++++++");
        }, 1, cc.macro.REPEAT_FOREVER, 5);

        this.scheduleOnce(function() {  //只会触发一次
            console.log("cancel all sch!!!!!!!!");
            //取消所有定时器
            this.unscheduleAllCallbacks();
        }, 30);

        //只取消一个定时器 unschedule(函数对象)
        var callBack = function() {
            console.log("-------------------------------");
        };
        this.schedule(callBack, 0.5)
        this.scheduleOnce(function() {
            this.unschedule(callBack);
        }, 5);
        //end

    },

    //游戏每次刷新的时候调用,dt距离上一次刷新的时间
    update (dt) {
        //console.log("--------- update", dt);
    },

    //不常用
    lateUpdate: function(dt) {

    },

    //组件被激活时调用
    onEnable: function() {

    },

    //组件被禁止时调用
    onDisable: function() {

    },

    //组件被销毁时调用
    onDestroy: function() {

    },

});

my_item.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    // update (dt) {},
});

工程截图