渊源
先来段小八卦,听说UGUI的主创人员是从NGUI招过去的,所以,UGUI中有很多概念,对于用过NGUI的童鞋来说,看起来都似曾相识。
先来个概念对比:
| NGUI | UGUI |
| 锚点 | Anchor | RectTransform Anchor |
| 图片 | Sprite | Image |
| 文字 | Label | Text |
| 根节点 | UIRoot | Canvas |
| UI面板 | Panel | Canvas |
| UI容器 | uiWidget | Panel |
| 事件交互 | Collider | EventSystem |
| 单张贴图 | Texture | RawImage |
| UI相机 | camera + UICamera | camera + EventSystem |
再看下UI主要的通用几个组件:
| NGUI | UGUI |
| Button | √ | √ |
| Toggle | √ | √ |
| Scroll Bar | √ | √ |
| Progress Bar | √ | √ |
| Input Field | √ | √ |
| Popup List | √ | × |
| Localization | √ | × |
| Play Sound | √ | × |
| Scroll View | √ | √ |
总体来说,对于基本的UI元素, NGUI与UGUI都有;在组件的丰富度上,UGUI略逊于NGUI。例如,UGUI没有Localization、Play Sound组件;NGUI的Label是支持静态图文混排跟文字URL超链接的,而UGUI不支持。所以使用UGUI的时候需要自行开发以上缺失的组件及功能。
差异化
RectTransform
UGUI采用RectTransform的概念,将NGUI中的Transform+Widget+Anchor的功能,封装了起来。
| UGUI | NGUI |
| Pivot | RectTransform | Widget |
| Width、Height | RectTransform | Widget |
| x、y、z | RectTransform | Transform |
| Anchor | RectTransform | Anchor |
|  |  |
相对于NGUI的Anchor可以直接对某个GO进行锚点而言,UGUI新的锚点设计显然只能针对父节点来进行,是做不到跨层级锚点的,丧失了灵活性;但是也解决了NGUI多重锚点之间,由于时序问题,控件“锚飞了”的情况。 比较难理解的,应该是Anchor按比例锚点做相对布局的情况,普通的使用方法,可以参考Unity的官方文档[1],这里不展开。 要使用脚本来修改UI控件,情况就会变得比较复杂,需要理解绝对布局(anchor四个角都在一起)跟相对布局(anchor四个角分开,会按父控件的百分比来定义该控件)的情况。同时,也要理解Transform与anchoredPosition的关系。 曾经碰到过一个问题,UI偶现消失。后来发现是因为开始创建的时候没有对Localposition做重置,UGUI会通过anchoredPosition来重置Transform的x跟y,但没有重置z值,所以z值是乱的,所以当Z值大于UICamera的Clip范围的时候,就会被裁剪掉,消失了。
查看原文:
http://www.51xyyx.com/3051.html