天天看點

Cocos Creator 記錄三-生命周期

更改節點位置

分别對 x 軸和 y 軸坐标指派:

this.node.x = ;
this.node.y = ;
           

使用 setPosition 方法:

this.node.setPosition(, );
this.node.setPosition(cc.v2(, ));
           

設定 position 變量:

以上兩種用法等價。

更改節點旋轉

更改節點縮放

this.node.scaleX = ;
this.node.scaleY = ;
           

this.node.setScale();
this.node.setScale(, );
           

以上兩種方法等價。setScale 傳入單個參數時,會同時修改 scaleX 和 scaleY。

更改節點尺寸

this.node.setContentSize(, );
this.node.setContentSize(cc.v2(, ));
           

this.node.width = ;
this.node.height = ;
           

以上兩種方式等價。

更改節點錨點位置

this.node.anchorX = ;
this.node.anchorY = ;
           

注意以上這些修改變換的方法會影響到節點上挂載的渲染元件,比如 Sprite 圖檔的尺寸、旋轉等等。

顔色和不透明度

在使用 Sprite, Label 這些基本的渲染元件時,要注意修改顔色和不透明度的操作隻能在節點的執行個體上進行,因為這些渲染元件本身并沒有設定顔色和不透明度的接口。

假如我們有一個 Sprite 的執行個體為 mySprite,如果需要設定它的顔色:

設定不透明度:

生命周期回調

Cocos Creator 為元件腳本提供了生命周期的回調函數。使用者隻要定義特定的回調函數,Creator 就會在特定的時期自動執行相關腳本,使用者不需要手工調用它們。

目前提供給使用者的生命周期回調函數主要有:

  • onLoad
  • start
  • update
  • lateUpdate
  • onDestroy
  • onEnable
  • onDisable

onLoad

元件腳本的初始化階段,我們提供了 onLoad 回調函數。onLoad 回調會在元件首次激活時觸發,比如所在的場景被載入,或者所在節點被激活的情況下。在 onLoad 階段,保證了你可以擷取到場景中的其他節點,以及節點關聯的資源資料。onLoad 總是會在任何 start 方法調用前執行,這能用于安排腳本的初始化順序。通常我們會在 onLoad 階段去做一些初始化相關的操作。

start

start 回調函數會在元件第一次激活前,也就是第一次執行 update 之前觸發。start 通常用于初始化一些中間狀态的資料,這些資料可能在 update 時會發生改變,并且被頻繁的 enable 和 disable。

update

遊戲開發的一個關鍵點是在每一幀渲染前更新物體的行為,狀态和方位。這些更新操作通常都放在 update 回調中。

cc.Class({

extends: cc.Component,

update: function (dt) {

this.node.setPosition( 0.0, 40.0 * dt );

}

});

lateUpdate

update 會在所有動畫更新前執行,但如果我們要在動畫更新之後才進行一些額外操作,或者希望在所有元件的 update 都執行完之後才進行其它操作,那就需要用到 lateUpdate 回調。

onEnable

當元件的 enabled 屬性從 false 變為 true 時,或者所在節點的 active 屬性從 false 變為 true 時,會激活 onEnable 回調。倘若節點第一次被建立且 enabled 為 true,則會在 onLoad 之後,start 之前被調用。

onDisable

當元件的 enabled 屬性從 true 變為 false 時,或者所在節點的 active 屬性從 true 變為 false 時,會激活 onDisable 回調。

onDestroy

當元件或者所在節點調用了 destroy(),則會調用 onDestroy 回調,并在當幀結束時統一回收元件。

建立新節點

除了通過場景編輯器建立節點外,我們也可以在腳本中動态建立節點。通過 new cc.Node() 并将它加入到場景中,可以實作整個建立過程。

cc.Class({
  extends: cc.Component,

  properties: {
    sprite: {
      default: null,
      type: cc.SpriteFrame,
    },
  },

  start: function () {
    var node = new cc.Node('Sprite');
    var sp = node.addComponent(cc.Sprite);

    sp.spriteFrame = this.sprite;
    node.parent = this.node;
  },
});
           

克隆已有節點

有時我們希望動态的克隆場景中的已有節點,我們可以通過 cc.instantiate 方法完成。使用方法如下:

cc.Class({
  extends: cc.Component,

  properties: {
    target: {
      default: null,
      type: cc.Node,
    },
  },

  start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);

    node.parent = scene;
    node.setPosition(, );
  },
});
           

建立預制節點

和克隆已有節點相似,你可以設定一個預制(Prefab)并通過 cc.instantiate 生成節點。使用方法如下:

cc.Class({
  extends: cc.Component,

  properties: {
    target: {
      default: null,
      type: cc.Prefab,
    },
  },

  start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);

    node.parent = scene;
    node.setPosition(, );
  },
});
           

銷毀節點

通過 node.destroy() 函數,可以銷毀節點。值得一提的是,銷毀節點并不會立刻被移除,而是在目前幀邏輯更新結束後,統一執行。當一個節點銷毀後,該節點就處于無效狀态,可以通過 cc.isValid 判斷目前節點是否已經被銷毀。

cc.Class({
  extends: cc.Component,

  properties: {
    target: cc.Node,
  },

  start: function () {
    // 5 秒後銷毀目标節點
    setTimeout(function () {
      this.target.destroy();
    }.bind(this), );
  },

  update: function (dt) {
    if (cc.isValid(this.target)) {
      this.target.rotation += dt * ;
    }
  },
});
           

destroy 和 removeFromParent 的差別

調用一個節點的 removeFromParent 後,它不一定就能完全從記憶體中釋放,因為有可能由于一些邏輯上的問題,導緻程式中仍然引用到了這個對象。是以如果一個節點不再使用了,請直接調用它的 destroy 而不是 removeFromParent。destroy 不但會激活元件上的 onDestroy,還會降低記憶體洩露的幾率,同時減輕記憶體洩露時的後果。

總之,如果一個節點不再使用,destroy 就對了,不需要 removeFromParent 也不需要設定 parent 為 null 哈。