在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或遊戲原型會不會一個新的選擇呢？

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