2022年体育电竞赛事Unity名目中UI好术必需晓得的法式要面

本文转载自IndieACE,是开辟者DonaldW写给UI好术共事的1篇文章,本文题为《Unity名目中UI同窗需知的法式相干要面》,共享给年夜家,但愿增进法式战好术之间的彼此懂得。

布景战目标

本文的布景是《自力防地》(Killer)名目已停止到了必然阶段。固然之前定下了UI建造标准,但半途也更新了标准,但法式战好术出有详细面临里相同,也出有论述标准的缘由战降处所法。

以是,本文目标是为UI好术共事先容:1.脚游机能相干的规范是甚么;2.详细建造时须要注重甚么;3.甚么样的UI流程是下效的。

注,以下内争容并不是请求UI好术同窗皆把握、或请求UI好术零丁去向理。而是但愿UI好术同窗能晓得有那些1回事须要斟酌。最主要的是:正在设想之初,能意想到能够有题目,须要找法式往相同。

休会战机能

极度的休会战极度的机能皆没有实际。正在脚游仄台上,咱们应当寻求的是休会战机能均衡。

机能评价规范

在线游玩中,任1元素(UI图片、殊效、模子等)对机能的影响皆能够拆分为以下4种影响:CPU耗损、GPU耗损、中存耗损战内争存耗损。

现便UI相干的影响停止举比方下。

CPU耗损

CPU担任把UI界里的逻辑布局停止更新、汇总,并担任把那些数据筹办好。最初把那些疑息传给GPU。

UI普通影响CPU的身分包含:

界里布局庞杂度

界里布局变更频次

动绘庞杂度

GPU耗损

GPU担任终究绘里的画造、衬着。由于衬着是庞杂的流程、且运算量庞大、且脚机GPU固有的硬件限定(焦点数少、浮面运算速率缓),脚游的机能瓶颈常常皆产生正在GPU。

也便是道,GPU耗损是机能劣化的重中之重。

UI普通影响GPU的身分包含:

画造次数(drawcall),战单张图片的数目等身分相干

图片终究正在屏幕所揭示的里积

图片是不是通明

shader的庞杂度

重画度(overrdraw,单元像素的从头画造次数)

此中,出格值得注重的是drawcall战重画庞杂度。

drawcall

每个差别“材量”的工具皆须要占用1个drawcall。每多1个drawcall一定带去额定的CPU耗损战GPU耗损。

能够简略以为,当两个工具的材量的shader不异,且纹理不异,则它们是统一个材量,正在衬着它们的时辰,引擎会停止劣化,汇合并drawcall为1个。

overdraw

overdraw表现单元像素的从头画造次数。

左部表现overdraw的水平,越“明”的地区表现overdraw的水平越下,也便越耗损GPU。

中存耗损

中存耗损指的是资本正在用户“硬盘里占用了几多几多M”。

若是中存过年夜,能够致使用户没有情愿下载,或下载装置后,硬盘空间没有够,装置没有胜利。

普通影响中存的身分包含:

图片数量

图片的分辩率年夜小

图片是不是紧缩

别的,劣化了中存,内争存常常也会从中受害。

内争存耗损

内争存耗损指的是“在线游玩正在现实运转时,占用几多M”。

若是内争存过年夜,能够会致使用户在线游玩休会没有流利,乃至crash。
普通影响内争存的身分包含:

图片数量

图片的分辩率年夜小

图片的分辩率是不是是2的N次圆,

图片是不是紧缩

UI建造要面

UI输入的图片,可正在Unity里设置为新的等比缩放分辩率。

正果如斯,UI好术同窗正在输入UI揭图时,普通环境下按好术表示图的本分辩率输入便可。

零丁调分辩率的任务,今朝是由开辟同窗停止。最抱负的任务流程,是UI好术同窗正在导图到Unity的时辰,便零丁按需设置分辩率(战殊效场景模子同窗的任务流程1样)。

至于甚么环境下须要停止降分辩率操纵,睹下文。

低频变更的图片的分辩率能够很小

本方式能为GPU、中存、内争存带去益处

低频变更的图片指的是杂色的、突变等变更比拟陡峭的图片。

低频变更的图片推伸后仍能表示很是近似的结果,那是由于GPU正在图片采样时会停止相邻像素的插值,从而能年夜概复原之前的光滑度。

