Egret界面制作

自学开发笔记，有兴趣的同学请关注微信WiGameFun，不定时分享游戏开发相关技术。有不对的地方烦请指点修正。​

Egret界面制作

游戏开发中，UI界面的制作是其非常重要的一环，今天我们来学习一下Egret中UI界面的制作。

层级概念

开始之前让我们先想一想游戏中UI需要具有哪些特性：

这里，我们引入一个游戏场景的层级概念。比如游戏中我们控制的角色、NPC、障碍、BOSS等应该在一个场景的层级中活动，这里我们把这一层叫做逻辑层；我们玩家的姓名、头像、血条、得分以及其他操作按钮应该在同一个层级，我们把这一层叫做UI层（UI层应该在逻辑层之上）。一款游戏至少要包含这两个层级。

我在之前的游戏开发中一般将层级分为以下四个层级。

**逻辑层：**主要用来实现游戏中的主逻辑。比如前面实现的《打飞机》游戏，飞机在场景中飞行、发射子弹、飞机和飞机、飞机和子弹之间的碰撞检测等等；比如上一篇中提到的《贪吃蛇》游戏，蛇的移动、吃水果、围堵其他蛇的检测等等，都是在这个层级来实现的。

**UI层：**主要用来实现展示玩家相关信息，玩家操作按钮的展示，事件响应等等， 比如《打飞机》游戏中飞机的飞行距离展示、比如《贪吃蛇》游戏中排行榜的展示（我们上一篇学习笔记中，排行榜是在界面上长期展示的，可以视为UI层的一个展示区域）

**弹出层：**我一般会把弹出窗在一个单独的层级来展示，这样保证弹出窗口一定不会被UI层的控件遮挡。比如《狼和羊》游戏中倒计时3s时的提示信息就是在弹出层展示。

**引导层：**一般稍微复杂点的游戏还会做一个新手引导，这里为了保证我们新手引导的手指（或者其他指引控件）不被其他展示信息遮挡，我们可以增加一个引导层。比如《狼和羊》游戏中的新手引导的手指。

控件支持

要实现游戏界面开发，一定离不开控件。比如展示一个文本信息我们一般使用Label，玩家控制角色释放技能操作我们使用按钮，排行榜我们要用一个带滚动的列表窗口等等。这些控件在Egret中均有实现，大家可以很方便地使用。

UI制作

Egret为了让大家使用起来更方便，将一些操作集成在wing编辑器中。语言的描述有时候反而让人感觉抽象，下面我们一起制作一个界面，大家来感受下。
首先将我们准备的资源图片拷贝到resource/assets/GameRes/目录下（当然可以是assets下的任意目录）。编辑器会自动刷新加载更新default.res.json文件，这个文件是记录项目中资源文件的一个集合文件，格式比较简单：groups是对资源文件的一个分类，比如下图中，我们把所有资源放在一个名字叫perload的资源分组中，当我们游戏启动的时候就去加载这个分组中的所有资源，保证游戏启动前就把所有资源先加载进来；resources是一个资源文件描述的详细数组，数组中的每个元素都是一个url、type、name三个键值对组成的元素，url表示这个文件的相对路径、type表示这个文件的类型、name就是这个资源文件在代码中使用的key值。

在src/UI目录下，右键鼠标选择“新建模板文件”“新建EUI组件”，弹窗如下：

输入类型：HomeSceneUI，勾选生成EXML、生成TS文件，这里我们把皮肤默认路径修改为我们提前创建的一个resource下的skins目录，表示与项目自带的eui_skins皮肤区分开，方便我们后续查找编辑。点击确定。
这时我们可以看到UI目下生成对应的TS文件，skins目录下生成对应的exml文件，这两个文件做什么用的呢？TS文件用来实现我们UI界面相关的事件响应逻辑代码，exml用来可视化编辑我们的界面。

打开resource目录下的default.thm.json文件，我们能看到这个文件中多了HomeSceneUI相关的skins文件和exml文件的路径定义。这里可能已经有人马上想到了——原来Egret的皮肤就是通过这样一个default.thm.json文件来关联的，这件就是为什么在后续的Egret版本中，不再需要我们手动在TS文件中定义皮肤名称的原因了。

接下来我们打开HomeSceneUI.exml文件，可视化编辑这个界面，这里的操作非常简单，都是控件拖拽式的使用——我们在这个界面上增加了一个Image，并把它的资源名设置成我们前面导入的背景资源图的key值，再增加两个Image：“1Player”和“2Player”，同时给这两个Imge定义ID。这里需要说明下，正常来说我们这里应该使用Button按钮实现，因为我这里没有弹起和按下的按钮效果图，就直接使用一个Image来为大家展示下响应事件的实现。

最后，我们打开HomeSceneUI.ts文件，在文件中通过前面界面上那两个Image的ID来获取两个控件，并给它们添加响应事件如下。

启动游戏，验证效果

点击Image响应时，界面切换进入游戏场景，我们可以看到场景中已经添加了一个坦克。

写这一篇就当作纪念吧，虽然也没几个人看^_。