本篇为ZMUIFramework学习笔记的首篇。
将全面介绍一下我对于ZMUIFramework的感受和了解。
首次听说ZMUIFramework时,我对于它的印象其实并不怎么样,因为之前有学过唐老狮的小框架,其中也有关于UI 的部分,所以我想当然的以为ZMUIFramework这个UI框架和唐老师讲得大差不差,然而事实证明,我是错的,这门 ZMUIFramework很适合当作唐老师小框架的一个进阶项,其内容更加完善和强大,同时也抬高了我对于UI框架的一个认知。
以下将从三个方面讲讲我对于ZMUIFramework的认识:ZMUIFramework是什么;为什么学习ZMUIFramework;怎么学ZMUIFramework。
一;ZMUIFramework是什么?
最开始听到这个ZMUIFramework这个名字的时候,我当时就愣了一下,我第一时间就在想ZM到底是什么意思,看不懂的英文字母总给人一种很高深的感觉。UIFramework很好理解就是UI框架,那ZM呢?直到我看到授课老师是铸梦的时候,这才理解,原来ZM就是铸梦拼音的缩写…
首先,我们要明确一下UI框架的定位。实际上,无论是唐老师小框架中的UI模块,还是ZMUIFramework框架,都只在做一件事情,就是对UI进行批量管理。UI框架并不会教你什么是锚点,什么是富文本之类的,学会UI框架后也并不能保证你就能做出好看的UI,它只能保证你在对很多个UI物体操作时井井有条、方便快捷,并且有一个优质的性能,嗯,用不用UI框架来做UI其实就和用镰刀割草和用割草机割草的区别,本质都还是割草,同样都需要人工来进行操作,但效率和质量完全不一样。
总体而言,ZMUIFramework是一款高效率、高性能、自动化的UI框架。
以下是铸梦老师的总结,铸梦老师把ZMUIFramework框架分成以下几个部分:
可以看到,ZMUIFramework包含了:UI管理系统、遮罩系统、堆栈系统、层级系统、自动化系统、高效率系统、高性能系统。
这里面有一些概念对于初次接触的人来说,还是比较难以理解的,接下来分别对这些概念进行阐述。
1;UI管理系统
UI管理系统的主要目的就是让开发者可以通过脚本来做到以下几件事情:在场景中显示UI,在场景中隐藏UI,销毁场景中的UI,获取场景中的UI组件(这一步是通过自动化系统来完成的)。
(简而言之,UI管理系统就相当于是提前做好了API,开发者可以用脚本直接调用就能实现对于场景中UI的操控)
2;遮罩系统
什么是遮罩呢?
举个很简单的例子:你可以先把自己的左手放在两眼之间,手掌对着眼睛,手掌离眼睛差不多有0.3米的距离,然后你凝神仔细看自己的手掌,你就会发现,除了手掌之外的事物都变得模糊了起来,这,就是遮罩。手掌就是当前的UI面板,而除了当前所关注的UI面板外,其余场景中的一切都会被当成背景板进行模糊处理。游戏界面有时候会有很多UI面板,互相交错十分复杂,而为了让用户只关注其中的一个UI面板,就会采用这种方法,来凸显某个UI面板。比如游戏中交接任务后,会弹出一个领取任务奖励的小面板,而除了这个任务奖励面板外的其余面板都会变黑,这就是遮罩的一个体现。
如下图所示,看到下面的图片时,人们第一时间会去关注自己获得了什么奖励,而不会去在乎已经被遮罩了的背景板,当然,如果仔细盯着看的话,还是能看到背景板的。
3;堆栈系统
学过数据结构的都知道堆栈这个东西,可堆栈和UI框架有什么关系呢?其实这一部分框架功能只是用到了队列的知识点,我个人感觉叫堆栈系统可能并不是很贴切,初学时会让人摸不着头脑。
简而言之,这一部分是用到了队列先进先出的一个特点,举个简单的例子:
市面上很多游戏,当玩家刚开始进入游戏大厅的时候,会跳出来一堆弹窗(也就是UI面板),这些弹窗总得有个先后顺序吧?
比如说要弹出三个弹窗:活动弹窗、任务领取弹窗、限时优惠弹窗。
假设用队列作为容器来装这三个弹窗,比如先把活动弹窗加入队列,再把任务领取弹窗加入队列,最后把限时优惠弹窗加入队列,而根据队列的先进先出的规则,就会按照顺序先弹出活动弹窗,这个时候玩家点击关闭按钮关闭了活动弹窗,然后队列中就会把任务领取弹窗给弹出来,这个时候玩家再点击关闭按钮关闭任务领取弹窗,然后队列又会跳出限时优惠弹窗,玩家再次点击关闭,就不会再有弹窗弹出来了,就可以正常的玩游戏了。
如上,就是堆栈系统的作用。总之,堆栈系统很适合用来做新手引导一类的功能。
4;层级系统
层级低的会显示在最下层,而层级高的则会显示在最上层。上层的会遮挡住下层,玩家最先看到的肯定是最上层的东西。
在Unity中可以通过调整Order in Layer的值,改变UI面板的层级,设置层级还是比较简单的,数字越大代表的层级就越高,反之则低,也不是什么很难理解的东西。
以下是铸梦老师对于层级的一个划分,实际上自己也可以根据自己的项目进行不同的划分,不必跟铸梦老师划分的一模一样。
5;自动化系统
自动化系统,可以支持一键生成脚本。不过其实也没必要把这个想象的太神奇,因为原理还是很简单的。这其中用到了编辑器拓展的知识,但总体来说,流程并不复杂,我这里简要说一下流程:
先设定好脚本生成后放置的路径–>获得UI面板下各UI物体的名称(编辑器拓展)->将UI名称和固定的字符串进行拼接–>在指定路径下创建脚本文件–>将拼接好的字符串放进脚本文件里面。
以上就是一键生成脚本的步骤,用到的技术并不难,虽然说只能生成一个大概的脚本框架,更加具体的逻辑还得自己写,但是用起来真的很方便,而且通过一键生成出来的脚本代码也十分的规范。
6;高效率系统
高效率系统,就是指用的UGUI-Editor插件,来管理UI模板之类的,具体就不多说了,详情可以去GIthub上的插件地址了解:liuhaopen/UGUI-Editor。
7;高性能系统
主要从三个方面提升性能:一个是窗口预加载;二是减少网格重建;三是禁用不必要的RaycastTarget。
窗口预加载就是指在打开某个UI面板前,先提前生成UI物体但并不显示,这样如果需要打开该UI面板,因为已经生成好了,自然能非常流畅的显示该UI面板。
减少网格重建。网格重建是什么?简单而言,每一个UI物体比如Text、Button这些,都是由网格绘制而成的,若是某个Canvas下的任一UI物体有变化的话,就需要重新绘制该Canvas的整个网格,也就是说牵一发而动全身,网格绘制频繁会非常浪费性能。所以就需要明确的知晓哪些操作可以避免网格重建,从而提升UI的性能。
禁用不必要的RaycastTarget,比如Text,Image等都是不需要点击的UI物体,所以直接禁用也能提升一定的性能。
以上,就是我对ZMUIFramework是什么的全部理解了。其中有一些细节没有深入的讲,是因为感觉一篇笔记很难说清楚,准备留给后面几篇再展开来讲。
二;为什么学习ZMUIFramework
为什么要学?很简单就两字——好用。
看起来有这么多功能,十分的复杂,但使用起来却很简单(比如说一键生成脚本这个功能,实现这个功能肯定略微有些复杂,但实际操作就是用鼠标点一下就能立马生成脚本了)。如果为了想偷懒而不想学习ZMUIFramework的话,那无疑是大错特错,想偷懒那么学ZMUIFramework才是王道。(当然我目前还没遇到比ZMUIFramework更好的UI框架)
该框架解决了一些UI的问题,开发功能更加方便,而且性能方面也进行了极大的优化,不用太过担心UI卡顿的问题,制作UI的效率也能得到很大的提升。当然,我也不是无脑吹,这个框架还是有不少的缺点的。可能说缺点不太合适,这个UI框架还是有许多可拓展的地方的。最明显的一个就是,当前的这个框架只支持老版本的UGUI,还不支持TMP格式的新版UI,如果需要支持TMP格式的新版UI的话就需要自己去拓展了。
三;怎么学习ZMUIFramework
该框架适合的人群:具备一定的Unity基础,最好是做过项目。对UGUI、数据持久化(用到了PlayerPrefs)、ScriptableObject、编辑器拓展、MVC、单例等有一定了解再来看这门课比较合适,不然很容易就看不懂在讲什么。
我个人觉得吧,ZMUIFramework并不是那种学会就能马上用的框架,如果要用到自己的项目中的话,还需要对该框架进行一些修改,比如说要支持TMP格式的UI肯定要修改一番,还有对其中的一些方法进行抉择,比如说是选择用tag的方式还是选择名字前缀比如[Text]的方式来查找UI物体等。
总之,学它用它就完事了。