用Unity做半个2D战棋小游戏（五）：添加常用的界面

最新推荐文章于 2023-07-07 09:19:45 发布

wangchewen

最新推荐文章于 2023-07-07 09:19:45 发布

阅读量401

点赞数

文章标签： https xml c#

原文链接：https://www.fgba.net/sitemap.xml

版权

目标

使用Unity自带的UGUI替换之前的GUI来实现一些常用界面：

1、包含开始战斗按钮及战斗结束时提示文字的主界面。

2、玩家手动操作时，辅助选择移动、攻击及待命的弹出面板。

3、点选地图、战斗单位时，弹出的详情展示面板。

实现后的效果如下图：

战斗结束时显示的友情提醒

行动选择菜单

战场单位信息面板

不难看出，当UGUI碰撞上专业的素材后，一个个绝美的界面瞬间跃然屏上。这也给了那些常说“程序员不懂美”的家伙们一记响亮的耳光。

|关于如何制作界面

这些界面都是用UGUI制作的，并没有什么难度，相信上手过UGUI或NGUI的同学，只要碰到精美的纹理贴图，都能轻松完成。

使用的是一套高雅灰主题的专业UI纹理素材

本文不会对UGUI的使用做详细介绍，我们将重点聊聊对界面的管理。

因为只要找到了方法，做出漂亮的界面就只是时间问题罢了。

而至于证明“程序员也能凭自己的能力作出专业界面”这件事，相信上面已经做到了。

受项目大小及时间所限，这里会使用一套轻量级的界面管理方式。而在此之前，让我们先做一些前期准备工作。

|分配相机

为界面的绘制单独分配一个相机(界面相机)，并调整界面相机和战场相机上的Clear Flags、CullingMask和Depth设置。

界面相机与战场相机的设置

整个界面系统的根画布(ScreenCanvas)，是一个类型为ScreenSpace-Camera的Canvas，它的父节点ScreenUIRoot上有专门渲染界面的界面相机。

|设置层级

ScreenCanvas下设5个节点，分别对应5个层级：背景层、基础层、弹出层、顶层和Debug层.

界面的层级结构

各层的功能为：

背景层：装饰性的、非功能性的界面。

基础层：常驻的界面（主界面、角色头像、快捷操作栏等）。

弹出层：点击后弹出的界面（各功能界面）。

顶层：强制显示在最上层的界面（Tips界面或走马灯等）。

Debug层：开发时辅助调试用。

这些层级从下到上放置，遮挡关系是上层遮挡下层。当然，其顺序、层数和名称可根据实际需求进行调整。

需要注意的是，这5个节点(Transform)并非是必须的，它们只是为了Debug时能更直观的查看层级间的关系，真正用于用于区分层级的是Canvas上的SortingLayer和OrderInLayer属性。

SortingLayers设置中的层级与对应的节点

不同界面上Canvas所设置的Layer和Order值

|界面管理流程

比起代码，我觉得还是看图来的更直观些。

界面管理流程

整个界面管理可以简单拆解为四个部分：打开界面、关闭界面、层级刷新及界面刷新，下面我们依次介绍。

|打开界面

打开界面的逻辑很简单，但需要注意的是，为了更好的使用内存，手机号购买界面管理器维护了两个界面缓存区：常驻缓存和临时缓存。打开界面时如果需要加载新的界面，先去这两个缓存区中查看一下是否有缓存过的界面，从缓存区加载比重新读取新的界面效率要高。

|关闭界面

当我们要关闭界面时，界面管理器会根据它的“存储策略”决定其被关闭后的去留，有些会被放入到常驻缓存区，有些会被放到临时缓存区，而有些则会被直接移除。

这就好比两性交往中女生犯错通常当时就会被原谅；男生犯错通常需要好好表现一段时间才有可能被原谅；而单身狗连犯错的机会都没有。

|层级刷新

上面介绍了打开和关闭界面。其实它们都可以被看成是在“显示界面”。因为关闭界面也可以理解为“被这个界面遮挡覆盖的界面，可能需要显示了”。

因此，当有界面被打开或关闭后，界面管理器会从上到下的让各层刷新自己的显示状态及对屏幕的遮挡状态，并将这个遮挡状态向下传递，用作后面层级的显示判断。

|界面刷新

我们知道界面的刷新和显示是有代价的，因为它们会对CPU及GPU的性能造成开销。因此我为每个界面设置了是否遮挡了屏幕、不可见时是否仍然刷新及Dirty属性。

如果一个界面遮挡了屏幕，那么它下面的界面首先应该被“隐藏”以减小渲染的压力；其次如果不可见的界面没有被设置为“不可见时仍然刷新”，则当需要刷新它时（界面数据发生了变化），也只是被打上Dirty标记，并在下次需要显示的时候再刷新。

|界面的生命周期函数

上面流程图中的蓝色部分，是界面的生命周期函数，它们会在适当的时间被界面管理器、层级或界面自身调用。

Init：初始化，界面首次被加载后调用。

OnPush：界面被显示前，加入层级时被调用。

OnShow：界面被显示时调用。

UpdateView：界面需要被刷新时调用。

OnHide：界面被隐藏时调用。

OnPopup：界面被关闭，从层级中移除时调用。

OnExit：界面不需要被缓存，被Destroy前调用。