四邑隱俠，本名關健昌，10年遊戲生涯，現隱居四邑。本系列文章以TypeScript為介紹語言。

我們在cocos creator新建一個Hello TypeScript專案，都會有一個assets/Scene/helloworld.fire檔案。使用cocos creator開發遊戲時，專案可以只有一個.fire檔案。一般地，我會把這個資料夾改名為assets/scene，下面只有main.fire檔案：assets/scene/main.fire。

雙擊main.fire檔案，在層級管理器可以看到它的結構，

根節點是一個Canvas，點選Canvas節點，在右邊的屬性面板可以看到Canvas元件有Design Resolution屬性，作為螢幕適配的尺寸。例如設定為1334x750，那麼美術出資源時一屏介面的大小就是這個尺寸。不同的手機螢幕引擎自動做等比例縮放，具體縮放倍數，當勾選Fix Width表示介面的寬縮放到跟實際螢幕一樣，當勾選Fix Height表示介面的高縮放到跟實際螢幕一樣。另外一邊相應等比例縮放，可能小於螢幕大小而出現黑邊，也可能大於螢幕而被裁剪，這些可能都不是我們想要的，後面會說怎麼解決。

cocos creator2.1.0版本預設Canvas下面有Main Camera子節點，其他子節點是模版示例，直接刪除。一般我還會給Canvas新增兩個子節點，一個sceneLayer作為場景根節點，一個popupLayer作為彈窗根節點。因為場景我們寧願超框被裁剪，也不希望看到黑底，彈窗則希望能完整顯示，但引擎本身是統一處理的。分開兩個不同的根節點，在載入後根據螢幕大小單獨調整場景根節點sceneLayer的縮放讓他鋪滿螢幕。對於微信小遊戲之類，單獨調整下移彈窗根節點popupLayer，避免與微信小遊戲的關閉按鈕重合。

然後，就可以開始寫入口指令碼，把它掛到Canvas節點。cocos creator採用元件模式，每個節點都可以掛載不同的元件，包括自己開發的指令碼元件。新建一個StartCtrl.ts，所有跟介面節點關聯的指令碼類都繼承自cc.Component，由於creator是使用裝飾器語法來檢查屬性的，所以要用到@property和@class裝飾器，其中@property用於宣告編輯器可以檢查到的屬性，我們可以宣告兩個屬性，sceneLayer和popupLayer屬性，用於關聯介面的場景根節點和彈窗根節點，@class用於宣告編輯器可以掛到節點的類。cc.Component定義了一系列生命週期方法，在節點不同生命週期會呼叫。下面是入口指令碼的簡單實現。

/**
 * auth: 關健昌
 * date: 2018-11-17
 * desc: 遊戲入口
 * modify:
 */

const {ccclass, property} = cc._decorator;

@ccclass
export default class StartCtrl extends cc.Component {

    @property(cc.Node)
    popupLayer: cc.Node = null;

    @property(cc.Node)
    sceneLayer: cc.Node = null;

    start () {
　　　　// TODO Add Start Code
    }
}
 

在編輯器選擇Canvas節點，在屬性面板點選“新增元件”，選擇使用者指令碼元件，選擇StartCtrl，拖sceneLayer和popupLayer兩個節點到屬性面板對應屬性，這樣就關聯好入口指令碼。啟動遊戲後，Canvas的生命週期就會觸發StartCtrl裡對應的方法，StartCtrl裡的sceneLayer和popupLayer屬性已被賦值為Canvas對應的子節點。後面我們會繼續講解如何使用這兩個屬性對介面進行分層管理。

現在，我們先看看怎樣製作介面。我們可以把每一個介面都做成一個prefab預製體。同樣在assets目錄下，會看到一個叫Texture的目錄，先把它改成resources，因為cocos載入資源時對resources有特殊處理，後面會講解。在這個目錄下再建一個目錄叫prefabs，assets/resources/prefabs專門用來存放介面的預製體。

製作預製體的方法很簡單。先雙擊scene/main.fire開啟，在Canvas節點右鍵新建空白節點，屬性面板將新節點名字改為TestView，拖動該節點到資源管理器面板的assets/resources/prefabs目錄。這樣一個預製體TestView就生成了，這時可以在main.fire的Canvas節點中刪除TestView這個子節點，我們已經不需要這個子節點。

在資源管理器目錄找到assets/resources/prefabs目錄，雙擊TestView.prefab開啟這個預製體，可以看到裡面是空的，可以先設定根節點的Size，這就是這個介面的設計大小。然後可以開始用cocos的ui元件、渲染元件佈局介面，cocos的ui元件、渲染元件使用參看cocos官方文件。

然後，同樣我們可以開始寫這個介面的指令碼TestViewCtrl.ts，控制介面邏輯和重新整理。這個指令碼還是繼承cc.Component，定義對應的cc.Label等型別的屬性，這樣就可以把介面的元素關聯到指令碼，通過指令碼來重新整理。

/**
 * auth: 關健昌
 * date: 2018-11-17
 * desc: 測試介面
 * modify:
 */

const {ccclass, property} = cc._decorator;

@ccclass
export default class TestViewCtrl extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;// LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
　　　　this.label.string = "hello";
    }

    // update (dt) {}
}

打開回剛才那個預製體，選擇根節點，在屬性面板選擇新增元件TestViewCtrl，並將對應ui元件拖到指令碼元件的屬性上進行關聯，這樣我們就可以通過TestViewCtrl控制這個介面了。

要顯示這個介面，首先要載入prefab。cocos提供了cc.loader.loadRes介面，型別傳cc.Prefab，載入成功後通過cc.instantiate介面把預製體例項出一個cc.Node，cocos的介面佈局是基於組合模式的一棵樹，cc.Node通過addChild把其他cc.Node新增到介面。所以，我們通過popupLayer.addChild把這個介面放到螢幕，這些程式碼可以寫在入口指令碼StartCtrl的start方法裡。可以通過cc.Node.getComponent獲取TestViewCtrl的例項來操作介面。不過，我一般是通過cc.Component的生命週期和訊息來實現介面更新，降低耦合，後面會詳細介紹這種方式。

/**
 * auth: 關健昌
 * date: 2018-11-17
 * desc: 遊戲入口
 * modify:
 */

const {ccclass, property} = cc._decorator;

@ccclass
export default class StartCtrl extends cc.Component {

    @property(cc.Node)
    popupLayer: cc.Node = null;

    @property(cc.Node)
    sceneLayer: cc.Node = null;

    start () {
　　　　cc.loader.loadRes("prefabs/TestView", cc.Prefab, (err, result) => {
                if (!err) {
                    return;
                }

                let prefab = result as cc.Prefab;
                let view = cc.instantiate(prefab);
　　　　　　　　　 // let ctrl = view.getComponent(TestViewCtrl);
　　　　　　　　　 this.popupLayer.addChild(view);

            });
    }
}

現在我們已經知道怎樣建立遊戲入口，怎樣製作、載入、顯示介面，下一章將講解怎樣對彈窗分層管理。