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

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

 

经过导入自定义包,会出现以下的截图–这里我使用的是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。spa

另外,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等。

    相关文章
    相关标签/搜索