Unity3d 界面插件NGUI

转载 2012年07月31日 19:55:12

 

 

插件的好处。。插件的坏处。。。要牢记。。。。。。

 

NGUI 文档地址:http://www.tasharen.com/?page_id=197

 

 

 

一:创建你的界面



1.创建一个新场景.
2.选择并删除场景里的MainCamera.
3.在NGUI菜单下选择Create a New UI,会打开UI创建向导.
4.在创建向导中你能更改UI的基本参数,现在我们选Default layer.点击Create Your UI 按钮.
5.就这样,你的UI创建好了.

如果在一个已存在NGUI的项目中你要跳过第二步,并且你要选择一个不同的UI层,你还要确保非GUI相机不渲染UI层.

在做具体UI控件之前,我们看看UI向导为我们做了什么.

1.在2D的根对象上有个UIRoot脚本.这个脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度.
2.Camera对象包含Camera和UICamera脚本.UICamera脚本包含NGUI的时间系统.



3.Anchor包含UIAnchor脚本.虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题.
4.Panel对象有UIPanel脚本呢,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少DrawCall.

同样你可能还注意到目前自动帮你选中了Panel对象,也就是说下面添加的所有部件都将在作为它的子对象.

二:精灵Sprite

现在让我们添加一些控件,在NGUI菜单中选择Create a Widget.



这个向导会指导你建立一些基本的控件.需要选择所实用的Atlas和字体,因为是新建的项目,所有按下Atlas和Font按钮没有效果,相反会自动复制为你最近使用的元素.我们这里先选择Atlas为SciFi Atlas,字体为SciFi Font-Normal.

接下来在Template选择创建什么类型的控件.这个的模板只是帮助你开始创建,当你真正使用NGUI的时候.你会经常用这个向导创建控件的基本体.

现在,让我们创建第一个控件.

1.假设我们Atlas选择的是SciFi Atlas,我们给Sprite选择Dark.
2.点击Add To按钮,(如果按钮是灰色的,那是因为你没有选择Atlas).
3.你的Sprite现在已经创建并选中了.不过它非常小,让我们用Transform来调整它符合我们的需要.

一个值得注意的事是同一个atlas中创建控件不会响应Z轴变换,不过你可以调整Depth参数来调整他们的前后次序.如果后面你用了多个atlase或者多个UI面板,那么你就可以去调整Z轴变换.

你可以尝试添加更多的控件,比如加入一个Sliced Sprite(一个含有9个切片的Sprite,创建固定边框的控件最佳选择),一个Tiled Sprite(一个Sprite缩放填充整个区域)和Filled Sprite(每个Sprite都会有一个单独的参数来控制那些是可见的,常被用来做进度条或者滚动条).如果你找不到它们也没关系,后面的教程将讲解它们.

三:9-Slicing Sprite

1.选择Panel对象,用控件向导添加一个"Drak"的Sliced Sprite.什么叫9-slicing?查看这里:http://www.adobe.com/designcenter/video_workshop/html/vid0204.html
2.调整缩放为(500,500,1).
3.添加另外一个Sliced Sprite并设置缩放为(500,40,1).
4.更改第二个sprite的位置到(0,230,0).
5.更改Sprite的Dark为Light.
6.向下图一样调整两个sprite的颜色.
7.调整Depth,让彩色的sprite在大的sprite前面.

现在看起来像个小窗口了.



四:拼贴精灵



1.选择Panel对象,添加Tiled Sprite,并选择Honeycomb sprite.
2.设置它的位置为(0,-19,0)和缩放为(494,457,1).
3.同样你要设置深度调整前后次序.

可以按照自己的意愿调整它的颜色使他看起来更好.

你可以在任何时候通过选择Panel对象中的Debug Info的Geometry项来查看创建的控件的几何网格.

添加了这么多东西,目前依旧仅有一个Draw call.


五:标签



1.像前面讲的一样方法选择Panel对象并添加一个Label控件.
2.并点击Add To 按钮,如果Add To按钮不可用,是因为你没有指定字体,可以给Font栏指定"SciFi Font-Normal".
3.在检视面板给刚添加的UILabel的Text项添加一些文本.比如Hello World!
4.移动标签位置到(0,234,0),让它出现在标题栏上.



可以添加多个Label并且使用16进制的值描述不同颜色.以[FF0000]开始,[-]结束,在这之间的文本都会变为红色.

