NGUI_2.6.3_（3D视图ScrollView）

今天我们通过一个综合的例子来讲解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或者安卓界面的滚动效果。大家可以自己试验一下。

NGUI_2.6.3_（3D视图ScrollView）相关推荐

Xamarin.Forms的滚动视图ScrollView
Xamarin.Forms的滚动视图ScrollView 在Xamarin.Forms中,滚动视图ScrollView用来实现长内容的滚动显示.虽然ScrollView的Content属性只能设置一个 ...
OpenCASCADE：常用Inspector控件之3D 视图
OpenCASCADE:常用Inspector控件之3D 视图概述元素 3D 视图首选项首选项上下文菜单概述 OCCT 3D 查看器的此控件创建可视化视图组件并允许在视图中执行一些用户操作. ...
OpenCASCADE可视化：3D演示之3D视图设施
OpenCASCADE可视化:3D演示之3D视图设施概述一个编程示例定义查看参数正投影透视投影立体投影视锥剔除查看背景样式将 3D 场景转储到图像文件中光线追踪支持显示优先级 Z ...
Qt Creator添加3D视图
Qt Creator添加3D视图添加3D视图添加3D视图要创建Qt Quick 3D UI项目,我们建议使用Qt Quick 3D应用程序模板向导模板,该模板将Qt Quick 3D QML类型 ...
微信小程序之可滚动视图 scroll-view 的使用注意
微信小程序之可滚动视图 scroll-view 使用注意: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 d ...
Open Cascade 多视图-多个3D视图
转载请注明原文链接:https://blog.csdn.net/Mechanicoder/article/details/127642788 1. 简介本文介绍OCC如何实现多窗口视图以及单个窗口的 ...
【Unity3D】Unity 组件 ④ ( 摄像机 | 调整摄像机 | 手工调整 | 3D 视图对齐 Align with View 调整摄像机 )
文章目录一.摄像机简介二.调整摄像机一.摄像机简介创建新的 Scene 场景时 , 会自带一个主摄像机 Main Camera , 其主要作用是进行摄像 , 游戏玩家看到的画面就是由摄 ...
用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果
逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...
[ STK ]（九）改变 3D 视图的背景颜色，设置卫星轨道的颜色，导出 3D 视图
文章目录一.改变 3D 视图的背景颜色二.设置卫星轨道的颜色三.导出3D视图一.改变 3D 视图的背景颜色在背景处右键单击设置你想要的的颜色即可二.设置卫星轨道的颜色在卫星上双击在 ...

NGUI_2.6.3_（3D视图ScrollView）

NGUI_2.6.3_（3D视图ScrollView）相关推荐

最新文章

热门文章