unity3D游戏开发十四之NGUI一

转:http://blog.csdn.net/kuloveyouwei/article/details/23676039

在Unity中,可以使用代码控制其自身所携带的GUI来实现图形界面的搭建。但是这些组件的搭建效率很低,而且已经无法满足现在市场对图形用户界面美感的要求,所以,引入了NGUI来增加所要开发的图形用户界面的美感。NGUI是一个功能强大的UI系统,其事件处理通常由开发人员编写C#脚本完成,并且是一个严格遵循KISS原则的Unity框架,该框架具有干净、简约的代码。

现在NGUI的各个版本很多,我这里用的是3.0.6版本,导入NGUI包,成功后,会在菜单栏中显示NGUI选项,如下图:

依次打开菜单栏,NGUI->Open->UI Wizard选项,如下图:

点击Layer下拉列表,选择Add Layer,创建一个叫NGUI的层,如下图:

Camera选项中有3个选项,None,Simple2D,Advanced3D,Simple2D新建一个简单的2D界面,没有Z轴效果,Advanced3D新建一个3D界面,有Z轴效果,并且可以3D旋转。我们点击Create Your UI按钮,创建一个UI界面,程序会自动为我们创建一个有节点层级关系的一些物体,分别是UI根节点,,一个相机节点,一个锚点节点,和一个用于盛放按钮等UI的Panel节点我们现在可以不用管这些节点的功能和作用,只要记住Panel节点即可,以后我们创建的所有按钮等UI都放在Panel层级下,如下图:

我们先来看看UIRoot,UIRoot总是放在NGUI UI层级的最上层。它用来使UI的缩放变得更容易。widget通常使用的是以像素为单位的坐标,但是一个800*400(dimensions的值)的widget会占用800*400个单位(Unity中的单位),这相当大。UIRoot通过屏幕高度的反比来进行缩放,因此widgets都会很小,并且操作起来更容易。属性如下图:

其中,Scaling Style(缩放类型,包含三种),UIRoot有几种缩放方式。最常见的就是PixelPerfect。这种方式下,你的UI一直都是以像素为基础,一个300*200的widget在屏幕上永远占用300*200像素。这就意味着,你的UI在低分辨率的机器上会显得非常大,在高分辨率的机器上就会显得很小。这个设置就是一直保持你的UI清晰。FixedSize是一个和它功能正好相反的设置。当UIRoot用了这个选项,你的屏幕永远都会保持NGUI所关心的尺寸,不管你的实际屏幕是多大。就是说一个300*200的widget占用了1920*1080的25%的屏幕,那么当分辨率降低到1280*720的时候,它同样占用25%的屏幕。如果你不介意你的UI看起来像是不同的尺寸,也不关心是否清晰(就是可能一个小的UI被拉伸很大),那么选择这个选项。选择它的时候,不要忘记设置Manual Height。 FixedSizeOnMobile是前两种的组合。选择这个选项后,会在pc或者mac等桌面设备上用“PixelPerfect”,在移动设备上用“FixedSize”。 如果你没有选择Fixed Size选项,那就要设置Minimum和Maximum Height的值。这些值让你的虚拟屏幕看起来在合理范围。比如选择了Pixel Perfect方式,Minimum Height设置为720,那么当有玩家把你的程序运行在800*600(高度是600,小于Minimun Height)的设备上时,你UI的行为就和设置了“Fixed Size”模式、Manual Height值设为720的时候一样。

接下来我们看下UICamera,属性如下图:

UICamera真正做的事情是发送NGUI事件给所有被当前camera渲染的object,camera是UICamera脚本所在的那个。 其实这个脚本做的事情和UI无关。事实上如果你想让游戏里面的object接收OnPress、OnClick、OnDrag等这类事件,你需要把UICamera挂在你的主相机上。游戏场景里面可以有多个UICamera。大多数游戏一个挂在渲染widget的相机上,一个挂在渲染游戏的相机上。

