今天我们通过一个综合的例子来讲解NGUI的3dUI和ScrollView。本例结合是了ＮＧＵＩ官方自带例子中的Example 6 - Draggable Window和Example 7 - Scroll View (Panel)两个场景的内容来讲的，帮助大家更好的理解这两个场景的内容。如果大家对这两个场景都很精通的话，可以忽略此教程。最终实现结果如下图：
QQ截图20130805144629.jpg (65.3 KB, 下载次数: 0)
下载附件
2013-8-5 14:49 上传



  １．首先新建一个场景，通过菜单ＮＧＵＩ－－＞Ｏｐｅｎ　ｔｈｅ　ＵＩ　Ｗｉｚａｒｄ打开ＵＩ　Ｔｏｏｌ窗口，这次我们新建ＵＩ的时候更改ＵＩ的ｃａｍｅｒａ选项，设置为Ａｄｖａｎｃｅｄ　３Ｄ．如图
1.jpg (35.93 KB, 下载次数: 0)
下载附件
2013-8-5 13:56 上传

２．在Ｐａｎｅｌ节点下新建三个Ｐａｎｅｌ，分别命名为LagPos,AutoYaw,DragTilt,设置它们的层级关系为并且设置AutoYaw为LagPos的子物体，设置DragTilt为AutoYaw的子物体。这里我们只是需要它们的Transform节点属性。可以把它们的UIPanel代码删除掉。建立好之后，它们的层级关系如图：
QQ截图20130805140113.jpg (5.99 KB, 下载次数: 0)
下载附件
2013-8-5 14:03 上传

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

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的参数如图：
未标题-3.jpg (56.43 KB, 下载次数: 0)
下载附件
2013-8-5 14:41 上传

6.  现在我们要为UIDraggablePanel指定ScrollBar。在Panel_Controls节点下新建一个Scroll Bar。把它赋给刚才的UIDragablePanel下的HorizontalScrollBar。运行可以发现。我们已经可以拖动它，并且控制按钮位置了。如图
QQ截图20130805144447.jpg (5.76 KB, 下载次数: 0)
下载附件
2013-8-5 14:47 上传


7.现在我们发现，我们只能通过拖动滚动条控制按钮的位置。如果我们想鼠标在按钮周围的区域时，都可以拖动怎么办呢？这里我们就要用到UIDragPanelContents了。首先我们
在Panel_Controls下新建一个Spirit命名为 Spirit_DragContents，修改它的大小和位置。如图深方块：
QQ截图20130805145229.jpg (7.15 KB, 下载次数: 0)
下载附件
2013-8-5 14:54 上传
unity 教程

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，调节它的大小和位置。效果如图中上部浅区域。
QQ截图20130805150138.jpg (11.2 KB, 下载次数: 0)
下载附件
2013-8-5 15:03 上传


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

现在我们已经完成了所有的工作，运行程序，分别按住鼠标在顶部的Spirit区域和中间按钮周围的区域拖动，查看效果。
对比如图
未标题-5.jpg (52.09 KB, 下载次数: 0)
下载附件
2013-8-5 15:13 上传

总结：利用这个知识，我们可以做几个Panel滚动显示的效果，还可以模拟IOS或者安卓界面的滚动效果。大家可以自己试验一下。
附件是这个教程的场景文件，如果遇到问题的同学可以自己下载下来看看。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。