CocosCreator 代碼組件(創建與使用、cc.Class類型、生命週期函數)（第三篇）

前言：
在前面一篇中講解了場景的搭建，現在開始介紹一個重要的部分----代碼組件，通過在不同節點上掛載不同邏輯功能的代碼組件來實現遊戲的開發。

VSCode下載鏈接：https://code.visualstudio.com/

首先需要創建一個代碼組件，然後將其掛在相應的節點上，我們自己需要自己綁定一個代碼編輯器，用來書寫代碼，我選用的是VSCode。在設置完成之後我們雙擊代碼組件，這樣就可以在VSCode打開，打開後可以看到如圖所示：會自行生成一個框架。

下面詳細講解：

---

一、創建代碼腳本、掛載代碼腳本

創建代碼腳本： 右擊資源管理器---->新建---->Javascript---->完成；

掛載代碼組件： 選擇被掛載的節點---->屬性檢查器---->添加組件---->用戶腳本組件---->選擇目標組件掛載；

---

二、使用cc.Class

我們創建好的代碼組件打開裏面都有一個cc.Class. cc.Class 是一個很常用的 API，用於聲明 Cocos Creator 中的類，爲了方便區分，我們把使用 cc.Class 聲明的類叫做 CCClass。

其實我們就是在這個類裏面書寫代碼，然後我們掛載的時候，用這個類實例化了一個對象，然後掛載上去，從而同一個代碼腳本可以掛載在多個節點上面啦！

// 定義一個cc.Class(類)
var Sprite = cc.Class({
    name: "sprite"
});
// 實例化一個(類)
var item = new Sprite();

cc.Class的繼承、屬性聲明、構造函數、聲明方法：

var Sprite = cc.Class({
	// 1.繼承使用 extends
    extends: cc.Component,
    // 2.聲明屬性 properties ，
    properties: {
      height: 200,      // 數值
      type: "ning",    // 字符串
      loaded: true,    // 邏輯變量          
      target: cc.Node,  // 對象
      pos: cc.Vec2,     // 表
      // 完整聲明屬性
      enemies: {
	        default: [],
	        type: [cc.Node]     // type 同樣寫成數組，提高代碼可讀性
	    },
	    
    }
	// 3.使用  ctor  聲明構造函數
    ctor: function () {
        cc.log(this instanceof Sprite);    // 類型判斷 instanceof 
    }
    // 4.聲明一個名叫 "print" 的實例方法
    print: function () { }
    
});

這裏特別說明： 我們在properties中聲明的屬性可以在屬性編輯器中顯示，這樣方便我們可視化的設置其值。

---

三、代碼訪問修改節點

所有的組件都繼承自cc.Component 類.
每一個cc.Component 類都有一個 node 屬性，可以通過 this.node來訪問所掛節點。

// 1. 激活節點
 this.node.active = true;
 
 // 2. 關閉節點
 this.node.active = false; 
 
 // 3. 修改節點的父節點
 this.node.parent = parentNode;// 方法一
 this.node.removeFromParent(false); // 方法二
 parentNode.addChild(this.node);
 
 // 4. 訪問孩子節點
 var child1 = this.node.children  // 返回節點的所有子節點 <數組> 
 var count = this.node.childrenCount  // 返回節點的子節點數量
 
 // 5. 更改節點位置，以下兩種用法等價
 this.node.x = 100; // 分別對 x 軸和 y 軸座標賦值;
 this.node.y = 50; 
 this.node.setPosition(100, 50); // 使用 setPosition 方法;
 this.node.setPosition(cc.v2(100, 50)); 
 this.node.position = cc.v2(100, 50);  // 設置  position  變量;

// 6. 更改節點旋轉
 this.node.rotation = 90;  // 方法一
 this.node.setRotation(90); // 方法二
 
// 7. 更改節點縮放
 this.node.scaleX = 2;  // 方法一
 this.node.scaleY = 2; 
 this.node.setScale(2); //方法二 傳入單個參數時，會同時修改  caleX 和 scaleY
 this.node.setScale(2, 2); 
 
// 8. 更改節點尺寸
 this.node.setContentSize(100, 100); // 方法一
 this.node.setContentSize(cc.size(100, 100)); 
 this.node.width = 100; // 方法二 
 this.node.height = 100; 
 
// 9. 更改節點錨點位置，會影響到節點上掛載的渲染組件
 this.node.anchorX = 1;  // 方法一
 this.node.anchorY = 0;   
 this.node.setAnchorPoint(1, 0); // 方法二

// 1. 設置節點顏色和不透明度
 mySprite.node.color = cc.Color.RED; 
 mySprite.node.opacity = 128; 

---

四、生命週期函數

目前提供給用戶的生命週期回調函數主要有：

1. onLoad： 組件加載時調用；
2. start： 在組件第一次激活前，也就是第一次執行 update 之前觸發；
3. update： 每次遊戲刷新時調用；
4. lateUpdate： 在update 之後調用；
5. onDestroy： 節點調用了 destroy() 時調用；
6. onEnable： 組件被激活時調用；
7. onDisable： 組件被關閉時調用；

1. onLoad

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

2. start

start 回調函數會在組件第一次激活前，也就是第一次執行 update 之前觸發。 start 通常用於初始化一些中間狀態的數據，這些數據可能在 update 時會發生改變，並且被頻繁的 enable 和 disable。

3. update

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

4. lateUpdate

update 會在所有動畫更新前執行，但如果我們要在動效（如動畫、粒子、物理等）更新之後才進行一些額外操作，或者希望在所有組件的 update 都執行完之後才進行其它操作，那就需要用到 lateUpdate 回調。

5. onEnable

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

6. onDisable

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

7. onDestroy

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

代碼：

cc.Class({
  extends: cc.Component,
  properties: {
  // 屬性
  },

  onLoad: function () {
  },
  
    start: function () {
    this._timer = 0.0;
  },
  
  update: function (dt) {  // dt是距離上次刷新的時間 
    this._timer += dt;
  },

  lateUpdate: function (dt) {
  }
  
});

update中的dt是距離上次刷新的時間.

---

代碼組件還有創建節點、訪問節點、監聽事件、動作系統、計時器等提及，這將在後面篇章出現。

推薦閱讀：

CocosCreator 搭建場景和座標系轉換(第二篇)

------------------------------------------------------------------------------------ 戰勝