CocosCreator 代碼組件(創建銷燬節點、訪問節點和組件) (第四篇)

前言：
在遊戲開發中，我麼都是通過代碼來控制場景中的節點，下面講解怎麼用代碼，創建節點、銷燬節點、訪問節點、訪問組件。

---

一、創建和銷燬節點

1. 創建新節點

除了通過場景編輯器創建節點外，我們也可以在腳本中動態創建節點。通過 new cc.Node() 並將它加入到場景中，可以實現整個創建過程。

cc.Class({
    extends: cc.Component,
    properties: {
        sprite:{  //關聯編輯器
            type: cc.SpriteFrame,
            default: null,
        }
    },
    start () {
        var newnode=new cc.Node("Sprite");  //創建一個新的節點
        var sp=newnode.addComponent(cc.Sprite);   //給新節點添加一個<Sprite組件>
        sp.spriteFrame=this.sprite;  // 更改組件的圖片
        newnode.parent=this.node;  // 將新節點作爲當前節點的子節點
        this.node.addChild(newnode);  // 將新節點作爲當前節點的子節點
        newnode.color=cc.Color.RED;  //設置新節點的顏色
    },
});

2. 克隆已有節點

可以通過 cc.instantiate 方法完成.

cc.Class({
    extends: cc.Component,
    properties: {
        enemy:{ // 關聯編輯器
            type: cc.Node,
            default: null,
        },
    },
    start () {
        var scenes=cc.director.getScene(); // 獲得當前場景
        var node=new cc.instantiate(this.enemy); // 克隆enemy節點
        node.parent=this.scenes;  // 將克隆節點加到場景中
        node.setPosition(cc.v2(100,100));  //設置節點位置
    },
});

3. 創建預製節點

和克隆已有節點相似，你可以設置一個預製（Prefab）並通過 cc.instantiate 生成節點。

cc.Class({
    extends: cc.Component,
    properties: {
        enemy:{
            type: cc.Prefab,  //類型，預製體
            default: null,
        },
    },
    start: function (){
        var scene=cc.director.getScene();
        var node=cc.instantiate(this.enemy);   // 創建預製體
        node.parent=scene;
        node.setPosition(0,0);
    },
});

4. 銷燬節點

通過 node.destroy() 函數，可以銷燬節點。
注意：
銷燬節點並不會立刻被移除，而是在當前幀邏輯更新結束後，統一執行。當一個節點銷燬後，該節點就處於無效狀態，可以通過 cc.isValid 判斷當前節點是否已經被銷燬。

cc.Class({
  extends: cc.Component,
  properties: {
    target: cc.Node,
  },
  start: function () {
    // 5 秒後銷燬目標節點
    setTimeout(function () {
      this.target.destroy();  //銷燬節點
    }.bind(this), 5000);
  },
  update: function (dt) {
    if (cc.isValid(this.target)) {  //判斷是否消除
      this.target.rotation += dt * 10.0;
    }
  },
});

5. destroy 和 removeFromParent 的區別

調用一個節點的 removeFromParent 後，它不一定就能完全從內存中釋放，因爲有可能由於一些邏輯上的問題，導致程序中仍然引用到了這個對象。
因此如果一個節點不再使用了，請直接調用它的 destroy 而不是 removeFromParent 。
destroy 不但會激活組件上的 onDestroy ，還會降低內存泄露的機率，同時減輕內存泄露時的後果。

node.removeFromParent();  // 將節點從父親節點移除
this.node.removeAllChildren();  // 移除所有孩子節點

---

二、訪問節點和組件

1. 訪問組件所在的節點

在組件方法裏訪問 this.node 變量;

var node = this.node;

2. 查找子節點

如果用 屬性檢查器 來一個一個將它們關聯到這個腳本上，那工作就會很繁瑣。
爲了更好地統一管理這些對象，我們可以把它們放到一個統一的父物體下，然後通過父物體來獲得所有的子物體：

// 查找孩子節點【爲一個數組】
 var cannons = this.node.children;
 
// getChildByName ：出現同名，則返回第一個
this.node.getChildByName("name");

//如果子節點的層次較深，你還可以使用  cc.find ， cc.find  將根據傳入的路徑進行逐級查找：
cc.find("Cannon 01/Barrel/SFX", this.node);
//全局名字查找，當  cc.find  只傳入第一個參數時，將從場景根節點開始逐級查找：
this.backNode = cc.find("Canvas/Menu/Back");

3. 獲得其它組件

獲得同一個節點上的其它組 getComponent 這個 API。

start: function () {
    var label = this.getComponent(cc.Label);// 獲取Label組件
    
	//獲取代碼組件：SinRotate.js 裏聲明的組件，類名就是  SinRotate 
	var rotate = this.getComponent("SinRotate");
	
	//在節點上也有一個  getComponent  方法，它們的作用是一樣的：
    cc.log(this.node.getComponent(cc.Label) === this.getComponent(cc.Label));  // true

	//刪除組件
	this.destroy();
}

4.利用屬性檢查器設置節點

首先在代碼裏面聲明屬性，然後將目標節點拉拽到屬性檢查器中！

cc.Class({
    extends: cc.Component,
    properties: {
        // 聲明 player 屬性
        player: {
            default: null,
            type: cc.Node
        }
    }
});

在上面的例子中，如果你將屬性的 type 聲明爲 Player 組件，當你拖動節點 Player Node 到 屬性檢查器，player 屬性就會被設置爲 這個節點裏面的 Player 組件 。這樣你就不需要再自己調用 getComponent 啦

var Player = require("Player");
cc.Class({
    extends: cc.Component,
    properties: {
        // 聲明 player 屬性，這次直接是組件類型
        player: {
            default: null,
            type: Player
        }
    },

    start: function () {
        var playerComp = this.player;
        this.checkPlayer(playerComp);
    },
});

---

推薦閱讀：
CocosCreator 代碼組件(創建與使用、cc.Class類型、生命週期函數)（第三篇）
CocosCreator 觸摸事件、鼠標事件、鍵盤事件、重力傳感事件、自定義事件 (第五篇)