C#程序员整理的Unity 3D笔记(十六):Unity 3D的UI-OnGUI、NGUI、UGUI们

UI对用户交互而言,非常重要,尤其类似Unity 3D这种重用户交互体验的游戏行业,更甚。

然刚开始学习,首先了解的是OnGUI–基于代码实现UI。这个我私下和朋友吐槽了不少:

OnGUI土的掉渣、绘制UI效率低下–Dock、Anchors等等很难调试,在C#下竟然用代码控制UI–真是疯了!

 

UI需要快速响应需求设计,要立竿见影达到效果:WYSWYD(所见即所得)才是正道嘛!

 

 

  • Unity 3D 原生的OnGUI

OnGUI is called for rendering and handling GUI events. 即只要继承MonoBehaviour ,则可使用OnGUI函数,如做一些DeBug输出调试,OnGUI还是很方便的。

image

  • 第三方UI控件套包—NGUI

    NGUI是第三方商业UI套包,目前最新版是

    Latest Version: 3.8.0 (February 9th, 2015) ,售价95美金。自打NGUI问世,就以第三方UI套件之王而傲立于世,对整个Unity 3D的UI生态圈具有举重若轻的作用,其脚本丰富,表现出色,如TDTK就支持NGUI绘制UI。

 

  • Unity 3D 4.6始原生的UGUI (Unity GUI)

升级到Unity 4.6后,一下子被新的UI系统镇住了—-UGUI不错:UGUI的使用简洁、符合Visual Studio 程序员的风格,布局采用Web从上往下的流式渲染,基于先后的顺序。

image

 

image

 

 

附录1–简述第三方的NGUI和Unity 3D 4.6原生的UGUI列表

Item

UGUI

NGUI

初次印象

命名简约

官方集成

使用便捷

玩转脚本

明间英雄

强大社区

按钮和滚动条

系统原生

clip_image002

Canvas
分三类–

1. screen-overloap【default】

2. screen-camera

3. word position

UI Root

默认添加了一个摄像机–必须有

 

添加一个Button,在UGUI很容易看到效果,但是NGUI下,需要设置一下position(可能是Unity 4.6的bug)

事件

EventSystem (TriggerType)

Set OnClick event

Add Collider component

Add Script component

Set OnClick event

Dock

image

Rect Transform

 

clip_image005

widget属性,pivot,depth和size

Anchors–高级可设置多个参照Transform

美化

动画由Animation、Animator结合完成

依靠贴图、Font、动画实现

美化

动画由NGUI自带的TWeen脚本完成

依靠贴图、Font、动画实现美化

显示文本

Text

Label

显示图片

Image

Sprite

快捷键

Ctrl + T工具栏,用于move、rotate、dock等。

右键菜单和自定义工具栏配合

总结

2014年后U3D的新手,直接上手学习UGUI吧。

 

UGUI的Empty GameObject比较方便

 

UGUI的组件思想好-Grid Layout、Text Effect

历史遗留产物,还会火几年.

2011~2014年是NGUI的黄金时期。

 

UGUI.drag drop 需要自己写,而NGUI提供了强大的脚本不用写代码即可完成类似事情

 

附录2:Unity UI设计的原则

 

为了提高效率,我们要做的就是减少drawCall的调用次数,减少batch的次数。

 

附录3:小道消息

 

Unity 4.6 开始支持UGUI,且从Unity 4.6.2开始支持IOS 64位,故猜测2015.2月起是UGUI的一个重要的里程碑—UGUI免费、开源、原生,这3个Tag的属性,没有道理不火。

NGUI的作者Michael “ArenMook” Lyashenko在2012.11~2013.12左右,去Unity 公司工作了约1年时间,即UGUI是基于NGUI做出来的–所谓“青出于蓝而胜于蓝”。另外,从tasharen官网看,其作者对NGUI的重心也有所转移.

 

参考博客:

C#程序员整理的Unity 3D笔记(十五):Unity 3D UI控件至尊–NGUI

C#程序员整理的Unity 3D笔记(十四):Unity 3D的UGUI小结

作者: 王文刚

学习心得、技术分享