总而行之,低频变更的图片的分辩率能够很小。

真比方下。

低频变更图片:

低频变更图片:输入给法式的图片减少为32×32:

低频变更图片:法式正在利用时将32×32推伸为512×512:

“好”的UI能够推起“没有好的”UI的表示

本方式能为GPU、中存、内争存带去益处

“好”的UI能够推起“没有好的”UI的表示那句话能够有以下的懂得:

没有紧缩的UI能够推起紧缩的UI表示

下分辩率的UI能够推起低分辩率的UI表示

下频次变更的UI能够推起低频次变更的UI表示

如上图的喷射线局部,它现实是由两张差别的喷射线图高低叠减而成。基层的喷射线逆时针动弹,下层的喷射线顺时针动弹。

因为下层的喷射线做为表示的主体以是采用了“好”的设置(分辩率下、非紧缩),那末做为表示的陪衬局部的基层图,便算接纳比拟“没有好”的设置(分辩率低,紧缩),也没有轻易发觉。

以是,针对这类多UI同时或同地位呈现的环境,能够酌情调低某些UI的设置。

固然,那个例子中,高低两层采用统一张下品德的图也是处理计划之1。

输入图片的分辩率能够酌情低于视网膜的分辩率

本方式能为GPU、中存、内争存带去益处

从iPhone4起头鼓起了视网膜级此外PPI。那让脚机的肆意App的肆意界里的肆意1帧,皆看没有出任何像素感,进步了App的用户休会。

但正在在线游玩中,在线游玩有以下特色:

在线游玩的UI资本是自力本创的(App的UI资本有能够间接利用操纵体系自带的资本,节流中存),会带去很是客不雅的中存、内争存耗损

在线游玩是静态的

在线游玩的1帧内争,最吸收玩家面前的常常是1个部分

再按照下面提到的“好”的UI能够推起“没有好的”UI的表示

以是正在在线游玩中,能够酌情将特定非重面的UI图片的分辩率下降。

在线游玩中详细处置的例子:表示的主体是视网膜分辩率的,而它上面的弹出框布景做为表示陪衬,采用了低于视网膜分辩率也发觉没有出。

往除UI图片中不用要的通讲、不用要的地区

本方式能为GPU、中存、内争存带去益处

如上图。天球UI图片是出须要有通明通讲的,由于它一向以整张底图的情势存正在于在线游玩。

舆图UI图左部是能够考虑是不是须要存正在的,由于它正在在线游玩中一向皆被带有布景的排名列表UI盖住。

UI图片普通环境下皆没有须要mipmap

本方式能为中存、内争存带去益处

mipmap会天生多张小图去防止减少图片刻出须要的GPU采样耗损。但利用mipmap的图片会比没有利用的图片多占用约3分之1的中存战内争存。

因为《自力防地》名目以iPhone4做为方针分辩率停止建造,且以为此分辩率是需撑持的最小分辩率,也便是道,UI图片很少有减少的环境呈现,以是《自力防地》名目的UI图片皆没有须要mipmap,削减出须要的中存、内争存耗损。

其余名目若是需兼容更低分辩率的装备,则要按需挑选mipmap。

多张UI图片能够挨包正在一路

本方式能为GPU带去极年夜益处,但能够为中存、内争存带去害处

操纵很简略,挑选须要挨包的图了以后,正在属性里板里键进肆意统一英笔墨符串便可。

如许了以后,多张图被挨包正在1张图外面。

因为多张图片挨包正在了一路,按照下面提过的归并drawcall的缘由,会年夜幅削减那些图片带去的GPU耗损。

挨包以后,会发生过剩的通明地区,以是挨包能够带去的害处便是删年夜了中存、内争存。

以是,关头是挑选哪些图片停止挨包。去躲避通明地区的呈现。挑选法则以下:

不必的图没有挨包。由于挨包的图,便算从没有利用,也仍是会进进到终究的ipa或apk里;

小的图尽量挨包

年夜图(比方年夜于512×512,罕见的有UI底图)没有挨包。由于年夜图会很有能够发生通明地区;

下降须要挨包中的分辩率最年夜的图。

