前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Cocos Creator基础教程(7)—场景切换

Cocos Creator基础教程(7)—场景切换

作者头像
张晓衡
发布2019-09-11 16:58:00
3.3K0
发布2019-09-11 16:58:00
举报
文章被收录于专栏:Creator星球游戏开发社区

在Cocos Creator中切换游戏场景可以像切换幻灯片页面一样简单,这次教程我们稍微进阶一点点,带着大家编写这个场景切换组件。

1. 场景加载组件

先看组件代码:

代码语言:javascript
复制
//场景加载组件
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组件还带有事件触发能力,可执行指定节点上的组件函数。

改造一下组件代码:

代码语言:javascript
复制
//增加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

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


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Creator星球游戏开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 场景加载组件
  • 2. 与按钮结合
  • 3. 小结
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档