美文网首页
Cocos Creator中Component使用详解

Cocos Creator中Component使用详解

作者: cocos游戏开发 | 来源:发表于2020-09-08 16:57 被阅读0次

    序言

    在Cocos Creator游戏开发中,组件是使用是非常频繁,对于组件的入口函数、常用属性、组件的操作等,必须做到非常熟悉。

    一、组件入口函数

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

    
    1.  `    onLoad () {`
    
    2.  `        console.log("onLoad is called!");`
    
    3.  `    }`
    
    5.  `    start () {`
    
    6.  `        // this表示当前组件实例,this.node 当前组件实例挂载的节点,父类Component的属性`
    
    7.  `        console.log("start is called!", this, this.node, this.node.name);`
    
    8.  `    }`
    
    
    
    1.  `    // dt:每次更新的时间间隔`
    
    2.  `    // dt不是固定的值 |---|------|--|`
    
    3.  `    // dt与设备帧频有关FPS:frame per second 60FPS,1/60=0.0167s`
    
    4.  `    // 使用注意事项:60FPS 0.0167s, 30FPS 0.033s`
    
    5.  `    // [1] 60×50,30×50,保证在不同设备运行效果一致`
    
    6.  `    // [2] 保证在同一设备上匀速运动`
    
    7.  `    // [3] 通过dt累计时间,做到定时周期运动`
    
    8.  `    update (dt) {`
    
    9.  `        console.log("update,dt=", dt);`
    
    10.  `        this.player.x += this.speed * dt;`
    
    11.  `    }`
    
    

    二、cc.Component属性

    1: 组件类: 所有组件的基类; 2: node: 指向这个组件实例所挂载的这个节点(cc.Node); 3: name: 这个组件实例所挂载的节点的名字<组件的名字>; 4: properties: { } 属性列表; (1) name: value, 数,bool, 字符串; (2) 位置,颜色, 大小: cc.v2(0, 0), cc.color(0, 0), cc.size(100, 100) (3) 组件:{
    type: 组件类型, 系统类型,也可以require自己编写的组件类型 default: null or []

    (4)其他: 打开cocos creator源码,找到参考,然后移动到代码里面;

    
    1.  `import CustomComponent from "./CustomComponent";`
    
    2.  `const {ccclass, property} = cc._decorator;`
    
    4.  `@ccclass`
    
    5.  `export default class GameMgr extends cc.Component {`
    
    7.  `    @property({type:cc.Integer, tooltip:"方块运动速度",displayName:"速度",slide:true,step:5,min:50, max:200,})`
    
    8.  `speed : number = 50;`
    
    10.  `    @property({type:cc.Node, tooltip:"要运动的节点",})`
    
    11.  `player : cc.Node = null;`
    
    13.  `    @property({type:[cc.SpriteFrame], tooltip:"图片数组"})`
    
    14.  `spriteFrame : Array<cc.SpriteFrame> = [];`
    
    16.  `//label : cc.Label = null;  // 查API文档源码,学习`
    
    18.  `    @property({type:CustomComponent, tooltip:"自定义的组件类"})`
    
    19.  `    customComp : CustomComponent = null;`
    
    

    通过官网API查看Label源码,以及通过Cocos Creator编辑器比对,学习,方法如上。

    三、组件添加查找删除

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

    四、Shedule定时器操作

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

    
    1.  `        console.log("=======fenggexian========");`
    
    2.  `        this.schedule(function(){`
    
    3.  `            console.log("每1秒执行一次,共执行三次,延迟2秒后执行");`
    
    4.  `        }, 1, 20, 2);    // 执行3+1次`
    
    6.  `        // this.scheduleOnce(function(){`
    
    7.  `        //     console.log("定时执行一次,延迟1秒后执行!");`
    
    8.  `        // }, 1);`
    
    10.  `        let callback = function(){`
    
    11.  `            console.log("回调函数");`
    
    12.  `        };`
    
    13.  `        this.schedule(callback, 1, cc.macro.REPEAT_FOREVER, 2);`
    
    14.  `        //this.unschedule(callback);`
    
    15.  `        //this.unscheduleAllCallbacks();`
    
    17.  `        // 特定的时间之后再取消定时任务`
    
    18.  `        this.scheduleOnce(function(){`
    
    19.  `            //console.log("5秒后取消callback定时任务");`
    
    20.  `            //this.unschedule(callback);`
    
    21.  `            console.log("5秒后取消所有定时任务");`
    
    22.  `            this.unscheduleAllCallbacks();`
    
    23.  `        }.bind(this), 5);`
    
    

    相关文章

      网友评论

          本文标题:Cocos Creator中Component使用详解

          本文链接:https://www.haomeiwen.com/subject/bokjektx.html