UICamera的选项Event Type用来决定脚本如何排序mouse或者touch触发的事件。如果是UI模式,这些事件顺序基于widget的depth——和渲染顺序一样。如果UICamera挂到了Main Camera上,那么就需要把这个选项修改成World模式。这样就会根据与相机的距离来排序点击到的object。
Event Mask用来决定哪些层会接收事件。大多数情况下你需要的就是“Everything”,这个值会与UnityEngine.Camera‘s Culling Mask进行逻辑与运算,有需要的话你可以微调这个值。如果你修改了UI的game object的Layer,记得调整Event Mask,否则你可能会发现UI不响应事件。
Debug选项用来显示当前在鼠标下面的是什么。如果你不知道是什么东西接收了鼠标事件,勾选上这个选项你就可以在右上角看到了。 
Allow Multi-Touch选项用来控制是否支持多点触碰。如果勾选掉,多点触碰也会当做单点触碰。
Sticky Tooltip选项用来微调tooltip的行为。如果关掉,当鼠标再次移动的时候就会立即关掉tooltip。如果打开,只要鼠标一直在这个game object上,tooltip就会移至显示。
Tooltip Delay用来控制当鼠标停在某个object上时,经过多长时间OnTooltip消息会被发送到这个object上。以秒为单位。 
Raycast Range控制raycast的长度,大多数情况下这个值可以被忽略。这个值是世界坐标系的值,所以如果你的摄像机的near clip是0.3、far clipping是 1000,比较远的物体可能不会响应click事件,比如可以把这个值设置为2000(比far和near clipping大的值。)

Event Sources用来确定哪些事件类型会被处理。被勾选掉的事件就不会被处理。有些平台会强制关闭一些事件。比如使用手柄时会自动关掉鼠标和touch时事件。

Thresholds可以调整click、drag和tap事件的阈值来微调鼠标和touch事件的行为。以像素为单位。

Axes和Keys部分用来控制哪个轴控制哪个方向的移动。这些名字需要和Input Manager里面的一致。

UIAnchor,属性如下图:

UIAnchor让你可以固定game objects在屏幕或者其他widgets的某一边或者某一个角。这是一个关键的组件,用来在NGUI中创建模块化的UI。

是否想让你的一部分UI粘在屏幕的角落或者边缘上?比如魔兽世界。在这个游戏中,游戏地图永远在屏幕的右上角,热键一直在屏幕的下方,不管你用的是多大的屏幕分辨率。你如何做到类似的东西呢?用anchors。

NGUI的默认UI布局会给你提供一个anchor——一个居中的anchor。以魔兽世界的UI为例子,你需要增加额外的两个anchor。一个设置成TopRight,另一个则为Bottom。之后你给这两个anchor增加一些子节点,然后修改屏幕的尺寸,你会发现UI会一直在你想要的地方(右上方或者下面)。
通过设置anchor的Container让一个UI附着在另一个UI上。如果Container是UIWidget,那么会用widget的dimesions来代替屏幕矩形(就是TopRight将将是相对与这个widget,而不是屏幕)。如果是game object,那么这个矩形就是game object下的所有节点widget的bounds。因为这个原因,当你用父节点当做Container的时候一定要注意,因为父节点的Container大小会包含这个你要anchor的widget,这可能不是你要的效果(比如你要放在父节点的左上角,但是当这个widget到了左上角后,父节点的左上角由于这个widget的到来可能就变了,之后再次移动widget,周而复始……)。
调整Relative Offset来用相对值来改变位置。 如果X是1就是100%的container宽度. Y是1就是100%的container高度。 0.5 = 50%,等等。也可以是负数。
上面的调整也可以通过用Pixel Offset来实现。就和你想的差不多……通过给定的X、Y的值来以像素为单位调整anchor的偏移。
默认情况下anchor只会执行一次。如果要在每个update里面都执行,那勾选掉Run Only Once选项。

