五邑隱俠，本名關健昌，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);
});
}
}
現在我們已經知道怎樣建立遊戲入口，怎樣製作、加載、顯示界面，下一章將講解怎樣對彈窗分層管理。