1. 为什么还要聊NGUI这套老控件现在新开的Unity项目十有八九直接上UGUI甚至有人开始用UI Toolkit。但你要是接手的是一些运营了好几年的老项目或者做一些对Draw Call极度敏感的休闲游戏NGUI依然是个绕不开的东西。我最近就在维护一个跑了快六年的项目UI层全是NGUI搭的改一个背包格子都得先把UISprite、UILabel、UIButton这套东西重新捋一遍。这篇东西不是NGUI的入门教程官方文档和早年那些视频教程已经讲得够细了。我想聊的是实际干活时踩过的坑和总结出来的经验——控件怎么选、参数怎么调、性能怎么抠、出问题怎么查。适合两类人看一是刚接手NGUI老项目、被各种Atlas和Depth搞得头大的开发者二是想搞清楚NGUI这套控件设计思路、从中借鉴UI架构经验的人。UGUI用久了再回头看NGUI很多设计其实挺有意思比如它的Draw Call合并逻辑、Depth排序机制理解了之后对UGUI的优化也有帮助。下面按控件类型拆开讲每个控件我都会说清楚它解决什么问题、关键参数怎么设、实际用的时候注意什么。2. NGUI控件体系的核心设计逻辑2.1 一切皆Widget理解UIRect这个基类NGUI里所有能显示的东西根子上都继承自UIRect。UISprite、UILabel、UITexture、UIPanel甚至UIWidget本身都是从这个基类派生出来的。UIRect管的是位置、尺寸、锚点、裁剪这些基础能力UIWidget在它基础上加了Depth、Color、Pivot这些渲染相关的属性。这个继承链意味着什么意味着你调一个控件的anchors不管它是图片还是文字方法都一样。我见过有人在UILabel上找不到某个属性结果去翻UISprite的代码其实应该去UIRect里找。搞清楚这个层级关系查API能省一半时间。UIRect的锚点系统是NGUI比较有特色的地方。它支持Unified统一锚点和Advanced分边锚点两种模式。统一锚点就是四条边绑同一个目标分边锚点可以左边绑A右边绑B。做自适应布局的时候分边锚点特别有用比如一个进度条背景左边固定、右边跟着某个容器走用Advanced模式两下就搞定不用写代码。2.2 Depth与Draw CallNGUI的渲染排序机制NGUI的渲染顺序靠Depth值决定值越大越靠前。但这里有个容易搞混的点Depth是分层的UIPanel有自己的DepthPanel里面每个Widget也有自己的Depth。实际排序的时候先比Panel的Depth同一个Panel内再比Widget的Depth。Draw Call合并的规则是这样的同一个Atlas里的图如果Depth连续且中间没有插入其他Atlas的图就能合并成一个Draw Call。一旦Depth顺序被打断比如Atlas A的图、Atlas B的图、又回到Atlas A的图那就至少三个Draw Call。我踩过的一个坑为了图省事把不同功能的图都塞进一个大Atlas结果发现Draw Call没降下来。原因是这些图的Depth穿插了A功能的图Depth是10、12、14B功能的是11、13、15交替出现Atlas再大也合并不了。后来把同一功能的图Depth调成连续的Draw Call直接从二十多降到个位数。注意调整Depth的时候尽量让同一个Atlas的Widget Depth连续。如果两个Atlas的图必须交替显示考虑把它们合并到一个Atlas里或者用UIPanel把不同层级隔开。2.3 Atlas的选择与维护策略Atlas是NGUI的性能基石但怎么切Atlas是有讲究的。我的经验是按“同时出现频率”来分经常一起显示的图放一个Atlas不同时出现的图分开放。比如主界面的按钮和图标放一个Atlas战斗界面的血条和技能图标放另一个这样每个界面的Draw Call都能控制在合理范围。Atlas的Padding参数也值得说一句。默认是1像素但如果你的图有半透明边缘或者要做缩放动画建议调到2到4像素否则缩放时边缘会出现相邻图的残影。这个坑我在做弹窗缩放动画时遇到过弹窗背景图边缘老是有一条其他图的边查了半天才发现是Padding太小。还有Atlas的格式移动端优先用ETC2或者ASTC桌面端可以用DXT5。但注意带Alpha通道的图ETC2的RGBA格式质量一般如果UI里有渐变或者精细的半透明效果考虑用两张图分别存RGB和Alpha或者干脆用RGBA32代价是内存翻倍。这个取舍要看项目对画质和内存的敏感程度。3. 核心控件逐个拆解与实操要点3.1 UISprite不只是显示图片那么简单UISprite是NGUI里用得最多的控件但很多人只用了它最基础的功能。它支持九宫格拉伸Sliced、平铺Tiled、填充Filled几种模式每种模式都有实际用途。九宫格拉伸适合做背景框、按钮底图设置好Border之后拉伸时边角不变形。这里有个细节Border的值是相对于原图的像素值不是比例。比如一张128x128的图Border设成20那四边各20像素不拉伸中间88x88的区域拉伸。如果图被压缩过Border值要按压缩后的尺寸算。填充模式做进度条、冷却效果特别方便。Fill Direction可以选水平、垂直、径向360度、径向90度等。做技能冷却的时候用径向360度填充Fill Amount从1降到0就是一个转圈冷却的效果。但要注意径向填充的起始角度是固定的如果要控制从哪个角度开始得改Shader或者用旋转整个Sprite的方式绕过去。平铺模式适合做重复的背景纹理比如条纹、网格。但平铺模式下如果图不是整数倍平铺边缘会有半像素的接缝。解决办法是把图做成可无缝拼接的或者用九宫格模式代替。实操心得UISprite的Type属性在运行时可以改但改完之后要调一下MarkAsChanged()否则可能不刷新。这个在动态切换按钮状态时经常用到。3.2 UILabel文本渲染的坑与优化UILabel是NGUI里问题最多的控件没有之一。它支持Bitmap字体和TrueType字体两种模式实际项目里Bitmap字体用得多因为渲染效率高、效果可控。Bitmap字体需要先用工具把字体图集做出来NGUI自带的Font Maker就能干这事。做的时候注意字符集要选全中文项目至少得包含常用汉字和标点符号。我见过有人只导了数字和字母结果中文显示不出来又得重新做一遍。UILabel的Overflow属性决定文本超出边界时的行为。Shrink Content是自动缩小字号适应边界适合做固定宽度的文本Clamp Content是裁剪超出部分不显示Resize Freely是不管边界文本多长就多长。做聊天消息、物品描述这种长度不固定的文本用Resize Freely配合UITextList或者自己写换行逻辑。文本的Draw Call是个大问题。每个UILabel至少一个Draw Call如果界面上有几十个LabelDraw Call直接爆炸。优化手段有几个一是把不常变的文本合并到一个Label里用换行符分隔二是用UILabel的Bitmap字体同一个字体的多个Label如果Depth连续理论上可以合并但实际测试下来NGUI对Label的合并支持有限最稳妥的还是减少Label数量。注意UILabel的Spacing属性可以调字间距但X和Y要分开设。做艺术字效果的时候把Y的Spacing调成负值可以让文字更紧凑但别调太狠否则上下行会重叠。3.3 UIButton交互状态与事件绑定UIButton管的是按钮的四种状态Normal、Hover、Pressed、Disabled。每个状态可以指定不同的Sprite或者颜色。实际项目里我一般用颜色变化而不是换图因为换图意味着额外的Draw Call颜色变化只是改顶点色不增加渲染开销。UIButton的事件绑定有几种方式Inspector里拖拽、代码里AddEventListener、或者用UIEventListener。Inspector拖拽适合静态按钮代码绑定适合动态生成的按钮。UIEventListener是个静态辅助类可以给任意GameObject加点击事件不用非得是UIButton做自定义控件的时候很方便。按钮的点击音效、震动反馈这些建议统一在一个地方处理不要每个按钮单独写。我一般写一个UISoundHelper在UIButton的OnClick里统一调用这样改音效或者加震动只需要动一个地方。按钮的防连点也是个常见需求。NGUI的UIButton本身没有防连点机制得自己加。简单做法是在OnClick里判断时间间隔复杂一点的做法是点击后禁用按钮等操作完成再启用。我倾向于后者因为能给出明确的视觉反馈。3.4 UIToggle与UISlider状态控件UIToggle做单选框和复选框核心是Group属性。同一个Group里的Toggle互斥只能选一个。做设置界面的画质选项、音量开关这些很方便。但UIToggle有个坑它的Value变化事件是在点击时触发的如果你在代码里直接改Value事件不会触发。要手动调一下Set(true)或者触发OnChange。这个在做“全选”功能时经常遇到点全选按钮批量改Toggle的Value结果事件没响应得手动遍历触发。UISlider做滑动条Steps属性控制步进。做音量条的时候Steps设成10或者20滑动时会有段落感。但注意Steps和Value的换算Value是0到1的归一化值实际音量要自己乘上最大值。Slider的Foreground和Thumb是分开的Foreground是填充部分Thumb是滑块。做进度条的时候把Thumb隐藏掉只留Foreground就是一个纯进度条。但Foreground的宽度是跟着Value变的如果Foreground有九宫格Border拉伸时要注意Border别设太大否则Value很小时Foreground会变形。3.5 UIPanel与UIScrollView滚动列表的性能关键UIPanel是NGUI的渲染容器也是裁剪单元。一个UIPanel里的Widget会被合并渲染超出Panel范围的部分会被裁剪掉。做滚动列表的时候UIScrollView配合UIPanel使用Panel的Clipping设成Soft Clip或者Hard Clip。Soft Clip是软裁剪边缘有渐变适合做有羽化边缘的效果Hard Clip是硬裁剪边缘一刀切性能稍好。移动端建议用Hard Clip省一点是一点。滚动列表的性能核心在于复用。NGUI本身不提供复用机制得自己写。常见的做法是维护一个Item池滚动时计算哪些Item在可视范围内把池里的Item挪过去复用。我一般会写一个UIGridRecycleView监听ScrollView的onDrag和onMomentumMove事件实时更新Item的位置和内容。这里有个细节UIGrid或者UITable在排列Item时如果Item数量很多每次Reposition都会遍历所有子物体开销不小。优化方法是只在必要时Reposition比如Item数量变化时滚动过程中不要频繁调。实操心得UIScrollView的Movement可以选Horizontal、Vertical、Unrestricted等。做垂直滚动列表时选Vertical这样水平方向的拖拽不会触发滚动避免误操作。另外ScrollView的Drag Effect可以调惯性做长列表时把Momentum Amount调小一点滚动更可控。4. 控件组合与界面搭建的实战流程4.1 从零搭一个背包界面的完整步骤拿背包界面举例说一遍完整的搭建流程。背包界面一般包含背景框、标题、关闭按钮、格子容器、滚动条、物品图标、数量文字、品质边框。第一步建UIPanel作为背包的根节点Depth设成比主界面高比如主界面是0背包设成10。Panel的Clipping先不设等会儿看情况。第二步在Panel下建背景Sprite用九宫格模式Border设成20左右尺寸调到合适大小。背景Sprite的Depth设成0。第三步建标题LabelDepth设成1。标题用Bitmap字体Overflow设成Shrink Content这样标题长了会自动缩小。第四步建关闭按钮UIButton加UISpriteDepth设成2。按钮的OnClick绑定关闭背包的方法。第五步建格子容器用一个空的GameObject加UIGrid或者UITable负责排列格子。每个格子是一个UISprite做底图上面叠一个UISprite做品质边框再叠一个UISprite做物品图标最后叠一个UILabel做数量。格子的Depth从10开始每个格子递增保证同一格子的元素Depth连续。第六步建滚动条UIScrollView加UIPanelPanel的Clipping设成Soft Clip范围就是格子容器的可视区域。把格子容器放到ScrollView的Panel下面。第七步写代码填充数据。遍历背包数据实例化格子预制体设置图标、数量、品质边框颜色然后调UIGrid的Reposition。这套流程走下来一个背包界面大概半小时能搭完。关键是Depth的规划要提前想好不然后面调起来很痛苦。4.2 界面适配锚点与分辨率的处理NGUI的适配主要靠UIRoot和锚点。UIRoot的Scaling Style有三种PixelPerfect、FixedSize、FixedSizeOnMobiles。PixelPerfect是像素完美UI尺寸和屏幕像素1比1适合对清晰度要求高的项目FixedSize是固定尺寸UI按设计分辨率缩放适合大多数项目FixedSizeOnMobiles是只在移动端用FixedSize桌面端用PixelPerfect。我一般用FixedSizeManual Height设成设计分辨率的高度比如720或者1080。这样UI在不同分辨率下等比缩放不会变形。锚点的设置要看具体需求。全屏背景用Unified锚点四条边都绑到UIRootTarget设成UIRoot的Transform。这样不管屏幕多大背景都铺满。固定位置的按钮用Unified锚点绑到某个父节点比如左上角的返回按钮绑到屏幕左上角。做适配的时候把锚点的Target设成UIRoot然后调Left和Top的偏移值。分边锚点适合做拉伸的进度条、输入框。左边绑一个固定点右边绑另一个固定点中间自动拉伸。注意锚点的Target如果是UIRoot运行时改分辨率锚点会自动更新。但如果Target是普通GameObject改分辨率后可能需要手动调一下ResetAndUpdateAnchors()。4.3 事件系统的绑定与解绑NGUI的事件系统基于UIEventListener和UIEventTrigger。UIEventListener是代码绑定的方式UIEventTrigger是Inspector里配置的方式。代码绑定的时候记得在OnDestroy里解绑否则对象销毁后事件还挂着会报空引用。我一般写一个UIBase基类在OnDestroy里统一清理事件。事件冒泡也值得说一下。NGUI的事件默认会向上冒泡子物体处理完事件后父物体还能收到。如果不想让父物体收到在子物体的回调里把事件标记为已处理。这个在做嵌套按钮的时候要注意比如一个按钮里面套了一个关闭小按钮点小按钮的时候不希望触发大按钮的点击。还有UICamera的Raycast Range默认是无限远但如果有3D物体和UI混在一起建议设一个范围避免UI事件被3D物体挡住。5. 性能优化与常见问题排查5.1 Draw Call居高不下的排查思路Draw Call高是NGUI项目最常见的问题。排查步骤我一般这么走先打开Unity的Frame Debugger看每一帧的Draw Call是怎么来的。找到UI部分的Draw Call看是哪些Panel、哪些Atlas贡献的。然后检查Atlas的使用。如果同一个界面用了多个Atlas看能不能合并。合并的原则是同时出现的图放一起不同时出现的分开放。接着检查Depth的连续性。同一个Atlas的WidgetDepth尽量连续中间不要插入其他Atlas的Widget。最后检查Label的数量。每个Label至少一个Draw Call如果Label太多考虑合并文本或者用图代替。我遇到过一个极端案例一个界面有80多个Draw Call查下来是30多个Label各占一个加上Atlas穿插最后把Label合并到5个Atlas整理成2个Draw Call降到12个。5.2 文本显示异常的几种情况UILabel显示异常的情况很多列几个常见的文字显示成方块Bitmap字体里没有这个字符。解决办法是重新做字体图集把缺失的字符加进去。文字模糊字体图集的尺寸太小或者UILabel的字体大小和字体图集不匹配。Bitmap字体是点阵字体放大后会模糊所以字体图集要做足够大或者用TrueType字体。文字被裁剪UILabel的尺寸不够或者Overflow设成了Clamp Content。调大尺寸或者改成Shrink Content。文字重叠多行文本的行距太小调UILabel的Spacing Y值。文字颜色不对UILabel的Color和字体图集的Color叠加了。检查一下UILabel的Color是不是白色字体图集的Color是不是白色两个都是白色才是原色。5.3 滚动列表卡顿的优化手段滚动列表卡顿一般三个原因Item太多、Reposition太频繁、Draw Call太高。Item太多就做复用只保留可视范围内的Item其他的回收。Reposition太频繁就减少调用次数滚动过程中不要调等滚动停止或者Item数量变化时再调。Draw Call太高就整理Atlas和Depth把同一个Item的多个Sprite合并到一个AtlasDepth调连续。还有一个容易被忽略的点UIPanel的Clipping会打断Draw Call合并。如果滚动列表的Panel和外面的Panel用了不同的AtlasClipping边界处会产生额外的Draw Call。解决办法是尽量让滚动列表的Panel和外面的Panel用同一个Atlas或者接受这个开销。5.4 常见问题速查表问题现象可能原因排查方法解决方案Draw Call过高Atlas分散、Depth穿插、Label过多Frame Debugger查看合并Atlas、调整Depth、合并Label文字显示方块字体图集缺字符检查字体图集重新制作字体图集按钮点击无响应事件未绑定、被遮挡、Raycast Range检查UIEventListener、Depth、UICamera重新绑定、调整Depth、调Raycast Range滚动列表卡顿Item过多、Reposition频繁Profiler查看做复用、减少Reposition界面错位锚点设置错误检查UIRect的锚点重新设置锚点图片边缘残影Atlas Padding太小检查Atlas设置调大Padding缩放动画边缘异常九宫格Border设置不当检查Border值调整Border值6. 从NGUI迁移到UGUI的注意事项如果项目要从NGUI迁到UGUI有几个地方要特别注意。Atlas的对应关系。NGUI的Atlas在UGUI里对应Sprite Atlas但UGUI的Sprite Atlas是Unity 2017之后才有的之前的版本得用Sprite Packer。迁移的时候要把NGUI的Atlas导出成单独的图再打成UGUI的Sprite Atlas。Depth的对应关系。NGUI的Depth在UGUI里对应Canvas的Sort Order和Hierarchy里的顺序。UGUI的渲染顺序是Hierarchy里从上到下跟NGUI的Depth逻辑相反。迁移的时候要把Depth值转换成Hierarchy顺序。锚点的对应关系。NGUI的锚点在UGUI里对应RectTransform的Anchor。UGUI的Anchor更灵活支持相对父物体的百分比定位。迁移的时候要把NGUI的锚点参数转换成UGUI的Anchor Min/Max和Pivot。事件的对应关系。NGUI的UIEventListener在UGUI里对应EventTrigger或者Button的OnClick。UGUI的事件系统更统一但写法不一样迁移的时候要重写事件绑定代码。我个人的建议是如果项目还在活跃开发尽早迁到UGUI因为UGUI的生态更好资料更多性能优化手段也更丰富。如果项目已经进入维护期改动成本太高那就继续用NGUI把现有的问题优化好就行。7. 我踩过的几个印象深刻的坑说几个实际踩过的坑都是文档里不会写的。第一个坑UILabel的字体图集用了RGB格式结果文字边缘有黑边。原因是RGB格式没有Alpha通道NGUI用亮度当Alpha但字体图集的背景不是纯黑导致边缘有杂色。解决办法是用RGBA格式或者把字体图集的背景做成纯黑。第二个坑UISprite的九宫格Border设成了比例值结果不同尺寸下拉伸效果不一样。Border是像素值不是比例这个一定要记住。第三个坑UIPanel的Clipping设成了Soft Clip但Panel的Size太小导致裁剪区域不对。Clipping的范围是Panel的Size决定的Size改了Clipping范围也跟着改。第四个坑UIButton的Pressed状态用了不同的Sprite结果按下时Draw Call增加。因为Pressed的Sprite在另一个Atlas里切换状态时Atlas变了Draw Call就上去了。解决办法是把Normal和Pressed的图放同一个Atlas或者用颜色变化代替换图。第五个坑UIScrollView的Momentum Amount设得太大滚动列表一滑就飞到底用户根本停不下来。调小到0.5左右比较合适既有惯性又可控。这些坑说到底都是对NGUI的机制理解不够深导致的。NGUI这套东西设计得比较“手动”很多东西要自己管不像UGUI那么自动化。但手动也有手动的好处控制粒度细优化空间大。用熟了之后做UI布局和性能优化其实挺顺手的。
1. 为什么还要聊NGUI这套老控件现在新开的Unity项目十有八九直接上UGUI甚至有人开始用UI Toolkit。但你要是接手的是一些运营了好几年的老项目或者做一些对Draw Call极度敏感的休闲游戏NGUI依然是个绕不开的东西。我最近就在维护一个跑了快六年的项目UI层全是NGUI搭的改一个背包格子都得先把UISprite、UILabel、UIButton这套东西重新捋一遍。这篇东西不是NGUI的入门教程官方文档和早年那些视频教程已经讲得够细了。我想聊的是实际干活时踩过的坑和总结出来的经验——控件怎么选、参数怎么调、性能怎么抠、出问题怎么查。适合两类人看一是刚接手NGUI老项目、被各种Atlas和Depth搞得头大的开发者二是想搞清楚NGUI这套控件设计思路、从中借鉴UI架构经验的人。UGUI用久了再回头看NGUI很多设计其实挺有意思比如它的Draw Call合并逻辑、Depth排序机制理解了之后对UGUI的优化也有帮助。下面按控件类型拆开讲每个控件我都会说清楚它解决什么问题、关键参数怎么设、实际用的时候注意什么。2. NGUI控件体系的核心设计逻辑2.1 一切皆Widget理解UIRect这个基类NGUI里所有能显示的东西根子上都继承自UIRect。UISprite、UILabel、UITexture、UIPanel甚至UIWidget本身都是从这个基类派生出来的。UIRect管的是位置、尺寸、锚点、裁剪这些基础能力UIWidget在它基础上加了Depth、Color、Pivot这些渲染相关的属性。这个继承链意味着什么意味着你调一个控件的anchors不管它是图片还是文字方法都一样。我见过有人在UILabel上找不到某个属性结果去翻UISprite的代码其实应该去UIRect里找。搞清楚这个层级关系查API能省一半时间。UIRect的锚点系统是NGUI比较有特色的地方。它支持Unified统一锚点和Advanced分边锚点两种模式。统一锚点就是四条边绑同一个目标分边锚点可以左边绑A右边绑B。做自适应布局的时候分边锚点特别有用比如一个进度条背景左边固定、右边跟着某个容器走用Advanced模式两下就搞定不用写代码。2.2 Depth与Draw CallNGUI的渲染排序机制NGUI的渲染顺序靠Depth值决定值越大越靠前。但这里有个容易搞混的点Depth是分层的UIPanel有自己的DepthPanel里面每个Widget也有自己的Depth。实际排序的时候先比Panel的Depth同一个Panel内再比Widget的Depth。Draw Call合并的规则是这样的同一个Atlas里的图如果Depth连续且中间没有插入其他Atlas的图就能合并成一个Draw Call。一旦Depth顺序被打断比如Atlas A的图、Atlas B的图、又回到Atlas A的图那就至少三个Draw Call。我踩过的一个坑为了图省事把不同功能的图都塞进一个大Atlas结果发现Draw Call没降下来。原因是这些图的Depth穿插了A功能的图Depth是10、12、14B功能的是11、13、15交替出现Atlas再大也合并不了。后来把同一功能的图Depth调成连续的Draw Call直接从二十多降到个位数。注意调整Depth的时候尽量让同一个Atlas的Widget Depth连续。如果两个Atlas的图必须交替显示考虑把它们合并到一个Atlas里或者用UIPanel把不同层级隔开。2.3 Atlas的选择与维护策略Atlas是NGUI的性能基石但怎么切Atlas是有讲究的。我的经验是按“同时出现频率”来分经常一起显示的图放一个Atlas不同时出现的图分开放。比如主界面的按钮和图标放一个Atlas战斗界面的血条和技能图标放另一个这样每个界面的Draw Call都能控制在合理范围。Atlas的Padding参数也值得说一句。默认是1像素但如果你的图有半透明边缘或者要做缩放动画建议调到2到4像素否则缩放时边缘会出现相邻图的残影。这个坑我在做弹窗缩放动画时遇到过弹窗背景图边缘老是有一条其他图的边查了半天才发现是Padding太小。还有Atlas的格式移动端优先用ETC2或者ASTC桌面端可以用DXT5。但注意带Alpha通道的图ETC2的RGBA格式质量一般如果UI里有渐变或者精细的半透明效果考虑用两张图分别存RGB和Alpha或者干脆用RGBA32代价是内存翻倍。这个取舍要看项目对画质和内存的敏感程度。3. 核心控件逐个拆解与实操要点3.1 UISprite不只是显示图片那么简单UISprite是NGUI里用得最多的控件但很多人只用了它最基础的功能。它支持九宫格拉伸Sliced、平铺Tiled、填充Filled几种模式每种模式都有实际用途。九宫格拉伸适合做背景框、按钮底图设置好Border之后拉伸时边角不变形。这里有个细节Border的值是相对于原图的像素值不是比例。比如一张128x128的图Border设成20那四边各20像素不拉伸中间88x88的区域拉伸。如果图被压缩过Border值要按压缩后的尺寸算。填充模式做进度条、冷却效果特别方便。Fill Direction可以选水平、垂直、径向360度、径向90度等。做技能冷却的时候用径向360度填充Fill Amount从1降到0就是一个转圈冷却的效果。但要注意径向填充的起始角度是固定的如果要控制从哪个角度开始得改Shader或者用旋转整个Sprite的方式绕过去。平铺模式适合做重复的背景纹理比如条纹、网格。但平铺模式下如果图不是整数倍平铺边缘会有半像素的接缝。解决办法是把图做成可无缝拼接的或者用九宫格模式代替。实操心得UISprite的Type属性在运行时可以改但改完之后要调一下MarkAsChanged()否则可能不刷新。这个在动态切换按钮状态时经常用到。3.2 UILabel文本渲染的坑与优化UILabel是NGUI里问题最多的控件没有之一。它支持Bitmap字体和TrueType字体两种模式实际项目里Bitmap字体用得多因为渲染效率高、效果可控。Bitmap字体需要先用工具把字体图集做出来NGUI自带的Font Maker就能干这事。做的时候注意字符集要选全中文项目至少得包含常用汉字和标点符号。我见过有人只导了数字和字母结果中文显示不出来又得重新做一遍。UILabel的Overflow属性决定文本超出边界时的行为。Shrink Content是自动缩小字号适应边界适合做固定宽度的文本Clamp Content是裁剪超出部分不显示Resize Freely是不管边界文本多长就多长。做聊天消息、物品描述这种长度不固定的文本用Resize Freely配合UITextList或者自己写换行逻辑。文本的Draw Call是个大问题。每个UILabel至少一个Draw Call如果界面上有几十个LabelDraw Call直接爆炸。优化手段有几个一是把不常变的文本合并到一个Label里用换行符分隔二是用UILabel的Bitmap字体同一个字体的多个Label如果Depth连续理论上可以合并但实际测试下来NGUI对Label的合并支持有限最稳妥的还是减少Label数量。注意UILabel的Spacing属性可以调字间距但X和Y要分开设。做艺术字效果的时候把Y的Spacing调成负值可以让文字更紧凑但别调太狠否则上下行会重叠。3.3 UIButton交互状态与事件绑定UIButton管的是按钮的四种状态Normal、Hover、Pressed、Disabled。每个状态可以指定不同的Sprite或者颜色。实际项目里我一般用颜色变化而不是换图因为换图意味着额外的Draw Call颜色变化只是改顶点色不增加渲染开销。UIButton的事件绑定有几种方式Inspector里拖拽、代码里AddEventListener、或者用UIEventListener。Inspector拖拽适合静态按钮代码绑定适合动态生成的按钮。UIEventListener是个静态辅助类可以给任意GameObject加点击事件不用非得是UIButton做自定义控件的时候很方便。按钮的点击音效、震动反馈这些建议统一在一个地方处理不要每个按钮单独写。我一般写一个UISoundHelper在UIButton的OnClick里统一调用这样改音效或者加震动只需要动一个地方。按钮的防连点也是个常见需求。NGUI的UIButton本身没有防连点机制得自己加。简单做法是在OnClick里判断时间间隔复杂一点的做法是点击后禁用按钮等操作完成再启用。我倾向于后者因为能给出明确的视觉反馈。3.4 UIToggle与UISlider状态控件UIToggle做单选框和复选框核心是Group属性。同一个Group里的Toggle互斥只能选一个。做设置界面的画质选项、音量开关这些很方便。但UIToggle有个坑它的Value变化事件是在点击时触发的如果你在代码里直接改Value事件不会触发。要手动调一下Set(true)或者触发OnChange。这个在做“全选”功能时经常遇到点全选按钮批量改Toggle的Value结果事件没响应得手动遍历触发。UISlider做滑动条Steps属性控制步进。做音量条的时候Steps设成10或者20滑动时会有段落感。但注意Steps和Value的换算Value是0到1的归一化值实际音量要自己乘上最大值。Slider的Foreground和Thumb是分开的Foreground是填充部分Thumb是滑块。做进度条的时候把Thumb隐藏掉只留Foreground就是一个纯进度条。但Foreground的宽度是跟着Value变的如果Foreground有九宫格Border拉伸时要注意Border别设太大否则Value很小时Foreground会变形。3.5 UIPanel与UIScrollView滚动列表的性能关键UIPanel是NGUI的渲染容器也是裁剪单元。一个UIPanel里的Widget会被合并渲染超出Panel范围的部分会被裁剪掉。做滚动列表的时候UIScrollView配合UIPanel使用Panel的Clipping设成Soft Clip或者Hard Clip。Soft Clip是软裁剪边缘有渐变适合做有羽化边缘的效果Hard Clip是硬裁剪边缘一刀切性能稍好。移动端建议用Hard Clip省一点是一点。滚动列表的性能核心在于复用。NGUI本身不提供复用机制得自己写。常见的做法是维护一个Item池滚动时计算哪些Item在可视范围内把池里的Item挪过去复用。我一般会写一个UIGridRecycleView监听ScrollView的onDrag和onMomentumMove事件实时更新Item的位置和内容。这里有个细节UIGrid或者UITable在排列Item时如果Item数量很多每次Reposition都会遍历所有子物体开销不小。优化方法是只在必要时Reposition比如Item数量变化时滚动过程中不要频繁调。实操心得UIScrollView的Movement可以选Horizontal、Vertical、Unrestricted等。做垂直滚动列表时选Vertical这样水平方向的拖拽不会触发滚动避免误操作。另外ScrollView的Drag Effect可以调惯性做长列表时把Momentum Amount调小一点滚动更可控。4. 控件组合与界面搭建的实战流程4.1 从零搭一个背包界面的完整步骤拿背包界面举例说一遍完整的搭建流程。背包界面一般包含背景框、标题、关闭按钮、格子容器、滚动条、物品图标、数量文字、品质边框。第一步建UIPanel作为背包的根节点Depth设成比主界面高比如主界面是0背包设成10。Panel的Clipping先不设等会儿看情况。第二步在Panel下建背景Sprite用九宫格模式Border设成20左右尺寸调到合适大小。背景Sprite的Depth设成0。第三步建标题LabelDepth设成1。标题用Bitmap字体Overflow设成Shrink Content这样标题长了会自动缩小。第四步建关闭按钮UIButton加UISpriteDepth设成2。按钮的OnClick绑定关闭背包的方法。第五步建格子容器用一个空的GameObject加UIGrid或者UITable负责排列格子。每个格子是一个UISprite做底图上面叠一个UISprite做品质边框再叠一个UISprite做物品图标最后叠一个UILabel做数量。格子的Depth从10开始每个格子递增保证同一格子的元素Depth连续。第六步建滚动条UIScrollView加UIPanelPanel的Clipping设成Soft Clip范围就是格子容器的可视区域。把格子容器放到ScrollView的Panel下面。第七步写代码填充数据。遍历背包数据实例化格子预制体设置图标、数量、品质边框颜色然后调UIGrid的Reposition。这套流程走下来一个背包界面大概半小时能搭完。关键是Depth的规划要提前想好不然后面调起来很痛苦。4.2 界面适配锚点与分辨率的处理NGUI的适配主要靠UIRoot和锚点。UIRoot的Scaling Style有三种PixelPerfect、FixedSize、FixedSizeOnMobiles。PixelPerfect是像素完美UI尺寸和屏幕像素1比1适合对清晰度要求高的项目FixedSize是固定尺寸UI按设计分辨率缩放适合大多数项目FixedSizeOnMobiles是只在移动端用FixedSize桌面端用PixelPerfect。我一般用FixedSizeManual Height设成设计分辨率的高度比如720或者1080。这样UI在不同分辨率下等比缩放不会变形。锚点的设置要看具体需求。全屏背景用Unified锚点四条边都绑到UIRootTarget设成UIRoot的Transform。这样不管屏幕多大背景都铺满。固定位置的按钮用Unified锚点绑到某个父节点比如左上角的返回按钮绑到屏幕左上角。做适配的时候把锚点的Target设成UIRoot然后调Left和Top的偏移值。分边锚点适合做拉伸的进度条、输入框。左边绑一个固定点右边绑另一个固定点中间自动拉伸。注意锚点的Target如果是UIRoot运行时改分辨率锚点会自动更新。但如果Target是普通GameObject改分辨率后可能需要手动调一下ResetAndUpdateAnchors()。4.3 事件系统的绑定与解绑NGUI的事件系统基于UIEventListener和UIEventTrigger。UIEventListener是代码绑定的方式UIEventTrigger是Inspector里配置的方式。代码绑定的时候记得在OnDestroy里解绑否则对象销毁后事件还挂着会报空引用。我一般写一个UIBase基类在OnDestroy里统一清理事件。事件冒泡也值得说一下。NGUI的事件默认会向上冒泡子物体处理完事件后父物体还能收到。如果不想让父物体收到在子物体的回调里把事件标记为已处理。这个在做嵌套按钮的时候要注意比如一个按钮里面套了一个关闭小按钮点小按钮的时候不希望触发大按钮的点击。还有UICamera的Raycast Range默认是无限远但如果有3D物体和UI混在一起建议设一个范围避免UI事件被3D物体挡住。5. 性能优化与常见问题排查5.1 Draw Call居高不下的排查思路Draw Call高是NGUI项目最常见的问题。排查步骤我一般这么走先打开Unity的Frame Debugger看每一帧的Draw Call是怎么来的。找到UI部分的Draw Call看是哪些Panel、哪些Atlas贡献的。然后检查Atlas的使用。如果同一个界面用了多个Atlas看能不能合并。合并的原则是同时出现的图放一起不同时出现的分开放。接着检查Depth的连续性。同一个Atlas的WidgetDepth尽量连续中间不要插入其他Atlas的Widget。最后检查Label的数量。每个Label至少一个Draw Call如果Label太多考虑合并文本或者用图代替。我遇到过一个极端案例一个界面有80多个Draw Call查下来是30多个Label各占一个加上Atlas穿插最后把Label合并到5个Atlas整理成2个Draw Call降到12个。5.2 文本显示异常的几种情况UILabel显示异常的情况很多列几个常见的文字显示成方块Bitmap字体里没有这个字符。解决办法是重新做字体图集把缺失的字符加进去。文字模糊字体图集的尺寸太小或者UILabel的字体大小和字体图集不匹配。Bitmap字体是点阵字体放大后会模糊所以字体图集要做足够大或者用TrueType字体。文字被裁剪UILabel的尺寸不够或者Overflow设成了Clamp Content。调大尺寸或者改成Shrink Content。文字重叠多行文本的行距太小调UILabel的Spacing Y值。文字颜色不对UILabel的Color和字体图集的Color叠加了。检查一下UILabel的Color是不是白色字体图集的Color是不是白色两个都是白色才是原色。5.3 滚动列表卡顿的优化手段滚动列表卡顿一般三个原因Item太多、Reposition太频繁、Draw Call太高。Item太多就做复用只保留可视范围内的Item其他的回收。Reposition太频繁就减少调用次数滚动过程中不要调等滚动停止或者Item数量变化时再调。Draw Call太高就整理Atlas和Depth把同一个Item的多个Sprite合并到一个AtlasDepth调连续。还有一个容易被忽略的点UIPanel的Clipping会打断Draw Call合并。如果滚动列表的Panel和外面的Panel用了不同的AtlasClipping边界处会产生额外的Draw Call。解决办法是尽量让滚动列表的Panel和外面的Panel用同一个Atlas或者接受这个开销。5.4 常见问题速查表问题现象可能原因排查方法解决方案Draw Call过高Atlas分散、Depth穿插、Label过多Frame Debugger查看合并Atlas、调整Depth、合并Label文字显示方块字体图集缺字符检查字体图集重新制作字体图集按钮点击无响应事件未绑定、被遮挡、Raycast Range检查UIEventListener、Depth、UICamera重新绑定、调整Depth、调Raycast Range滚动列表卡顿Item过多、Reposition频繁Profiler查看做复用、减少Reposition界面错位锚点设置错误检查UIRect的锚点重新设置锚点图片边缘残影Atlas Padding太小检查Atlas设置调大Padding缩放动画边缘异常九宫格Border设置不当检查Border值调整Border值6. 从NGUI迁移到UGUI的注意事项如果项目要从NGUI迁到UGUI有几个地方要特别注意。Atlas的对应关系。NGUI的Atlas在UGUI里对应Sprite Atlas但UGUI的Sprite Atlas是Unity 2017之后才有的之前的版本得用Sprite Packer。迁移的时候要把NGUI的Atlas导出成单独的图再打成UGUI的Sprite Atlas。Depth的对应关系。NGUI的Depth在UGUI里对应Canvas的Sort Order和Hierarchy里的顺序。UGUI的渲染顺序是Hierarchy里从上到下跟NGUI的Depth逻辑相反。迁移的时候要把Depth值转换成Hierarchy顺序。锚点的对应关系。NGUI的锚点在UGUI里对应RectTransform的Anchor。UGUI的Anchor更灵活支持相对父物体的百分比定位。迁移的时候要把NGUI的锚点参数转换成UGUI的Anchor Min/Max和Pivot。事件的对应关系。NGUI的UIEventListener在UGUI里对应EventTrigger或者Button的OnClick。UGUI的事件系统更统一但写法不一样迁移的时候要重写事件绑定代码。我个人的建议是如果项目还在活跃开发尽早迁到UGUI因为UGUI的生态更好资料更多性能优化手段也更丰富。如果项目已经进入维护期改动成本太高那就继续用NGUI把现有的问题优化好就行。7. 我踩过的几个印象深刻的坑说几个实际踩过的坑都是文档里不会写的。第一个坑UILabel的字体图集用了RGB格式结果文字边缘有黑边。原因是RGB格式没有Alpha通道NGUI用亮度当Alpha但字体图集的背景不是纯黑导致边缘有杂色。解决办法是用RGBA格式或者把字体图集的背景做成纯黑。第二个坑UISprite的九宫格Border设成了比例值结果不同尺寸下拉伸效果不一样。Border是像素值不是比例这个一定要记住。第三个坑UIPanel的Clipping设成了Soft Clip但Panel的Size太小导致裁剪区域不对。Clipping的范围是Panel的Size决定的Size改了Clipping范围也跟着改。第四个坑UIButton的Pressed状态用了不同的Sprite结果按下时Draw Call增加。因为Pressed的Sprite在另一个Atlas里切换状态时Atlas变了Draw Call就上去了。解决办法是把Normal和Pressed的图放同一个Atlas或者用颜色变化代替换图。第五个坑UIScrollView的Momentum Amount设得太大滚动列表一滑就飞到底用户根本停不下来。调小到0.5左右比较合适既有惯性又可控。这些坑说到底都是对NGUI的机制理解不够深导致的。NGUI这套东西设计得比较“手动”很多东西要自己管不像UGUI那么自动化。但手动也有手动的好处控制粒度细优化空间大。用熟了之后做UI布局和性能优化其实挺顺手的。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
