《铸梦之路》Untiy高性能自动化UI管理框架ZMUIFramework

框架的基本介绍： 如何打造一个高性能、高效率、高自动化的UI框架

简单介绍

则其优、舍其糟。该框架在每一处都考虑以最优的方式进行设计。

以性能点、自动化点、效率点、和易使用点四个大点为基础 研发的一个高性能、高效率的Mono、物体分离式框架，该框架打破常规的Mono依赖驱动，生命周期自动化管理，无需考虑与Mono周期混杂问题。全程界面物体上无任何一个脚本，但使用起来和Mono脚本无任何差别。对于IRuntime可以实现无障碍移植切换到热更域或Mono源工程。

该框架在性能方面避免掉了以下问题点：

• 频繁的网格重建带来的大量性能消耗和垃圾回收
• 频繁的SetActive带来的性能消耗和GC垃圾
• 频繁Instantiate造成的卡顿和性能消耗以及GC垃圾
• 不必要的组件属性带来的性能开销
• 不正确的组件顺序导致打断合批带来的性能开销和DrawCall增加
• 不必要的组件使用RaycastTarget带来的性能消耗

并且考虑到各种原因，最终决定每个界面以Canvas为界面基础，进行制作，主要原因有以下几点:

• 1.Canvas本身并不占用DrawCall
• 2.Canvas分离能最大化的减少网格重建带来的性能消耗
• 3.能够提高界面的性能，网格数据量小，绘制压力小
• 4.能够提高界面的流畅性
• 5.一般情况下,同屏同时显示的界面也很少能大于5个的,所以一般也不会产生Canvas过多的问题

对于性能点方面还不太熟悉的可以先看一下这篇文章：如何把UGUI做到极致的优化

该框架包含以下六大系统：

• UI管理系统
• 遮罩系统
• 堆栈系统
• 灵活的层级系统
• 自动化系统
• 高效率系统

并且包含部分性能优化工具。

UI管理系统

管理UI界面的加载、弹出、隐藏、显示、与销毁。

自动化管理界面的生命周期函数的调用。

管理遮罩Mask的显示与隐藏。

管理界面与界面之间的交互。

管理界面的切换动画。

管理堆栈界面的循环弹出。

