我們在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);
? ? ? ? ? ? });
? ? }
}
?現在我們已經知道怎樣建立游戲入口，怎樣制作、加載、顯示界面，下一章將講解怎樣對彈窗分層管理。
點擊鏈接加入群聊【cocos?creator資源分享】：https://jq.qq.com/?_wv=1027&k=5lhq1wv
