unity3D游戏开发十四之NGUI一

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

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

unity3D游戏开发十四之NGUI一_第1张图片

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

unity3D游戏开发十四之NGUI一_第2张图片

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

unity3D游戏开发十四之NGUI一_第3张图片

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

unity3D游戏开发十四之NGUI一_第4张图片

我们先来看看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选项,那就要设置MinimumMaximum Height的值。这些值让你的虚拟屏幕看起来在合理范围。比如选择了Pixel Perfect方式,Minimum Height设置为720,那么当有玩家把你的程序运行在800*600(高度是600,小于Minimun Height)的设备上时,你UI的行为就和设置了“Fixed Size”模式、Manual Height值设为720的时候一样。

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

unity3D游戏开发十四之NGUI一_第5张图片

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,属性如下图:

unity3D游戏开发十四之NGUI一_第6张图片

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,属性如下图:

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

UIPanel,属性如下图:

unity3D游戏开发十四之NGUI一_第8张图片

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。这个限制以后会去掉。



你可能感兴趣的:(unity3d,Panel,NGUI,widget,UIAnchor)