火星网校
理解万岁：Unity项目中UI美术必须知道的程序要点
发布时间：2018-11-17 19:57:24
原文题为《Unity项目中UI同学需知的程序相关要点》，分享给大家，希望促进程序和美术之间的相互理解。
背景和目的：
本文的背景是《独立防线》（Killer）项目已进行到了一定阶段。虽然之前定下了UI制作规范，但中途也更新了规范，但程序和美术没有具体面对面沟通，也没有阐述规范的原因和落地方法。
所以，本文目的是为UI美术同事介绍：1.手游性能相关的标准是什么；2.具体制作时需要注意什么；3.什么样的UI流程是高效的。
注，以下内容并非要求UI美术同学都掌握或者要求UI美术单独去处理，而是希望UI美术同学能知道这些需要考虑。最重要的是：在设计之初，能意识到可能有问题，需要找程序去沟通。
体验和性能：
极端的体验和极端的性能都不现实。在手游平台上，我们应该追求的是体验和性能平衡。
性能评估标准：
游戏中，任一元素（UI图片、特效、模型等）对性能的影响都可以拆分为以下4种影响：CPU消耗、GPU消耗、外存消耗和内存消耗。
现就UI相关的影响进行举例如下。
CPU消耗：
CPU负责把UI界面的逻辑结构进行更新、汇总，并负责把这些数据准备好。最后把这些信息传给GPU。
UI一般影响CPU的因素包括：
界面结构复杂度。
界面结构变化频率。
动画复杂度。
GPU消耗。
GPU负责最终画面的绘制、渲染。因为渲染是复杂的流程、且运算量巨大、且手机GPU固有的硬件限制（核心数少、浮点运算速度慢），手游的性能瓶颈往往都发生在GPU。
也就是说，GPU消耗是性能优化的重中之重。
UI一般影响GPU的因素包括：
绘制次数（drawcall），和单张图片的数量等因素相关。
图片最终在屏幕所展现的面积。
图片是否透明。
shader的复杂度。
重绘度（overrdraw，单位像素的重新绘制次数）。
其中，特别值得注意的是drawcall和重绘复杂度。
drawcall：
每一个不同“材质”的东西都需要占用一个drawcall。每多一个drawcall必然带来额外的CPU消耗和GPU消耗。
可以简单认为，当两个东西的材质的shader相同，且纹理相同，则它们是同一个材质，在渲染它们的时候，引擎会进行优化，会合并drawcall为1个。
overdraw：
overdraw表示单位像素的重新绘制次数。
右部表示overdraw的程度，越“亮”的区域表示overdraw的程度越高，也就越消耗GPU。
外存消耗：
外存消耗指的是资源在用户“硬盘里占用了多少多少M”。
如果外存过大，可能导致用户不愿意下载，或者下载安装后，硬盘空间不够，安装不成功。
一般影响外存的因素包括：
图片数目。
图片的分辨率大小。
图片是否压缩。
另外，优化了外存，内存往往也会从中受益。
内存消耗：
内存消耗指的是“游戏在实际运行时，占用多少M”。
如果内存过大，可能会导致用户游戏体验不流畅，甚至crash。
一般影响内存的因素包括：
图片数目。
图片的分辨率大小。
图片的分辨率是否是2的N次方。
图片是否压缩。
UI制作要点：
UI输出的图片，可在Unity里设置为新的等比缩放分辨率。
正因如此，UI美术同学在输出UI贴图时，一般情况下按美术示意图的原分辨率输出即可。
单独调分辨率的工作，目前是由开发同学进行。最理想的工作流程，是UI美术同学在导图到Unity的时候，就单独按需设置分辨率（和特效场景模型同学的工作流程一样）。
至于什么情况下需要进行降分辨率操作，见下文。
低频变化的图片的分辨率可以很小。
本方法能为GPU、外存、内存带来好处。
低频变化的图片指的是纯色的、渐变等变化比较平缓的图片。
低频变化的图片拉伸后仍能表现非常类似的效果，这是因为GPU在图片采样时会进行相邻像素的插值，从而能大概还原之前的平滑度。
总而言之，低频变化的图片的分辨率可以很小。
实例如下。
低频变化图片：
低频变化图片：输出给程序的图片缩小为32x32：
低频变化图片：程序在使用时将32x32拉伸为512x512：
“好的”UI可以拉起“不好的”UI的表现这句话可以有以下的理解：
不压缩的UI可以拉起压缩的UI表现。
高分辨率的UI可以拉起低分辨率的UI表现。
高频率变化的UI可以拉起低频率变化的UI表现。
如上图的放射线部分，它实际是由两张不同的放射线图上下叠加而成。下层的放射线顺时针转动，上层的放射线逆时针转动。
由于上层的放射线作为表现的主体所以采取了“好的”设置（分辨率高、非压缩），那么作为表现的衬托部分的下层图，就算采用比较“不好的”设置（分辨率低，压缩），也不容易察觉。
所以，针对这种多UI同时或同位置出现的情况，可以酌情调低某些UI的设置。
当然，这个例子中，上下两层采取同一张高品质的图也是解决方案之一。
输出图片的分辨率可以酌情低于视网膜的分辨率。
本方法能为GPU、外存、内存带来好处。
从iPhone4开始兴起了视网膜级别的PPI。这让手机的任意App的任意界面的任意一帧，都看不出任何像素感，提高了App的用户体验。
但在游戏中，游戏有以下特点：
游戏的UI资源是独立原创的（App的UI资源有可能直接使用操作系统自带的资源，节省外存），会带来非常客观的外存、内存消耗。
游戏是动态的，游戏的一帧内，最吸引玩家眼前的往往是一个局部，再根据上面提到的“好的”UI可以拉起“不好的”UI的表现。
所以在游戏中，可以酌情将特定非重点的UI图片的分辨率降低。
游戏中具体处理的例子：表现的主体是视网膜分辨率的，而它下面的弹出框背景作为表现衬托，采取了低于视网膜分辨率也察觉不出。
去除UI图片中不必要的通道、不必要的区域。
本方法能为GPU、外存、内存带来好处。
如上图。地球UI图片是没必要有透明通道的，因为它一直以整张底图的形式存在于游戏。
地图UI图右部是可以斟酌是否需要存在的，因为它在游戏中一直都被带有背景的排名列表UI挡住。
UI图片一般情况下都不需要mipmap。
本方法能为外存、内存带来好处。
mipmap会生成多张小图来避免缩小图片时没必要的GPU采样消耗。但使用mipmap的图片会比不使用的图片多占用约三分之一的外存和内存。
由于《独立防线》项目以iPhone4作为目标分辨率进行制作，且认为此分辨率是需支持的最小分辨率，也就是说，UI图片很少有缩小的情况出现，所以《独立防线》项目的UI图片都不需要mipmap，减少没必要的外存、内存消耗。
其他项目如果需兼容更低分辨率的设备，则要按需选择mipmap。
多张UI图片可以打包在一起。
本方法能为GPU带来极大好处，但可能为外存、内存带来坏处。
操作很简单，选择需要打包的图之后，在属性面板里键入任意同一英文字符串即可。
这样了之后，多张图被打包在一张图里面。
由于多张图片打包在了一起，根据上面提过的合并drawcall的原因，会大幅减少这些图片带来的GPU消耗。
打包之后，会产生多余的透明区域，所以打包可能带来的坏处就是增大了外存、内存。
所以，关键是选择哪些图片进行打包来规避透明区域的出现。选择规则如下：
不用的图不打包。因为打包的图，就算从不使用，也还是会进入到最终的ipa或者apk里；小的图尽可能打包。
大图（比如大于512x512，常见的有UI底图）不打包。因为大图会很有可能产生透明区域；
降低需要打包中的分辨率最大的图。
不打包的单张UI图片分辨率必须是偶数、很有可能需要是2的N次幂。
本方法能为GPU、外存、内存带来好处。
按照上面的多张UI图片可以打包在一起做了之后，不打包的图应该是少量的。
但由于这些图是独立存在于内存，所以有更严格的要求：
单张UI图片分辨率必须是偶数。
单张UI图片当有以下任一特点时，分辨率必须是2的N次幂。
需压缩的单张UI图片。
需tiled的单张UI图片。tiled即图片平铺，常用于四方连续UI图。
需mipmap的单张UI图片。即多层图片。一般情况下，UI的图片都不需mipmap，所以不用考虑这个。
@程序同学：现在大部分移动设备GPU是支持非2的N次方的。即NPOTSupport.Full或者Restricted的。Full的GPU对任意分辨率的纹理都能直接访问；Restricted的GPU，一般情况下对任意分辨率的纹理都能访问，但对于mipmap、tiled的纹理会把它pad成POT。
所以，mipmap或tiled的非打包单张纹理需强制POT。
笔者身边的红米、三星、华为等手机，都支持NPOTSupport.Full，只发现小米3支持NPOTSupport.Restricted，小米3W支持NPOTSupport.Full。
@程序同学：ETC1（4bit/pixel）成功压缩的要求是POT且不带透明通道，否则将以16bit/pixel的方式压缩保存；PVRTC成功压缩的要求是POT且方形，否则将以true color（32bit/pixel）不压缩保存。常用的方案是，把UI图片打包到一张大图，且大图同时满足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最好能用九宫格+局部装饰实现。
本方法能为GPU、外存、内存带来好处。
九宫格已经是非常常用的UI制作方法。
九宫格UI几乎是百利无一害，所以希望UI同学能用九宫格的尽量用九宫格。
使用九宫格有以下几个值得注意的技巧：
九宫格UI图片可以做得很小只给正方形的图，而并非上面一个长条形的图。
如果UI图片内部是低频变化（人话：比较平滑的纹理），依然可以使用九宫格。
如果UI图片内部是高频变化（人话：比较细的复杂纹理），一般情况下就不能使用九宫格了。
但可以把这些高频变化的纹理设计成只在边缘出现，让九宫格十字架内依然是低频变化，那这种UI图依然可以九宫格。
切九宫格时，边缘部分应尽量细、内部十字架部分应该尽量饱满。这样可以确保这个UI能够使用于非常小的场合而不穿帮。
字体选择方案：
本方法能为外存、内存带来好处，可能为GPU带来好处。
在选择游戏字体的时候，除了确保美观程度之外，还需考虑：
字体种类：应当保持在2类以内：用于标题的中文偏设计的字体、用于正文的中文偏正式的字体。如需，可额外加入英文偏设计的字体。
字体编码类型：如果是中文字体，需考虑是否GB2312编码甚至是GBK编码。避免字体出现有些常用中文字没有的情况；在选择字体时，应留意在手机上的表现。比如一些字体比较细，在手机上看不清，到后面需要都加粗加描边，带来没必要的消耗，也带来了之后额外的繁琐的字体相关工作。
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
-
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！
增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
-
在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
-
今天，我们聊聊皮克斯的《头脑特工队》系列
-
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？
中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
-
近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。