UIWidget,属性如下图:


 UIWidget是NGUI的基础组件。简单来说,就是一个你可以放在屏幕任意位置的矩形框。widget会有一定的面积(如下图的白色框范围),但是在运行的时候(Game View)是完全不可见的,所以非常适合当做其他组件的容器(让所有的sprite或者label等以它进行各种对齐)。UIWidget也被用来当做所有NGUI元素的基类——所有你创建的sprites和labels。UILabel,UISprite,UITexture和UI2DSprite(Unity3D 4.3版本)都继承自UIWidget。

UIPanel,属性如下图:

UIPanel用来收集和管理它下面所有widget的组件。通过widget的geometry创建实际的draw call。没有panel所有东西都不能够被渲染出来。如果你对Unity熟悉,你可以把UIPanel当做Renderer。

所有panel都有一个Depth值,会影响所有它包含的widget。如果你的UI有很多窗口,那么最好每个窗口有一个panel。Panel上的depth权重会远远高于每一个widget的depth权重,所以保证panel不要使用同样的depth。如果使用同样的depth在panel上,那么draw call会被自动拆分来保证渲染顺序,所以会增加更多的draw call。

  • Alpha属性影响所有在panel下面的widget。所以可以用它来淡出整个窗口。
  • 如果你的UI需要被灯光影响,需要勾选上Normals。
  • 如果创建了一个有很多geometry的scrollable panel,你需要勾选Cull选项来减少三角形的数目。这样也可能降低性能,因为widget的可视性需要每次update都检验一次。
  • 勾选Static选项来告诉NGUI这个panel下面的widget不会被移动,这样可以提高性能。NGUI会忽略所有的position/rotation/scale改变。所以在运行时移动widget不会有效——所以小心使用。
  • 如果要调试由panel创建的draw calls,Show All选项可能帮助到你。你会看到由panel创建的所有draw call,以渲染顺序排序。每个draw call会包括它使用到material的详细信息,那个widget用的这个material,甚至可以让你关闭某些draw call来让你查询某些问题。

Panel会根据dimensions自动Clip所有它的子节点。使用这个功能需要选择Clipping下拉列表中的任意选项,之后调整Scene View中紫色矩形的尺寸,就像调整widget的尺寸一样。通过这样做你可以把一个panel放到Scroll View中,让他轻松的拖拽。
注意clipping的panel不能嵌套。每个panel只能clip自己管理的widget,如果一个panel在另外一个panel里面,只有一个会影响到里面的widget。这个限制以后会去掉。

时间: 2024-10-12 15:35:25

unity3D游戏开发十四之NGUI一的相关文章

unity3D游戏开发十八之NGUI动画

我们先来看下帧动画,顾名思义,就是一帧帧的图片组成的动画,我们须要用到UISprite Animation组件,它的属性例如以下: Framerate:播放速率,也就是每秒钟播放的帧数 Name Prefix:图片名字的前缀,能够用来过滤图片集中的图片,从而指定你须要的图片 Loop:循环 依照前面文章创建UI的步骤,我们创建一个sprite,一个button,通过点击button来控制动画的播放和暂停.OK,首先我们创建一个Atlas,把我们的须要的素材放进去,例如以下图: 点击Create创

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h 1 #ifndef __TestShader__ShaderSprite__ 2 #define __Tes

[Unity3D]Unity3D游戏开发之继续探索NGUI

大家好,我是秦元培.欢迎大家关注我的博客.我的博客地址是blog.csdn.net/qinyuanpei. 博主近期開始研究NGUI了,但是说实话,博主感觉NGUI的东西似乎有些分散,由于网上大部分的资料都仅仅是简单地解说怎样使用NGUI,并没有从实质性的原理出发来解说NGUI的内涵,这就和我们学习.NET仅仅会拖控件是一样的.并不能把握事物内在的东西.所以,博主推荐大家从官方提供的样例入手研究NGUI.博主这几天基本上都在看NGUI的演示样例程序,自我感觉内容比較杂吧.在今天的文章中,博主将讲