因为使用了相同的字体相同的材质,所有整个场景依旧是一个DrawCall.


六:按钮

现在,你应该可以很容易的创建一个按钮了,但还不知道如何让它接受点击时间.不过这很简单,任何碰撞盒都会收到它应有的事件.所以,一个简单的按钮你只需要在NGUI下选择Attach a Collider给控件,另外NGUI的模板已经有按钮末班,让我们看看.

我们选择Panel,用向导创建一个Button.



你能看到按钮有多个部分,一个是背景,一个是文本标签还有一些脚本,这就是NGUI的特性,多个小组件像乐高积木一样组合成强大的控件.

1. UIButtonColor当鼠标悬停在按钮或者按下的颜色.
2. UIButtonScale当鼠标悬停在按钮上时按钮放大.
3. UIButtonOffset当按下按钮时按钮像右下的位移.
4. UIButtonSound当按钮按下时播放声音.

当然还有其他组件,比如UIButtonPlayAnimation 和 UIButtonMessage,你自己摸索喽.

你也可以添加自定义事件让它处理更多的事件.

现在,你应该做成这样的一个界面了.

七:滑块


下面让我们添加一个滑块.

1.用Widget Tool,选择Slider模板.
2.给Foreground用Button,给Background用Dark.Thumb可以也用Button.
3.选择Panel后点击Add To按钮.

一个滑块滚动条就做好了.你可以选择滑块的游戏对象进行颜色和尺寸的调整,但是经验建议你不要去调整控件对象下面的子对象.

你可以尝试再做一个垂直滑块.



八:复选框

接下来我们来做复选框:



1.点击蒙版用"X",背景用"Dark".
2.创建一个复选框后再选择Panel对象创建一个新GameObject.
3.添加更多的复选框到这个GameObject.
4.在这些复选框上选择Option项.
5.运行一下程序,点击复选框.看看效果.

有关联的复选框只需要放在同一个父游戏对象中即可.

还可以附件一些其他事件处理功能,如UICheckboxControlledComponent 和 UICheckboxControlledObject.可以用来由复选框状态来启用禁用指定的组件或者游戏对象.

尝试着做3个复选框来控制红,绿,蓝三个控件的显隐.



九:输入框

现在我们来创建一个输入框.任何文本标签通过添加碰撞盒盒UIInput脚本都可以变成输入框.不过这里我们也可以用Input模板来创建:

1.正如你掌握的,用Widget Tool创建输入框.
2.可以用"Dark"或"Highlight"作为背景.
3.将它调试正确.

播放游戏,点击输入框就可以直接输入文字,在iOS和Android设备上则会自动显示屏幕键盘.这个输入框同样也支持Unity3.4.1新增的输入法类,让你能输入中文.目前唯一不支持Flash平台,因为Unity Flash还没增加IME输入支持.



十:三维界面

上面的我们一直在做2D的界面,但我们也可以很容易的让它变成3D界面.继续跟着我做吧:

1.将Panel从Anchor的子物体中解除掉,由UI Root作为它的父对象.
2.删除Anchor(本教程我们只做静止的UI).
3.将摄影机改成透视投影.
4.将相机的Near改为0.1和Far改为4.0.
5.将相机往后移动一点,大概在(0,0,-550)的位置.
6.给Panel一点角度,我们这里设置旋转为(0,345,0).
7.另外一个霸气的东西就是添加PanWithMouse到Camera.



点击Play,试着移动鼠标.看发生了什么.如果你做的没错,你将会看到下面这样的窗口.

原文:http://www.tasharen.com/?page_id=197
由威阿翻译,转载请注明来自1Vr.Cn,否则MJJ!哈哈。

 

 

 

 

 

 

 

||||||||||||||||||||||||||||||||||||||||||||||  Unity界面插件NGUI核心组件说明  ||||||||||||||||||||||||||||||||||||||||||||||

 

UICamera-可以添加到任何相机,包含事件系统.

UICamera是每个UI的重要组成部分.它负责发送Camera中所有NGUI的活动.如果场景中仅有一个Camera,要确保它附有UICamera脚本.如果有多个相机,确保至少用来渲染UI的相机有UICamera脚本.当将这个脚本放在主相机上时,在游戏场景中的所有都将有OnClick, OnHover, OnDrag等事件.

