在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组件

我们这个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函数，同时做了属性检查，请看下图配置：

LoadScene组件关联Button.jpg

在场景中添加了一个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或游戏原型会不会一个新的选择呢？

---

欢迎关注「奎特尔星球」微信公众号，来我们一起成长！

奎特尔星球