Unity3D游戏开发从零单排(四) - 制作一个iOS游戏

提要 此篇是一个国外教程的翻译,虽然有点老,但是适合新手入门.自己去写代码,debug,布置场景,可以收获到很多.游戏邦上已经有前面两部分的译文,这里翻译的是游戏的最后一个部分. 欢迎回来 在第一篇中,我们学会了怎么在Unity中搭建游戏的场景,并且设置模型的物理属性. 在第二篇中,我们学会了怎么在unity中使用脚本,并且创建了大部分的游戏逻辑,包括投球和得分! 在这最后一节中,我们将会为用户创建一个菜单系统,并且和GameController进行交互,我们开始吧. 在设备上测试 到目前为止,

Unity3D游戏开发 地形系统(四)

http://mahaile.blog.51cto.com/2891586/771167 上一章我们讲解了 如何创建一个简单的游戏世界 这一章我们来 看看unity3d中的地形系统 废话少说 赶紧开始吧,,哈哈   首先创建一个新的场景    点击菜单栏中的 Terrain-> create Terrain 菜单       完成后如 下图       创建地形系统的时候 unity会按默认的 宽高 图像分辨率,纹理分辨率 等创建一个地形  不过不怕 这些我们都可以修改滴    如果需要在gam

unity3D游戏开发实战原创视频讲座系列10之《保卫战:异形入侵》游戏开发第一季

讲解目录 <保卫战:异形入侵>游戏开发    1 第一讲   游戏演示和资源的介绍    1 第二讲  "异形"怪物的实现    1 第三讲  "异形"怪物生命值的体现    9 第四讲  "异形"怪物死后处理    12 第五讲  玩家的制作    15 第六讲  玩家的行走控制(键盘)    16 第七讲  武器的切换(鼠标)     16 第八讲  摄像头的变化(鼠标)    19 第九讲  子弹预制体和特效的制作    20

[Unity3D]Unity3D游戏开发之跑酷游戏项目解说

大家好,我是秦元培.我參加了CSDN2014博客之星的评选,欢迎大家为我投票,同一时候希望在新的一年里大家能继续支持我的博客. 大家晚上好.我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.终于到了更新博客的时间.从昨天下午開始,博主開始设计一个跑酷的游戏,到晚上睡觉前这个游戏已经基本完毕. 博主今天早上七点钟就起来了,到早上十点钟终于把整个游戏写完了. 所以,今天的博客的主题就是<Unity3D游戏开发之跑酷游戏项目解说>. 从博主自身来考虑这

Unity3D游戏开发之跑酷游戏项目详解

更多精彩请到http://www.gopedu.com/ 今天的博客的主题就是<Unity3D游戏开发之跑酷游戏项目讲解>. 从我们自身来考虑这件事情,当你选择做自己热爱的事情的时候,你的内心一定是充满激情和勇气的,你愿意看到自己的努力,你愿意看到自己的付出,我们成长是为了促进自我对认知的不断完善,所以我们应该以一种虔诚.谦恭的态度来对待我们的生命,我们或许无法选择出身,但我们可以选择向自己喜欢的生活去努力.或许我和这些人真的不是一个世界的人吧,很多事情在今天都给出了结局,对于这种人我已经没有

零基础unity3d游戏开发系列目录

零基础Unity3D游戏开发系列 第一章:游戏开发与游戏引擎(一) 零基础Unity3D游戏开发系列 第一章:游戏开发与游戏引擎(二) 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)界面... 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)创建与打开项目I 零基础unity3d游戏开发系列 第二章:unity3d概览(一)创建与打开项目II 零基础Unity3D游戏开发系列 第二章:Unity3D概览(一)创建与打开项目III 零基础Unity3D游戏开发