没有挨包的单张UI图片分辩率必需是奇数、很有能够须要是2的N次幂

本方式能为GPU、中存、内争存带去益处

根据下面的多张UI图片能够挨包正在一路做了以后,没有挨包的图应当是少许的。

但因为那些图是自力存正在于内争存,以是有更严酷的请求:

单张UI图片分辩率必需是奇数。

单张UI图片当有以下任1特色时,分辩率必需是2的N次幂

需紧缩的单张UI图片。

需tiled的单张UI图片。tiled即图片仄展,经常使用于4圆持续UI图。

需mipmap的单张UI图片。即多层图片。普通环境下,UI的图片皆没有需mipmap,以是不必斟酌那个。

@法式同窗:此刻年夜局部挪动装备GPU是撑持非2的N次圆的。即NPOTSupport.Full或Restricted的。Full的GPU对肆意分辩率的纹理皆能间接拜候;Restricted的GPU,普通环境下对肆意分辩率的纹理皆能拜候,但对mipmap、tiled的纹理睬把它pad成POT。

以是,mipmap、或tiled的非挨包单张纹理需强迫POT。

笔者身旁的白米、3星、华为等脚机,皆撑持NPOTSupport.Full,只发明小米3撑持NPOTSupport.Restricted,小米3W撑持NPOTSupport.Full。

@法式同窗:ETC1(4bit/pixel)胜利紧缩的请求是POT且没有带通明通讲,不然将以16bit/pixel的体例紧缩保管;PVRTC胜利紧缩的请求是POT且圆形,不然将以true color(32bit/pixel)没有紧缩保管。经常使用的计划是,把UI图片挨包到1张年夜图,且年夜图同时知足ETC1战PVRTC的请求,即POT、且通明通讲拆分到年夜图的下半部、且圆形。

那须要有特别的shader对那张年夜图停止采样:RGB与本来uv、A与uv背下偏偏移0.5。下半部的Alpha局部能够把Alpha值除以3均匀分部到RGB通讲,采样时把RGB相减做为Alpha,如许有益于ETC1紧缩的结果。

果年夜图的建造须要上半部是UI图片的RGB局部、下半部是UI图片的Alpha局部。以是须要自研或获得合适的atlas算法对UI图片停止排版。此时下面提到的Unity自带的Sprite Packer方式将没有再合用。

排版后的年夜图的可容忍华侈分辩率是本图的16bit/4bit=4倍,或32bit/4bit=8倍。

挨包的UI图片的分辩率能够是肆意的

但仍然保举输入奇数分辩率,防止将来带去没有可知的费事。

UI最好能用9宫格+部分装潢完成

本方式能为GPU、中存、内争存带去益处

9宫格已长短经常用的UI建造方式。

9宫格UI几近是百利无1害,以是但愿UI同窗能用9宫格的尽可能用9宫格。

利用9宫格有以下多少个值得注重的技能:

9宫格UI图片能够做得很小只给正圆形的图,而并不是下面1个少条形的图

若是UI图片外部是低频变更(人话:比拟光滑的纹理),仍然可使用9宫格

若是UI图片外部是下频变更(人话:比拟细的庞杂纹理),普通环境下便没有能利用9宫格了

但能够把那些下频变更的纹理设想成只正在边沿呈现,让9宫格10字架内争仍然是低频变更,那这类UI图仍然能够9宫格

切9宫格时,边沿局部应尽可能细、外部10字架局部应当尽可能丰满。如许能够确保那个UI可以或许利用于很是小的场所而没有脱帮

字体挑选计划

本方式能为中存、内争存带去益处,能够为GPU带去益处

正在挑选在线游玩字体的时辰,除确保雅观水平以外,借需斟酌:

字体品种:该当坚持正在2类之内:用于题目的中文偏偏设想的字体、用于注释的中文偏偏正式的字体。如需,可额定插手英文偏偏设想的字体;

字体编码范例:若是是中笔墨体,需斟酌是不是GB2312编码乃至是GBK编码。防止字体呈现有些经常使用中笔墨出有的环境;

正在挑选字体时,应寄望正在脚机上的表示。比方1些字体比拟细,正在脚机上看没有浑,到前面须要皆减细减描边,带去出须要的耗损,也带去了以后额定的烦琐的字体相干任务。