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小结

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

      目前,UGUI问世不过半年(其随着Unity 4.6发布问世),而市面上商用的产品,UI控件的至尊为NGUI:影响力和广度(可搜索公司招聘Unity 3D,常常能看到对NGUI关键词)。 NGUI虽然不是Unity 官方原生的,但以其强大的能力和友好的操作性,成为了事实上的王者—-无他,OnGUI太挫了。

 

通过导入自定义包,会出现如下的截图–这里我使用的是NGUI V3.6.8版本。

image

 

在其官方demo中,这个demo给我留下了非常酷的印象(右上角NGUI的logo,好像电影中维京人的帽子?):

image

 

NGUI代码的样例,极为丰富,反复临摹,可学很多东西,这里就不一一列举了,仅对学习进行小结。image

 

  • UI Root

NGUI的UI Root类似UGUI Canvas.Screen.Camera模型;UI Root是所有NGUI控件的根元素。

image

 

创建一个NGUI元素后,在UI Root下自动带一个Camera。

另外,NGUI是第三方的,故无法像UGUI一样在Hierarchy中通过快捷键添加UI元素:

image

可通过主菜单–NGUI添加组件

image

 

还可以在Scene中,通过右键菜单添加UI组件(右键菜单提供了添加脚本、Help跳转到官网tasharen的Tip功能,很棒。)

 

image

 

  • 原生的UI组件有2个:

常使用的UI组件有2个:Lable & Sprite,其他组件是组合这2个UI组件实现的。

image

 

更多的常用控件,是通过Prefab Tool提供的,如Button、Slider、CheckBox等。

image

 

在此基础上,你也可以自定义你的UI控件,保存为Prefab即可,然后拖入到NGUI的Prefab Toolbar中保存起来。

 

  • 交互

    NGUI中实现控件的交互有2个步骤,主要是用碰撞检测(Trigger)和脚本实现,使用起来方便的很—成熟、好用。

1 添加Box Collider
2 添加事件脚本( *.cs)实现

 

  NGUI默认提供了丰富了UI脚本,几乎囊括了能用到的所有脚本—可在此基础上,继续通过扩展代码完成您的需求。

image

  • 动画

类似交互功能,动画也是通过脚本组件实现的。 NGUI自带的Tween 有10个脚本

clip_image001

  • Dock:Anchors

image

制作复杂UI布局的时候,Anchors就显得尤为关键,故NGUI也提供了非常方便的Anchors功能—默认不开启,通过选择Type=Unifed可打开Anchors功能,设置Target对象,同时设置Left、Right、Right、Bottom、Top即可实现,相对比较方便。(默认的Target对象是该UI的父对象)

 

  • 图集(Atlas Maker):图片的批量压缩,提高性能。

Atlas 这个单词很诡异,以前没有见过,搜索了一下bing,发现很有趣:

image

 

使用Atlas Maker,主要目的是对批量图片进行压缩,成为一张图片,使用的时候通过offset可获得指定的图片。这个技术在GIS加载图片、Web加载图片中曾经用过。

Atlas Maker经过处理多个选择的图片后,最后产生了3个文件:

  • MyAtlas.png
  • MyAtlas.prefab
  • MyAtlas.mat

     

     

    其他tip:

    获取NGUI当前控件的设置值:volumn = UIProgressBar.current.value;

    NGUI控件添加父子关键:NGUITools.AddChild(sprite.gameObject, item.gameObject);

    NGUI一些不太好用的东西:

    • 多个Panel无法Move和对齐—panel没有边线,多个Panel不好控制。

    clip_image001[4]

     

    NGUI摆放组件,移动非常不爽:一个是Camera取消不了–Gizmos尝试不行;另外移动和缩放很容易搞错。

    clip_image001[10]

     

    • NGUI的Sprite的切图SlicedSprite九宫切图,是通过设置数字修改的

    clip_image001[6]

    widget属性,pivot,depth和size–NGUI的核心东东

    clip_image001[8]

    • Pivot:中心点–对齐用
    • Depth:多个控件渲染的顺序【数字越高,显示优先级越高; 使用起来有点坑–设置错误则显示不了啦】
    • Size、Aspect:大小和放大

     

    总结: 

    尽管我个人比较看好UGUI,要学就学新的,1年后UGUI就成熟了嘛!  但是为了看懂一些“参考代码”,NGUI也是有必要学习、学习的,  且NGUI有较丰富的第三方UI插件生态圈呢,如NGUI HUB, TKTR等。