Unity3D UI和ScrollView.docVIP

今天我们通过一个综合的例子来讲解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截图2013080