找回密码
 注册帐号

扫一扫,访问微社区

士郎 UnityUGUI开发的个人总结

35
回复
3836
查看
[ 复制链接 ]
排名
1
昨日变化

8061

主题

8619

帖子

3万

积分

Rank: 16

UID
1231
好友
186
蛮牛币
12260
威望
30
注册时间
2013-7-29
在线时间
4127 小时
最后登录
2019-8-23

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

2019-1-21 13:45:25 显示全部楼层 阅读模式

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

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

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的第一层区分可以基于逻辑页面来进行区分。


8.png



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


9.png



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


  • Canvas内在分Canvas

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

10.png

但这样也会导致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日久生情
1633/5000
排名
1839
昨日变化

11

主题

289

帖子

1633

积分

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

UID
252607
好友
5
蛮牛币
14293
威望
0
注册时间
2017-11-5
在线时间
601 小时
最后登录
2019-8-17
2019-1-21 14:11:37 显示全部楼层
回复

使用道具 举报

7日久生情
2568/5000
排名
2252
昨日变化

0

主题

1150

帖子

2568

积分

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

UID
163777
好友
2
蛮牛币
1118
威望
0
注册时间
2017-2-27
在线时间
794 小时
最后登录
2019-8-23
2019-1-21 14:47:04 显示全部楼层
谢谢分享
回复

使用道具 举报

5熟悉之中
546/1000
排名
6777
昨日变化

0

主题

49

帖子

546

积分

Rank: 5Rank: 5

UID
248481
好友
0
蛮牛币
296
威望
0
注册时间
2017-10-12
在线时间
301 小时
最后登录
2019-8-23
2019-1-21 16:08:31 显示全部楼层
谢谢分享
回复

使用道具 举报

7日久生情
2308/5000
排名
2612
昨日变化

2

主题

1134

帖子

2308

积分

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

UID
209046
好友
0
蛮牛币
3277
威望
0
注册时间
2017-3-30
在线时间
618 小时
最后登录
2019-8-24
2019-1-21 16:50:28 显示全部楼层
谢谢
回复

使用道具 举报

7日久生情
2398/5000
排名
1542
昨日变化

53

主题

829

帖子

2398

积分

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

UID
219600
好友
7
蛮牛币
3329
威望
0
注册时间
2017-4-27
在线时间
690 小时
最后登录
2019-7-19
2019-1-21 18:39:24 显示全部楼层
感谢分享
回复

使用道具 举报

4四处流浪
311/500
排名
7608
昨日变化

0

主题

40

帖子

311

积分

Rank: 4

UID
179987
好友
0
蛮牛币
740
威望
0
注册时间
2016-11-1
在线时间
105 小时
最后登录
2019-8-24
QQ
2019-1-21 21:07:37 显示全部楼层
多谢大佬分享
回复

使用道具 举报

7日久生情
2132/5000
排名
4092
昨日变化

0

主题

1406

帖子

2132

积分

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

UID
254705
好友
1
蛮牛币
1933
威望
0
注册时间
2017-11-16
在线时间
364 小时
最后登录
2019-8-24
2019-1-22 08:29:59 显示全部楼层
6666666666666666666666666666666666
回复 支持 反对

使用道具 举报

7日久生情
1919/5000
排名
1192
昨日变化

1

主题

559

帖子

1919

积分

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

UID
87577
好友
0
蛮牛币
8087
威望
0
注册时间
2015-3-31
在线时间
381 小时
最后登录
2019-8-24
2019-1-22 08:41:29 显示全部楼层
too good too strong!
回复 支持 反对

使用道具 举报

7日久生情
2075/5000
排名
568
昨日变化

2

主题

50

帖子

2075

积分

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

UID
182935
好友
0
蛮牛币
5554
威望
0
注册时间
2016-11-11
在线时间
603 小时
最后登录
2019-8-24
2019-1-22 08:45:24 显示全部楼层

多谢大佬分享
回复

使用道具 举报

7日久生情
2319/5000
排名
2248
昨日变化

0

主题

1285

帖子

2319

积分

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

UID
189581
好友
0
蛮牛币
3635
威望
0
注册时间
2016-12-5
在线时间
408 小时
最后登录
2019-8-23
2019-1-22 09:14:08 显示全部楼层
可以的给力啊
回复

使用道具 举报

7日久生情
2925/5000
排名
2230
昨日变化

1

主题

1898

帖子

2925

积分

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

UID
119154
好友
0
蛮牛币
3264
威望
0
注册时间
2015-8-21
在线时间
396 小时
最后登录
2019-8-23
2019-1-22 09:46:22 显示全部楼层
谢谢楼主大大。
回复

使用道具 举报

5熟悉之中
612/1000
排名
6838
昨日变化

0

主题

200

帖子

612

积分

Rank: 5Rank: 5

UID
300324
好友
0
蛮牛币
288
威望
0
注册时间
2018-10-17
在线时间
218 小时
最后登录
2019-8-24
2019-1-22 10:01:44 显示全部楼层
站长妹纸萌萌哒!
回复

使用道具 举报

6蛮牛粉丝
1190/1500
排名
3615
昨日变化

5

主题

489

帖子

1190

积分

Rank: 6Rank: 6Rank: 6

UID
269155
好友
2
蛮牛币
2787
威望
0
注册时间
2018-2-22
在线时间
282 小时
最后登录
2019-8-23
2019-1-22 14:18:31 显示全部楼层
我想说你怎么这么6
回复 支持 反对

使用道具 举报

5熟悉之中
827/1000
排名
3600
昨日变化

0

主题

102

帖子

827

积分

Rank: 5Rank: 5

UID
71644
好友
0
蛮牛币
1602
威望
0
注册时间
2015-1-28
在线时间
309 小时
最后登录
2019-8-24
2019-1-22 15:31:39 显示全部楼层
谢谢分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则