参数
Tooltip Delay:设定悬停与对象多少秒才执行OnTooltip事件.
如果使用Orthographic Projection相机,建议将相机的Size的尺寸设置为当前分辨率高度的一半.比如针对iPad的屏幕1024*768分辨率,就设置Size为384.另外一种方法是保持Size是1,缩放UI的Root为该值的倒数,比如在iPad上获得完美尺寸你需要设置Root的缩放到1/384或者0.002604167.第二种方法比较容易实行,不过物体在场景视图中照比其他物体会比较小.

如果你仍旧不知道怎么设置正交相机的尺寸,那么尝试看看下面这图.

UIAtlas-定义精灵的纹理图

UIAtlas是一个容器,它包含了一堆sprite的坐标信息.如果你不熟悉这个概念.你可以这样认为:使用一张包含很多小贴图的大贴图比用若干张小贴图更有效率.而大贴图中的小的贴图被称作为精灵(sprite),大纹理成为图集(atlas).

你使用NGUI之前都需要创建一个图集(或使用现有的).可以从这里了解图集的做法.当然也可以直接使用UITexture,但它并不能应对所有问题.

Material:是描述绘制本图集的材料.通常推荐用unlit着色器,比如用.Unlit – Transparent Colored为NGUI.
TP Import:用于导入从TexturePacker导出的精灵.只需要拖拽输出的Txt文件和所有精灵即可.
Coordinates:这允许你从基于像素的坐标系切换为基于UV的坐标系.通常都是以像素坐标系制作,但如果你需要重新调整纹理,则要先切换为纹理坐标.
New Sprite:允许已当前选择的精灵为范本创建新的精灵.
Delete:删除所选精灵.
Sprite:可以通过下拉列表选择所有正在使用的精灵.
Edit Name:重命名精灵的名称.
Outer Rect:设置精灵的外边框.
Inner Rect 设置精灵的内边框,如果你不使用UISlicedSprite,可以跳过这个设置.
Padding:微调校正精灵的偏移量
Correction:基础的校正精灵的坐标使用完美整数像素.
Show:检查精灵在图集中的位置.

提示
可以将精灵组织成组创建多个图集.只要图集共享相同的材质,那么控件仍旧会使用很少的DrawCall.
为达到最佳效果,推荐将纹理的wrap模式设置为"Clamp"和将格式设置为"Truecolor".
将类似的纹理做成一个图集是很好的方式,但是要尽量减少同时使用的图集数量.
如果你是使用Texture Packer工具来创建图集,要在输出设置中选择Unity3D.

如果你是用Photoshop创建图集,你能通过选择工具配合info panel面板来找出精灵的位置和尺寸.

UIFont-字体图集
UIFont可以设置UI所使用的字体数据和材质.可以使用免费的BMFont,或使用更专业的Glyph Designer.一般只做一次字体,保存为一个预设,作为新标签所用的字体.参数:

Import Font:用于导入Glyph Designer.或BMFont输出的FNT(改后缀为TXT)数据.
UIAtlas:用来设置字体纹理所在的图集,根据是否已选定UIAtlas,你会看到一下选项
如果UIAtlas已指定,你可以选择使用字体的精灵.
如果没有指定UIAtlas,你可以选择用来绘制字体的材质.在NGUI中通常用"Unlit"类别下的着色器,如“Unlit – Transparent Colored".
你可以调整字体在材质纹理内的像素矩形.
快速校正完美像素坐标,四舍五入到最近的像素值.
Spacing:可以调整字符之间的间距.
Show:检查字体在纹理贴图中的位置.

提示
为达到最佳效果,推荐将纹理的wrap模式设置为"Clamp"和将格式设置为"Truecolor".
可以将多个字体合并为一个图集.这样整个UI使用这些字体,仍旧会保持一个DrawCall.
你可以给字体增加斜角,阴影,描边等效果,只要确保BMFont导出之前你设置好足够的边距和间距就可以了.

UISprite-从图集中画一个精灵

UISprite是第二个不常用的插件(第一个是UITexture),它唯一用途就是绘制地图集的一部分.

参数
Transform:是很重要的一个组件,每个控件都可以通过Transform来进行位置和大小的调整.它也会影响到"Make Pixel-Perfect".你可以在它和UICamera之间任选一个来进行"完美像素"的调整.
UIAtlas:用来指定所使用的图集.拖拽或者按下左侧的按钮选择最近使用的图集.
Sprite:选择图集中使用的精灵.选择好精灵后.点击一下"Make Pixel-Perfect"会自动为你调整Transform的尺寸.
Depth是避免用Unity的Z排序(效率不好),而且如果你要旋转UI窗口.单纯的通过调整每个控件的Transform的Z轴来排序是不行的.所以要用这个深度来排序.
Color Tint:用来调整色调.
Make Pixel-Perfect:让你快速调整控件的尺寸到实际像素尺寸.
Pivot:选择部件的坐标原点位置.
Preview:预览精灵的纹理.

