cocos入门4：生命周期、节点操作

1、生命周期

let flagNo = 0
cc.Class({
    extends: cc.Component,

    properties: {
    },
    //最先调用
    onLoad () {
        cc.log('on load')
    },
    //当组件enable/active属性从false变为true时调用
    //节点第一次创建，且enable为true会在onload之后，start之前调用
    onEnable(){
        cc.log('on enable')
    },
    //第一次执行update之前触发
    //通常用于初始化一些中间状态数据，这些数据可能在update时发生变化，且频繁enable和disable
    start () {
        cc.log('start')
    },
    //每一帧渲染前调用
    update (dt) {//dt表示当前帧与上一帧之间间隔的时间
        cc.log( 'update')
        this.node.y += 1
        flagNo ++
        if( flagNo > 60 * 5){
            //this.node.active = false
        }
        if( flagNo > 60 * 8){
            this.node.destroy()
        }
    },
    //在update之后调用
    lateUpdate(dt){
        cc.log( 'late update')
        this.node.rotation += 4
    },
    //节点active/enable属性从true变为false时触发
    onDisable(){
        cc.log('on disable')
    },
    //所有节点调用了destory()，则会进行onDestroy回调
    onDestroy(){
        cc.log('on destroy')
    },
});

2、获取子节点，并设置属性

cc.Class({
    extends: cc.Component,
    properties: {},
    start () {
        //获取节点
        let node = this.getComponent(cc.Label)
        node.string = "你好呀"
    },
});

3、通过属性检查器设置 节点

3.1、通过属性检查器设置组件

Npc组件与NpcMuscle组件

Npc节点

NpcMuscle节点

4、查找查找子节点

代码展示

cc.Class({
    extends: cc.Component,
    properties: { },
    start () {
        let childrens = this.node.children
        for( let i = 0; i < childrens.length; i++){
            let child = childrens[i]
            cc.log( '子节点：', child.name)
        }

        //查找单个子节点
        let childByName = this.node.getChildByName("Background")
        cc.log("单个子节点查找：", childByName.name)

        let subNode = cc.find("Background/NpcMuscle", this.node)
        cc.log("cc.find 查找子节点", subNode.name)
        
        let SubNode = cc.find("Canvas/Background/BackgroundSmall/SubNode")
        cc.log("绝对路径",SubNode.name)
    },
});

节点结构

打印结果

5、节点和组件常用操作

5.1、关闭/激活节点

代码关闭

let SubNode = cc.find("Canvas/Background/BackgroundSmall/SubNode")
SubNode.active = false
this.node.active = false

编辑器关闭

5.2、更改父节点

通过创建、销毁节点的方式创建出新节点后，要为节点设置一个父节点才能正确完成节点初始化

let CanvasNode = cc.find('Canvas')
//更改父节点方式1
this.node.parent = CanvasNode

//更改父节点方式2
//参数false表示不清空节点中绑定的事件和action等
this.node.removeFromParent(false)
CanvasNode.addChild( this.node)

5.3、获取子节点

//this.node.children返回节点的所有子节点数组
//this.node.childrenCount返回节点的子节点数量
let backNode = cc.find('Canvas/Background')
cc.log( '子节点数量', backNode.childrenCount)
cc.find('Canvas/Background/Npc').removeFromParent()
cc.log( '子节点数量', backNode.children.length)

5.4、更改节点的变换（位置、旋转、缩放】尺寸）

5.4.1、更改节点位置

下方3种方法等价
方法1：直接设置x和y属性

this.node.x = 100
this.node.y = 100

方法2：使用setPosition方法：

this.node.setPosition( 100, 50)
this.node.setPosition( cc.v2( 100, 50))

方法3：直接设置position

this.node.position = cc.v2( 100, 50)

5.4.2、更改节点旋转

设置了旋转后，子节点也会跟着旋转
方法1：直接设置rotation

this.node.rotation = 90

方法2：

this.node.setRotation(90)

5.4.3、更改节点缩放

方法1：

this.node.scaleX = 2
this.node.scaleY = 2

方法2：

this.node.setScale( 2)
this.node.setScale( 2, 2)

5.4.4、更改节点尺寸

方法1：

this.node.setContentSize( 200, 200)
//或
this.node.setContentSize( cc.size(10, 10))
//或
this.node.width = 100
this.node.height = 100

5.4.5、更改节点锚点

方法：

this.node.anchorX = 1
this.node.anchorY = 0.5
//或
this.node.setAnchorPoint(0, 0.5)

5.4.6、更改节点颜色和不透明度

//设置颜色
this.node.color = cc.Color.RED
//设置不透明度，值越大越不透明，最大255
this.node.opacity = 35

5.4.7、常用组件接口

this.node //获取该所属节点实例
this.enabled//是否每帧执行该组件的update方法，同时也用来控制渲染组件是否显示
update(dt)//作为组件的成员方法，在组件的enabled为true时，其中的代码会每帧执行
onLoad()//组件所在节点进行初始化时（节点添加到节点树时）执行
start()//会在该组件第一次update之前执行，通常用于需要在所有组件的onLoad初始化完毕后执行的逻辑

6、创建节点

6.1、创建节点

cc.Class({
    extends: cc.Component,
    properties: {
    },
    start () {
        let self = this
        //加载图片，图片必须放在assets/resources文件夹下
        cc.loader.loadRes( 'image_name', cc.SpriteFrame, function(err, spriteFrame){
            let node = new cc.Node("sprite")
            let sp = node.addComponent(cc.Sprite)
            sp.spriteFrame = spriteFrame
            node.parent = self.node
            node.setContentSize(30, 30)
        })
    },
});

6.2、复制节点

cc.Class({
    extends: cc.Component,
    properties: {
        target: {
            default: null,
            type: cc.Node,
        }
    },
    start () {
        //复制节点（此处target节点已经在cocos creator编辑器中进行了绑定
        let node = cc.instantiate( this.target)
        node.parent = this.node
        node.setPosition( -100,0)
    },
})

6.3、创建预制体节点

cc.Class({
    extends: cc.Component,
    properties: {
        target: {
            default: null,
            type: cc.Prefab,//预制体类型
        }
    },
    start () {
        //复制节点（此处target节点已经在cocos creator编辑器中绑定了一个预制体
        let node = cc.instantiate( this.target)
        node.parent = this.node
        node.setPosition( -100,0)
    },
})

6.4、销毁节点

this.node.destroy()或者removeFromParent方法都可以删除节点
调用removeFromParent后，节点不一定能完全从内存中释放，可能因为一些逻辑上的问题，导致程序依然引用了该对象。

因此如果一个对象不再使用了，请直接调用destroy而不是removeFromParent。destroy不但会激活组件上的onDestroy还会降低内存泄漏的几率，同时减轻内存泄漏的后果。

总之，若节点不再使用，destroy就对了，不需要removeFromParent也不需要设置parent为null。

cc.Class({
    extends: cc.Component,
    properties: {},
    start () {
        setTimeout( function(){
            this.node.destroy()
        }.bind(this), 3000)
    },
})