【游戏技术群】959392658  【游戏出海群】12067810
yzc88亚洲城 手机端
  • 开发者工具开发者工具
  • www.yzc88.comManual
  • 蛮牛杯蛮牛杯
  • Unity官方专区Unity官方专区
开发者专栏

关注:2416

当前位置:yzc88亚洲城 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在yzc88亚洲城原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2008|回复: 29
发新帖

[士郎] UnityUGUI开发的个人总结

[复制链接]  [移动端链接]
排名
1
昨日变化

7303

主题

7845

帖子

3万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
8452
威望
30
注册时间
2013-7-29
在线时间
3735 小时
最后登录
2019-2-20

社区QQ达人活力之星原创精华达人突出贡献奖财富之证yzc88亚洲城QQ群会员蛮牛妹VIP

跳转到指定楼层
楼主
yzc88亚洲城 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的第一层区分可以基于逻辑页面来进行区分。





这样区分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

跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
6蛮牛粉丝
1421/1500
排名
1928
昨日变化
9

10

主题

230

帖子

1421

积分

Rank: 6Rank: 6Rank: 6

UID
252607
好友
5
蛮牛币
3433
威望
0
注册时间
2017-11-5
在线时间
483 小时
最后登录
2019-2-20
沙发
yzc88亚洲城 2019-1-21 14:11:37 | 只看该作者

6蛮牛粉丝
1427/1500
排名
2435
昨日变化

0

主题

352

帖子

1427

积分

Rank: 6Rank: 6Rank: 6

UID
163777
好友
1
蛮牛币
574
威望
0
注册时间
2017-2-27
在线时间
493 小时
最后登录
2019-2-20
板凳
yzc88亚洲城 2019-1-21 14:47:04 | 只看该作者
谢谢分享

4四处流浪
308/500
排名
7869
昨日变化
69

0

主题

37

帖子

308

积分

Rank: 4

UID
248481
好友
0
蛮牛币
42
威望
0
注册时间
2017-10-12
在线时间
115 小时
最后登录
2019-2-20
地板
yzc88亚洲城 2019-1-21 16:08:31 | 只看该作者
谢谢分享

7日久生情
1916/5000
排名
2832
昨日变化
18

2

主题

993

帖子

1916

积分

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

UID
209046
好友
0
蛮牛币
2659
威望
0
注册时间
2017-3-30
在线时间
409 小时
最后登录
2019-2-20
5#
yzc88亚洲城 2019-1-21 16:50:28 | 只看该作者
谢谢

7日久生情
2251/5000
排名
1638
昨日变化
4

49

主题

801

帖子

2251

积分

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

UID
219600
好友
7
蛮牛币
3104
威望
0
注册时间
2017-4-27
在线时间
621 小时
最后登录
2019-2-20
6#
yzc88亚洲城 2019-1-21 18:39:24 | 只看该作者
感谢分享
[发帖际遇]: fengjing 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

3偶尔光临
285/300
排名
7664
昨日变化
2

0

主题

35

帖子

285

积分

Rank: 3Rank: 3Rank: 3

UID
179987
好友
0
蛮牛币
692
威望
0
注册时间
2016-11-1
在线时间
88 小时
最后登录
2019-2-18
QQ
7#
yzc88亚洲城 2019-1-21 21:07:37 | 只看该作者
多谢大佬分享

6蛮牛粉丝
1398/1500
排名
4479
昨日变化
30

0

主题

830

帖子

1398

积分

Rank: 6Rank: 6Rank: 6

UID
254705
好友
1
蛮牛币
1339
威望
0
注册时间
2017-11-16
在线时间
242 小时
最后登录
2019-2-20
8#
yzc88亚洲城 2019-1-22 08:29:59 | 只看该作者
6666666666666666666666666666666666
[发帖际遇]: 15234084053 乐于助人,奖励 3 蛮牛币. 幸运榜 / 衰神榜

7日久生情
1742/5000
排名
1260
昨日变化
2

0

主题

507

帖子

1742

积分

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

UID
87577
好友
0
蛮牛币
5942
威望
0
注册时间
2015-3-31
在线时间
297 小时
最后登录
2019-2-20
9#
yzc88亚洲城 2019-1-22 08:41:29 | 只看该作者
too good too strong!

7日久生情
1889/5000
排名
606
昨日变化
4

2

主题

44

帖子

1889

积分

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

UID
182935
好友
0
蛮牛币
4854
威望
0
注册时间
2016-11-11
在线时间
483 小时
最后登录
2019-2-19
10#
yzc88亚洲城 2019-1-22 08:45:24 | 只看该作者

多谢大佬分享

7日久生情
2187/5000
排名
2405
昨日变化
11

0

主题

1244

帖子

2187

积分

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

UID
189581
好友
0
蛮牛币
3193
威望
0
注册时间
2016-12-5
在线时间
355 小时
最后登录
2019-2-20
11#
yzc88亚洲城 2019-1-22 09:14:08 | 只看该作者
可以的给力啊

7日久生情
2578/5000
排名
2307
昨日变化
2

1

主题

1641

帖子

2578

积分

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

UID
119154
好友
0
蛮牛币
2617
威望
0
注册时间
2015-8-21
在线时间
326 小时
最后登录
2019-2-20
12#
yzc88亚洲城 2019-1-22 09:46:22 | 只看该作者
谢谢楼主大大。

4四处流浪
366/500
排名
8500
昨日变化
71

0

主题

134

帖子

366

积分

Rank: 4

UID
300324
好友
0
蛮牛币
4
威望
0
注册时间
2018-10-17
在线时间
90 小时
最后登录
2019-2-20
13#
yzc88亚洲城 2019-1-22 10:01:44 | 只看该作者
站长妹纸萌萌哒!

6蛮牛粉丝
1046/1500
排名
3817
昨日变化
1

5

主题

430

帖子

1046

积分

Rank: 6Rank: 6Rank: 6

UID
269155
好友
2
蛮牛币
1933
威望
0
注册时间
2018-2-22
在线时间
223 小时
最后登录
2019-2-15
14#
yzc88亚洲城 2019-1-22 14:18:31 | 只看该作者
我想说你怎么这么6
[发帖际遇]: 一个袋子砸在了 张瑞国 头上,张瑞国 赚了 1 蛮牛币. 幸运榜 / 衰神榜

5熟悉之中
657/1000
排名
3902
昨日变化
15

0

主题

89

帖子

657

积分

Rank: 5Rank: 5

UID
71644
好友
0
蛮牛币
1089
威望
0
注册时间
2015-1-28
在线时间
188 小时
最后登录
2019-2-20
15#
yzc88亚洲城 2019-1-22 15:31:39 | 只看该作者
谢谢分享

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

本版积分规则

快速回复 返回顶部 返回列表