CreatorPrimer|場景切換

在Cocos Creator中切換遊戲場景可以像切換幻燈片頁面一樣簡單，這次教程我們稍微進階一點點，帶着大家編寫這個場景切換組件。

1. 場景加載組件

先看組件代碼：

//場景加載組件
cc.Class({
    extends: cc.Component,
    properties: {
       scene: cc.SceneAsset,  //定義場景資源
    },
    onLoad() {
        //註冊節點觸摸事件，當觸摸結束加載場景
        this.node.on(cc.Node.EventType.TOUCH_END, () => {
            //使用cc.director.loadScene引擎API加載場景
            cc.director.loadScene(this.scene.name);
        );
    }
});

新建一個測試場景，場景中添加一個Label，將LoadScene組件綁定到Label節點上，同時拖拽另一個場景到LoadScene的Scene屬性上，看下圖所示：

我們這個LoadScene組件可以掛載到任何節點上，配置好想加載的場景，啓動預覽下效果如何！

2. 與按鈕結合

在Label上點擊沒有什麼反饋效果，我們把節點換成按鈕控件體驗會更好，而且cc.Button組件還帶有事件觸發能力，可執行指定節點上的組件函數。

改造一下組件代碼：

//增加loadScene函數，可被Button組件調用
cc.Class({
    extends: cc.Component,
    properties: {
       scene: cc.SceneAsset,  //定義場景資源
       clickable: true,       //是否可點擊
    },
    onLoad() {
        //開啓點擊，註冊場景加載事件
        if (this.clickable) {
            this.node.on(cc.Node.EventType.TOUCH_END, this.loadScene, this);
        }
    },
    loadScene() {
        //場景存在，調用場景場景加載
        if (this.scene) {
            cc.director.loadScene(this.scene.name);
        }
    }
});

增加了一個clickable屬性，如果使用Button的事件觸發來調用函數，就不要註冊觸摸事件了，不然會執行多次。我們把之前的觸摸事件單獨抽成了一個loadScene函數，同時做了屬性檢查，請看下圖配置：

在場景中添加了一個Button節點，掛載好LoadScene組件，設置好要加載的場景，不要勾選Clickable屬性(不與Button事件配合時勾選)。然後將重點放在cc.Button組件屬性設置上：

1. 增加一個Click Events事件
2. 事件第一個參數是指向一個節點，這裏拖動Button節點到這裏
3. 事件第二個參數是選擇這個節點上的一個組件，這裏選擇LoadScene
4. 事件第三個參數是選擇組件上的LoadScene函數

與cc.Button組合在配置要繁瑣一些，你可以只使用Button的點擊過渡效果，不使用Button的事件，勾選下面的Clickable屬性效果相同。

#3. 小結
我們講了使用cc.director.loadScene函數加載場景，將代碼編寫成可通用的組件更能發揮其價值，方便策劃、美術等不會編程的夥伴。有了上面的LoadScene組件，用Cocos Creator來製作PPT或遊戲原型會不會一個新的選擇呢？

---

歡迎關注「奎特爾星球」微信公衆號，來我們一起成長！