现在的位置: 首页 > 综合 > 正文

NGUI系列教程七(3D视图&ScrollView)

2017年08月16日 ⁄ 综合 ⁄ 共 2426字 ⁄ 字号 评论关闭

今天我们通过一个综合的例子来讲解NGUI的3dUI 和ScrollView。本例结合是了NGUI官方自带例子中的Example 6 - Draggable Window和Example 7 - Scroll View (Panel)两个场景的内容来讲的,帮助大家更好的理解这两个场景的内容。如果大家对这两个场景都很精通的话,可以忽略此教程。最终实现结果如下图:

1.首先新建一个场景,通过菜单NGUI-->Open the UI Wizard 打开UI  TOOL 窗口,这次我们新建UI 的时候更改UI的camera选项,设置为Advanced 3D.如图

2.在Panel节点下新建三个Panel,分别命名为LagPos,AutoYaw,DragTilt,设置它们的层级关系为并且设置AutoYaw为 LagPos的子物体,设置DragTilt为AutoYaw的子物体。这里我们只是需要它们的Transform节点属性。可以把它们的UIPanel 代码删除掉。建立好之后,它们的层级关系如图:

3. 在DragTilt节点下新建一个Panel,作为我们所有UI元素的根节点命名为Panel_Root,然后再在它的节点下新建两个Panel。分别命 名为Panel_Controls,Panel_List。这里提醒大家,在做3D UI 的时候,一定要多用Panel,可以把同一组的UI元素放到一个Panel里。这样在控制的时候就会很方便,我们只要指定显示或者隐藏它们所在的 Panel就可以动态切换界面。还有一个要注意的就是在3D UI中,UI元素的Z轴位置属性是有用的。它们都是真实的3D物体。这意味着我们可以控制它们的Z轴位置和Z轴旋转。界面效果如图。

4. 下面我们开始为各个UI元素赋予属于它们的代码。首先为LagPos添加脚本 LagPosition。该脚本的作用在于我们移动panel的时候,它可以模拟一个缓冲的移动效果。然后是AutoYaw,为它添加脚本 WindowAutoYaw,该脚本的作用在于使物体在左右移动的时候自动旋转一定角度,实现透视效果。最后是DragTilt,为它添加脚本 WindowDragTilt。该脚本的作用在于使物体左右移动的时候,产生一定的旋转,模拟甩尾效果。大家有时间可以研究研究这三个代码。这里就不贴出 来了。

5. 我们要做的UI界面是一个可以随意移动并且自动旋转的3D的界面下,一排按钮可以左右拖动,但是只显示中间位置的几个。下面有一个Scroll Bar也可以拖动控制显示的按钮。我们先设置Panel_List 的显示区域。设置Panel_List 的UIPanel下的Clipping为SoftClip,并设置Clip框的大小。

接着我们在Panel_List 下新建几个按钮或者别的任何UI元素。不用调节它的位置。我们可以自动排列它的位置。秘密武器就是UIGrid脚本。为Panel_List添加脚本 UIGrid。这时Panel_List下的子物体会自动排列。我们可以通过UIGrid中的参数调节它的排列是纵向或者横向,还可以调节它的X,Y间隔 间距。

由于Panel_List是可以拖动的,我们要为它添加UIDraggablePanel。我们只想在横向左右拖动它,所以设置 UIDraggablePanel下的参数Scale为1.0.0。再往下看UIDraggablePanel的参数可以发现有 HorizontalScrollBar和VerticalScrollBar选项,它是用来让我们指定纵向和横向的ScrollBar的。UIGrid 和UIDraggablePanel的参数如图:

6.  现在我们要为UIDraggablePanel指定ScrollBar。在Panel_Controls节点下新建一个Scroll Bar。把它赋给刚才的UIDragablePanel下的HorizontalScrollBar。运行可以发现。我们已经可以拖动它,并且控制按钮位 置了。如图

7.现在我们发现,我们只能通过拖动滚动条控制按钮的位置。如果我们想鼠标在按钮周围的区域时,都可以拖动怎么办呢?这里我们就要用到 UIDragPanelContents了。首先我们在Panel_Controls下新建一个Spirit命名为 Spirit_DragContents,修改它的大小和位置。如图深色方块:

8. 为Spirit_DragContents添加一个Collider,菜单NGUI-->Attach a Collider。然后在添加脚本UIDragPanelContents。设置它的Dragable Panel为 Panel_List。这里有个要注意的地方就是Spirit_DragContents和前面的按钮的位置问题,我们新建的 Spirit_DragContents可能会遮挡住按钮。使我们无法点击。这里大家可以修改Panel_Controls和Panel_List的Z轴 位置,来调节它们的前后关系。这时候我们运行可以发现。我们已经可以在图中的深色区域拖动移动按钮的位置了。

9.现在我们来做一些工作使整个Panel移动起来,前面我们已经做好准备工作了。现在像上个步骤一样在Panel_Controls下新建一个Spirit命名为Spirit_DragPanel,调节它的大小和位置。效果如图中上部浅色区域。

10. 为Spirit_DragPanel添加脚本UIDragObject脚本,设置脚本中的Target为最先创建的Panel,也就是LagPos的父物体Panel。
最后为整个界面添加一个背景。新建一个Spirit,调节大小和位置作为整个界面的背景。

现在我们已经完成了所有的工作,运行程序,分别按住鼠标在顶部的Spirit区域和中间按钮周围的区域拖动,查看效果。
对比如图

总结:利用这个知识,我们可以做几个Panel滚动显示的效果,还可以模拟IOS或者安卓界面的滚动效果。大家可以自己试验一下。

抱歉!评论已关闭.