NGUI系列教程 第七部

转自：http://blog.youkuaiyun.com/jbjwpzyl3611421/article/details/10593791

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

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

２．在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，菜单ＮＧＵＩ－－＞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或者安卓界面的滚动效果。大家可以自己试验一下。