提示:
如果你看到两个控件有闪烁,意味着你设置了同样的Depth导致了重叠,你要调整不同的深度,让它们不重叠.
不要把多个控件混在一起,否则会影响到完美像素这个功能.添加新控件时要注意保持创建新的子对象.
也可以在使用完美像素按钮后再移动组合控件.

Label-用指定的字体绘制一个文本标签
UILabel被用来显示文字.支持多行,只需要用"\n"换行即可.允许用[RrGgBb]来建立彩色文字.

参数:
Transform:是很重要的一个组件,每个控件都可以通过Transform来进行位置和大小的调整.它也会影响到"Make Pixel-Perfect".你可以在它和UICamera之间任选一个来进行"完美像素"的调整.
UIFont:你可以选择用于这个标签的字体.你可以拖拽预设或者按下按钮选择最近使用的字体.
可以通过使用"\n"来决定标签是多行还是单行,同样可以用16进制颜色值来定义彩色文字,以[RrGgBb]开始,以[-]结束.如"Hello [FF0000]World[-]!",最后的结果是World是红色的文字.
Line Width:用来指定文字行的最大宽度,如果是单行文本则切掉超出的.如多行文本则会根据宽度自动换行.
Multi-line:选择该项后标签达到最大宽度后会自动换行.
Password:勾选后字符将自动转为星号.
Encoding:勾选后会关闭特殊字符处理,一般用于输入框.
Depth:改边标签控件的层级.
Color Tint:更改文本的主色调.
Make Pixel-Perfect: 让你快速调整控件的尺寸到实际像素尺寸.
Pivot:选择部件的坐标原点位置.
Preview:预览精灵的纹理.

提示:
如果你看到文本闪烁或看到被其他控件覆盖了.那么就要调整它的深度.
如果遇到复杂字符串(如斜体,标点,括号混合的)需要增加行宽度避免超宽.
用"\n"和颜色,仅一个标签就可以做到下面的效果.

UIPanel-为控件分组,用于管理和优化DrawCalls

UIPanel用来负责创建实际的几何体.不必特别添加UIPanel,只要创建一个控件,它就会自动被添加.你可以创建多个Panel,用于多个菜单.

参数:
Normals:显示法线,用来检查UI正反是否正确.
Gizmos:用来显示几何体,可供选取用.
Debug:配合调试检查场景视图的几何体,如果你开启了这个.就应该取消掉上面Gizmos这个选项.
Widgets:会显示有多少个控件在这个Panel上.
Draw Calls:可以看到用了多少个DrawCall,这个越低越好.
Clipping:可以选择你要显示的部分,默认是不进行裁切的.是利用着色器进行裁切的,如果开启这个选项,NGUI将自动切换为有裁切属性的着色器.
如果开启裁切.你可以通过Center和Size来设置裁切盒.单位为像素.
如果选择柔化边缘裁切,将会有40像素的柔化边缘供处理柔化效果.
Material:是只读的,可以看面板用了多少个材质.一个材质将占用一个DrawCall.

提示:
默认情况下如果没有UIPanel的话,会被最根的控件创建并作为其父对象.而且最好让你多个控件都用一个父对象,便于管理.
如果Panels下没有控件.你可以放心的删除这个面板.
如果你删除一个存有控件的Panels,它和它下面的控件都会消失,但是当你播放时,所有控件又会重现,因为又自动创建了一个欣的UIPanel.
当没有变化时,几何体不会重建,这意味着如果有个完全静止的UI,不会没帧都去更新几何形状,相反它也会被重用,提高性能.

UIAnchor-能让控件自动配合屏幕尺寸,填充满屏和保持真实像素尺寸的UI.

UIAnchor有多种用途,其中包括在多种分辨率的屏幕的相对定位.
如果你将它放在2D UI的root上,它会自动进行完美像素处理.
如果将它用于一个对象,它将辅助对象在屏幕上的定位,比如侧边或者角落.
比如放在一个精灵上,可以用来将精灵自动填满整个屏幕,比如做个背景.

