士郎 UnityUGUI开发的个人总结

33
回复
2949
查看
打印 上一主题 下一主题
[ 复制链接 ]
排名
1
昨日变化

7615

主题

8162

帖子

3万

积分

Rank: 16

UID
1231
好友
186
蛮牛币
10064
威望
30
注册时间
2013-7-29
在线时间
3930 小时
最后登录
2019-4-26

活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
这篇文章主要总结一些项目中UI开发过程遇到的坑和解决方案

NGUI or UGUI

现在主流的UI解决方案主要是NGUI和UGUI,在Unity官方推出UGUI之前,NGUI可以说在Unity UI解决方案中独占鳌头,另外加上不断的更新维护,NGUI的工具可以说十分完备,15年之前大量的项目都是基于NGUI来搭建UI系统。但随着官方加持的UGUI推出,现在越来越多的项目选择采用官方的UGUI,我们项目也采用了UGUI,所以本篇也以UGUI为主体总结一些UI开发遇到的问题


不过,对于刚接手UI的同学,NGUI的源码非常值得研究,它的许多工具组件,例如循环列表之类的设计思路非常值得借鉴,而且UGUI自身没有提供这类组件,当项目中有类似需求的时候,就得借助其他插件或者自己造轮子。


层级管理
  • 基于Canvas分页面


UGUI的合并批次和渲染基于Canvas,任意Canvas下的UI元素的Vertex, Rect, Color, Material, Texture发生改变,可能引起Canvas数据更新和Batch更新计算,那么Canvas的第一层区分可以基于逻辑页面来进行区分。





这样区分canvas可以保证当一个canvas触发rebuild之类的情况时不会影响到其他canvas,同时所有属于这个canvas的图片可以打成一个图集来达到降低drawcall的目的。然后就是canvas的排序,我们可以使用canvas的SortingLayer和OrderInLayer来进行排序。SortingLayer大的显示在上面,当SortingLayer相同的时候,根据OrderInLayer来排序。这样我们就可以先按照逻辑将UI页面分成几大类,然后添加对应的SortingLayer。





对于普通页面设置成Normal,弹窗类页面就设置成Top,提示文字类设置成ToolTip,然后在打开页面时只需要关心在本SortingLayer下的一个先后顺序,而不需要担心弹窗会被普通页面覆盖,提示文字被弹窗覆盖。同一个SortingLayer下的OrderInLayer也可以根据需求配置成默认固定Order的或者动态,后打开的Order更高等方法。


  • Canvas内在分Canvas

有的时候美术会提需求在UI页面上插入一些粒子特效,如要需要这些粒子特效能和UI产生正确的前后顺序,需要修改ParticleSystemRenderer中的SortingLayer和OrderInLayer。如下图


但这样也会导致canvas变多,drawcall变多。最好的方案还是让美术设计UI的时候尽量去减少这种UI和例子层叠的情况。
另外对于特别复杂的UI,也可以通过动静分离,把静态UI放一个canvas,然后将经常变化的UI放到一个canvas来提升性能。
分辨率适配
  • 锚点适配

分辨率适配是UI设计中比较头疼的一部分,不过UGUI基于recttransform的这套解决方案能很方便基于锚点做适配。现在主流的分辨大多是16:9,UI开发也通常以16:9为基准,这里还要测试一下比较极端的两个分辨率,ipad的4:3分辨率(如果项目不准备出ipad可以不考虑这个),和iPhone X的2:1分辨率。基于非中心锚点的UI,在不同分辨率,尤其是上述两种极端分辨率的情况下,可能会产生超出脱离屏幕的情况,这里我们可以更改rootcanvas的CanvasScaler组件来改善,2:1分辨率,改为MatchHeight,4:3分辨率,改为MatchWidth,这样能解决UI超出屏幕的问题,但是可能会导致UI产生以一些留空的情况。



  • 背景图适配

对于以Anchor定位的UI元素可以分辨率自适应,但是一些填充背景的背景图却无法简单去设置锚点为四个屏幕角落,否则按照16:9的原图会再其他便分辨下被拉伸变形。这里可以写一个脚本,在awake的时候获取image的rootcanvas的rectSize,然后通过这个比例和自身图片的比例进行比较,进行缩放适配,保证填充屏幕的同时不会被拉伸,或者干脆简单的利用下Image自身的PreserveAspect属性也能达到效果。


  • 刘海屏适配

对于iPhone X的刘海屏,如果不做适配,会导致一些UI被刘海遮挡。其实适配原理也很简单,先通过SystemInfo获取到设备是否为iPhone X,然后修改Canvas的RectTransform的AnchorMin和AnchorMax的X轴各自往中央缩一些即可。对于需要铺满屏幕的背景图片,因为canvas被缩小了,所以需要往外扩大一些。


UI动画
NGUI自身提供了tween动画,而UGUI没有提供,我们可以采用DoTween插件来用代码实现一些动画,或者让美术用来实现动画效果,但是主要这两种方法通常都会导致Canvas的重建从而影响性能。对于一些效果例如呼吸灯闪烁我们也可以通过shader方式来实现,以后可能会详细的写一篇相关的文章。


模型放进UI
UI设计经常遇到需要把模型放在UI上显示的需求,做法也有很多种。


  • 合理设计

这里的合理设计就是指UI相机渲染UI,场景相机渲染模型,两者叠加正好能适配,无需做其他操作,但是大部分情况,美术和策划给不出这样的设计。


  • 直接用UICamara渲染模型

