白鹭引擎Egret Engine-实现多场景(场景串联篇)

继上一篇 白鹭引擎Egret Engine-实现多场景(EUI布局篇)
这篇开始会讲解怎么串联多场景

如果资讯有误或是有更好的资讯
非常非常欢迎各位指点与交流
Egret Engine Community TW

假设我现在游戏一打开
会显示大厅和按钮
按钮按下去会跳转到不同的画面
我们先来做这种简单的多场景

创建大厅按钮

上一篇我们只将场景加上底图
现在我们来加上按钮
哦对了这个场景就是我们的大厅

一样打开 SceneEui.exml

首先选择左边的 component (长得像拼图的东西)
再选择它里面的 component => Button
直接拖拉到工作区
这样就新增了一个EUI按钮元件了
然后在右边的 COMMON => ID 和 Label
输入按钮上显示的文字(按钮名称)

用这种方式建立两个按钮
命名为 Scene A 和 Scene B
也就是我们从大厅点选这两个按钮
会到两个不同的新场景

这样大厅的EUI布局都完成了
剩下就是写逻辑让按钮可以跳转

设定按钮逻辑

首先在 SceneEui.exml 複製元件的属性

点一下这个按钮就好
接着我们打开 SceneEui.ts
直接把属性贴上

接着将整个EUI类别挂上事件监听器

这行的白话文是
如果EUI元件加载成功
便触发 this.addEvent() 这个方法

接着新增 addEvent() 这个方法
这个方法会帮两个按钮挂载点击的事件监听器
当点击按钮之后会触发跳转场景的方法
所以再新增 toSceneA() 和 toSceneB() 这两个方法

到这边按钮的点击功能原则上就完成了

场景的节点观念

现在场景的节点关係是
Main => SceneModel => SceneEui
如果我要新增新的画面
那这个新画面的节点应该要在哪呢？

公布答案
Main => SceneModel => SceneEui
Main => SceneModel => New Scene

没错
要挂在SceneModel下而不是SceneEui下
要把SceneModel想成大厅场景的主体
SceneEui只是皮肤而已

既然这样新增场景的时候就不能再SceneEui里面进行addChild的动作
而是要在SceneModel进行addChild

按钮触发跳转

所以我们上面新增的 toSceneA() 和 toSceneB() 这两个方法
必须移到 SceneModel 这个类别中

那这个时候你会发现 SceneEui 中的挂载按钮点击监听的地方报错
原因是因为触发的方法已经不存在于这个类别中了
新的问题就是
该怎样才能跨类别呼叫SceneModel的方法

方法是
我们回到Main.ts这个档案
修改创建场景的部分

首先新增一个 Main 类别的静态属性
public static gameHall: SceneModel;

接着将这个静态属性指向我们创建的大厅场景也就是SceneModel

这样我们就能跨类别呼叫 SceneModel 了

回到 SceneEui 修改挂载事件监听器的地方
直接呼叫 Main.gameHall 的方法

这样按钮的功能就大功告成了

创建子场景 SceneA 和 SceneB

用之前讲过的方法
在src新增场景的ts档

然后新增对应的EUI元件(SceneAEui、SceneBEui)
并加载到SceneA、SceneB

虽然大家都很聪明
不过我还是提醒一下
虽然我只截图B的
但是A的也要做

再来进行这两个场景的EUI布局
打开exml档设定规格500x500
设定背景一黑一白
使用 EUI.Rect 这个元件
一样也是左下角直接拖拉
然后在调整规格和颜色就好

当子场景创建好后
最后一个步骤
回到 SceneModel 设定刚刚按钮触发的两个方法

这样子就完成了简单按钮跳窗的功能
如果熟悉这些操作后
也可以去尝试看看怎么新增返回键

提示
千万要注意节点之间的关係

下一篇会来讲解场景新增与移除的概念

收操

下一篇
白鹭引擎Egret Engine-单例的重要性