参数:
HUD Camera是用来绘制该对象的相机,通常会自动选择的.
Side:设置锚点,有4个边,4个角和中心供选择.
Half Pixel Offset:让控件有半像素的位移以避免DirectX 9在Windows机器上的一个Bug.
Stretch To Fill:缩放填充,一般做背景时候会使用它.
Depth Offset:用于基于透视相机时调整计算点的深度.

提示:
如果对象有UIAnchor这个脚本,它自身的Transform将不接受你的修改,因为它受控于这个脚本.如果你希望添加基于这个锚点的位移,你可以添加一个子对象.比如你希望有个控件始终在屏幕偏移(100,100)这个位置,你应该在层次面板做这样的结构.UI->Anchor->Offset->Widget.
UIAnchor同样可用于非正交相机.
如果UIOrthoCamera附加到相机,用UIAnchor创建的界面将固定尺寸和位置,无论你将屏幕尺寸改成多大.

Events-NGUI强大的事件系统
UIEvents-事件系统
你可以添加下面的方法脚本到控件或者带有碰撞盒的游戏对象,当然也可以赋予给相机,不过需要相机同时有UICamera脚本:
void OnHover (bool isOver):当鼠标移出或者悬停在某个碰撞器上的时候返回布尔值.在触摸设备上不会有作用.
void OnPress (bool isDown):当鼠标或者触摸到碰撞器发生布尔值返回.
void OnSelect (bool selected):当鼠标或者触摸从OnPress发生后的释放将会返回这个布尔值.
void OnClick():和OnSelect的产生条件相同,当点击或触摸碰撞器并且没有发生拖拽时候触发.
void OnDrag (Vector2 delta):当移动鼠标或者触摸按下时候位移超过特定阀值时触发.
void OnDrop (GameObject drag):当鼠标或触摸释放于从发生OnDrag的不同碰撞器伤触发.传递的参数是产生OnDrag的游戏对象.
void OnInput (string text):当一个OnSelect发生后在同一个碰撞器上触发输入.一般只有UIInput用它.
void OnTooltip (bool show):当鼠标悬停超过tooltipDelay时间后触发该命令.触摸设备上不会有作用.

可以用UICamera.lastCamera找到谁发出的事件,可用UICamera.lastHit得到谁接受这个事件,以及用UICamera.lastTouchPosition得到触摸或屏幕的位置

下面的脚本赋予一个碰撞器时,点击这个碰撞器会输出HelloWorld.

文章转自:1Vr.Cn

声明: 本文由( liuxiaoni )原创编译,转载请保留链接:Unity界面插件NGUI核心组件说明

 

 

相关文章推荐

Unity3D界面插件EZGUI和NGUI的比较

http://blog.heyworks.com/choosing-gui-framework-for-your-unity3d-project-ezgui-vs-ngui-part-i/ The ...

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例

原文地址:http://www.tasharen.com/?page_id=185 复制地址:http://www.netfoucs.com/wxg694175346/article/details...

[unity3D插件]Unity界面插件NGUI核心组件说明

本文转载于互联网,是一个比较经典帖子,特来分享: UICamera-可以添加到任何相机,包含事件系统.UICamera是每个UI的重要组成部分.它负责发送Camera中所有NGUI的活动.如果场景中...
  • lqgzfl
  • lqgzfl
  • 2014年03月10日 22:04
  • 467

Unity3D插件NGUI3.0.2版本

  • 2016年01月12日 12:49
  • 21.78MB
  • 下载

unity3d插件NGUI v2.2.2

  • 2014年10月21日 16:54
  • 11.61MB
  • 下载

【Unity3D插件】NGUI屏幕自适应

屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较方便的实现方法。 ...

unity3D GUI插件(NGUI+iGUI+EZGUI)

  • 2012年05月06日 13:50
  • 16.72MB
  • 下载

Unity3D NGUI 2.3.3.h 插件

  • 2013年03月17日 17:45
  • 17.35MB
  • 下载

Unity3D插件NGUI之Scorll View(滑动图标)的制作(简洁版)

用Unity3D开发的人员都知道NGUI在UI制作方面是一个强大的的插件,当然里面也有Scorll View的制作例子。在这里我来和大家交流交流我在开发中运用NGUI的一些心得! 首先,我们知道...

unity3D学习之NGUI插件

  • 2016年04月11日 00:21
  • 18.18MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Unity3d 界面插件NGUI
举报原因:
原因补充:

(最多只允许输入30个字)