复制一份UI模型,更改其layer为UI渲染用的layer用UICamra渲染即可,因为人物模型绝大多数情况都是采用ZTest开启的shader,所以在UGUI内直接可以通过Z轴的调整使这个人物模型和UI元素有正确的显示,但是有一点要注意,对于UGUI元素,Z轴不为0会导致无法合并批次。另外当你的游戏需要开启一些屏幕后处理的时候,这种方法会不太适用,以为UI摄像机不会去开启后处理,所以人物模型需要带一些bloom后处理的时候就要采用下面的方案。


  • RenderTexture

用另外一个相机渲染模型到一个RenderTexture,然后用UGUI的RawImage来显示模型,这种方案会比上面两种方案性能上更耗一点,因为开了另外的相机。

最后
其实UI这块的东西比较碎,很多优化的点,网上随便一搜就能出来,这里我也只罗列了一些我在开发过程中遇到值得提一提的东西,可能还有些遗漏,等想起来的时候在来补充。


知乎@Chenyuansheng


本帖被以下淘专辑推荐:

  • · Unity|主题: 3, 订阅: 0
7日久生情
1594/5000
排名
1840
昨日变化

11

主题

283

帖子

1594

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
252607
好友
5
蛮牛币
14249
威望
0
注册时间
2017-11-5
在线时间
568 小时
最后登录
2019-4-26

一掷千金

沙发
2019-1-21 14:11:37 只看该作者
7日久生情
1922/5000
排名
2252
昨日变化

0

主题

685

帖子

1922

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
163777
好友
2
蛮牛币
488
威望
0
注册时间
2017-2-27
在线时间
613 小时
最后登录
2019-4-26
板凳
2019-1-21 14:47:04 只看该作者
谢谢分享
4四处流浪
420/500
排名
6775
昨日变化

0

主题

38

帖子

420

积分

Rank: 4

UID
248481
好友
0
蛮牛币
206
威望
0
注册时间
2017-10-12
在线时间
186 小时
最后登录
2019-4-26
地板
2019-1-21 16:08:31 只看该作者
谢谢分享
7日久生情
2151/5000
排名
2613
昨日变化

2

主题

1089

帖子

2151

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
209046
好友
0
蛮牛币
2954
威望
0
注册时间
2017-3-30
在线时间
506 小时
最后登录
2019-4-26
5#
2019-1-21 16:50:28 只看该作者
谢谢
7日久生情
2376/5000
排名
1543
昨日变化
8

53

主题

824

帖子

2376

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
219600
好友
7
蛮牛币
3278
威望
0
注册时间
2017-4-27
在线时间
675 小时
最后登录
2019-4-26
6#
2019-1-21 18:39:24 只看该作者
感谢分享
3偶尔光临
295/300
排名
7605
昨日变化

0

主题

36

帖子

295

积分

Rank: 3Rank: 3Rank: 3

UID
179987
好友
0
蛮牛币
720
威望
0
注册时间
2016-11-1
在线时间
93 小时
最后登录
2019-3-22
QQ
7#
2019-1-21 21:07:37 只看该作者
多谢大佬分享
7日久生情
1648/5000
排名
4093
昨日变化

0

主题

997

帖子

1648

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
254705
好友
1
蛮牛币
1555
威望
0
注册时间
2017-11-16
在线时间
289 小时
最后登录
2019-4-26
8#
2019-1-22 08:29:59 只看该作者
6666666666666666666666666666666666
7日久生情
1846/5000
排名
1193
昨日变化

0

主题

542

帖子

1846

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
87577
好友
0
蛮牛币
6546
威望
0
注册时间
2015-3-31
在线时间
326 小时
最后登录
2019-4-26
9#
2019-1-22 08:41:29 只看该作者
too good too strong!
7日久生情
1996/5000
排名
572
昨日变化

2

主题

49

帖子

1996

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
182935
好友
0
蛮牛币
5217
威望
0
注册时间
2016-11-11
在线时间
529 小时
最后登录
2019-4-26
10#
2019-1-22 08:45:24 只看该作者

多谢大佬分享
7日久生情
2295/5000
排名
2248
昨日变化

0

主题

1286

帖子

2295

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
189581
好友
0
蛮牛币
3447
威望
0
注册时间
2016-12-5
在线时间
383 小时
最后登录
2019-4-25
11#
2019-1-22 09:14:08 只看该作者
可以的给力啊
7日久生情
2695/5000
排名
2230
昨日变化

1

主题

1721

帖子

2695

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
119154
好友
0
蛮牛币
2778
威望
0
注册时间
2015-8-21
在线时间
343 小时
最后登录
2019-4-23
12#
2019-1-22 09:46:22 只看该作者
谢谢楼主大大。
5熟悉之中
522/1000
排名
6836
昨日变化

0

主题

191

帖子

522

积分

Rank: 5Rank: 5

UID
300324
好友
0
蛮牛币
154
威望
0
注册时间
2018-10-17
在线时间
137 小时
最后登录
2019-4-26
13#
2019-1-22 10:01:44 只看该作者
站长妹纸萌萌哒!
6蛮牛粉丝
1150/1500
排名
3616
昨日变化

5

主题

474

帖子

1150

积分

Rank: 6Rank: 6Rank: 6

UID
269155
好友
2
蛮牛币
2343
威望
0
注册时间
2018-2-22
在线时间
257 小时
最后登录
2019-4-26
14#
2019-1-22 14:18:31 只看该作者
我想说你怎么这么6
5熟悉之中
748/1000
排名
3601
昨日变化

0

主题

96

帖子

748

积分

Rank: 5Rank: 5

UID
71644
好友
0
蛮牛币
1267
威望
0
注册时间
2015-1-28
在线时间
236 小时
最后登录
2019-4-26
15#
2019-1-22 15:31:39 只看该作者
谢谢分享
您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则