界面之间的交互与管理你可以这样做：

   		public void OnLoginButtonClick()
        {
            //弹出一个界面
            PopUpWindow<MainWindow>();
            UIModule.Instance.PopUpWindow<MainWindow>();

            //隐藏一个界面
            HideWindow(); //隐藏自己
            UIModule.Instance.HideWindow<MainWindow>(); //隐藏指定界面
            UIModule.Instance.HideWindow("MainWindow");

            //获取一个界面
            MainWindow mainWnd=(MainWindow)UIModule.Instance.GetWindw("MainWindow");
            MainWindow mainWnd1 = UIModule.Instance.GetWindw<MainWindow>();
            MainWindow mainWnd2 =UIModule.Instance.PopUpWindow<MainWindow>();

            //交互某个界面
            //如果需要多次交互，可以先获取到界面在调用其方法  如果只需一次交互，可以使用以下方式
            UIModule.Instance.GetWindw<MainWindow>()?.Test() ;
            UIModule.Instance.PopUpWindow<MainWindow>()?.Test();
            mainWnd.Test();

            //立即销毁界面
            DestroyWindow();        //销毁自己                                                        
            UIModule.Instance.DestroyWindow<LoginWindow>(); //销毁指定界面
            UIModule.Instance.DestroyWindow("LoginWindow");
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

遮罩系统

遮罩系统包含叠遮罩与单遮。

叠遮：一个界面一个遮罩Mask，多个界面会相互叠加。

单遮：无论弹出多少个界面，遮罩Mask只有一个，并且在最新弹出的界面下，不会出现叠加。

可在 UIDefine 配置遮罩系统的类型。

堆栈系统

堆栈内的界面会进行循环弹出，上一个界面关闭后会自动弹出下一个。

举例：在进入大厅前，只需调用 PushWindowToStack 把需要以堆栈形式弹出的界面Push到堆栈内，在需要开始弹出堆栈界面时调用StartPopFirstStackWindow接口即可。无需其他操作，当前该堆栈界面关闭时会自动弹出堆栈内下一个界面，直到堆栈内无任何待弹出界面时结束。

该堆栈界面不与正常弹出界面有耦合，在该堆栈界面上仍可以正常使用弹出其他子界面，只有关闭该堆栈界面时才会弹出下一个堆栈界面。

    public class ZMUIMain : MonoBehaviour
    {
        void Start()
        {
            UIModule.Instance.AutoInit();
            UIModule.Instance.PopUpWindow<LoginWindow>();
            //堆栈待弹出界面
            UIModule.Instance.PushWindowToStack<ShopWindow>();
            UIModule.Instance.PushWindowToStack<UserinfoWindow>();
            UIModule.Instance.PushWindowToStack<SettingWindow>();
        }
        public void OnDestroy()
        {
            UIModule.Instance.AutoRelease();
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

	public class MainWindow : WindowBase
    {
   		public override void OnShow()
        {
            UIModule.Instance.StartPopFirstStackWindow();//弹出堆栈界面
        }
   }
1
2
3
4
5
6
7

灵活的层级系统

设计层级系统的目的是为了解决界面之间模型与粒子特效叠加时导致的层级穿透问题。
该层级系统目前分为6大层，分别是基础层、一到五级级弹窗，可根据项目规模继续往上升级调整。

• 基础界面：例如 登录、大厅、游戏基础界面 层级区间为 0-99

• 一级弹窗：例如 背包、任务、商城、排行榜等 层级区间为 100-199

• 二级弹窗：例如：背包物品出售界面，排行榜玩家信息界面，一级弹窗的子弹窗都可以理解为二级弹窗。 层级区间为 200-299

• 三级弹窗：例如：奖励界面、升级界面、跑马灯。 层级区间为 300-399

- 四级弹窗：例如：提示界面，One Tow 选择界面，断线重连界面。层级区间为 400-499
1

• 五级弹窗：例如：新手引导界面。层级区间为 500-599

该层级系统由框架提供模板，只需 右键-UI-Window-弹窗级别 或者从 预制模板选择则器 中把该模板拖拽到屏幕上或场景中，即可生成对应层级的界面模板，无需手动设置。

这样设计的好处，有足够的空间供我们展示模型与特效，且保证不同级别的弹窗不会出现特效模型穿透问题。

自动化系统

该框架提倡简单繁琐的工作自动化。

一键生成

在我们搭建好一个界面时，我们只需要 Shift+U 就可以UI组件数据脚本以及 Shift+V 生成UI逻辑脚本。所有的组件查找、组件属性声明、组件事件绑定、组件事件方法创建、声明周期函数创建、脚本创建，都会自动完成。可以说我们只需要关心如何编写逻辑即可，这些事情完全由自动化工具去处理。

已经编写逻辑的脚本也支持一键生成，这种情况下自动化系统会识别原有的逻辑，并把新生成的代码追加到原脚本中，做到无缝链接。

WindowUI数据脚本生成：

Window逻辑脚本生成：

高效率系统

该框架融入了 UGUI-Editor 预制体管理系统并针对本框架进行部分修改，常用的按钮、title、Text、界面等可以做成模板放到预制体管理器中，在使用时可以直接拖拽到屏幕中即可。该模板会自动生成到对应的Canvas节点下。

并且可以

一键添加参考图

一键优化Bactch

10秒3步即可制作一个完整界面

• 1.根据界面层级顶为 选择模板
• 2.拖拽元素模板，快速搭建界面
• 3.一键生成UI、逻辑脚本

1.根据界面层级顶为 选择模板 创建元素 生成代码

2.编写逻辑 弹出界面

3.运行游戏，测试界面

案例教程

案例教程地址：高性能自动化ZMUIFrameWork框架