(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)

NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)
游戏中经常会用到储物箱等GUI,GUI的一边是物品的图标,另一边是一个角色,你可以拖动这些图标放置到角色上,为它装配装备。那么我们首先来实现较为简单的Drag;Drop功能。如图所示:
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第1张图片
 
首先来制作三维的场景:
1.         使用Create a new UI对话框创建一个Advanced3D UI,如图所示:
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第2张图片
把Panel拖出来,脱离Anchor父物体,然后改名为3D,接着把Camera作为子物体拖动到Panel下面,reset一下Camera对象,最后删除UI Root(3D)对象和Anchor对象,这里删除UIRoot是因为这个对象只是用于调整GUI大小的,
而我们这个层级只要显示一个立方体和一个背景而已,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第3张图片
选择Camera,使用WidgetTool对话框在Camera下创建一个SlicedSprite对象,调整其大小和位置,作为其背景,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第4张图片
创建一个空的游戏对象,并命名为stage,该对象用来使得其子物体能够自动旋转,把该游戏对象放置到3D对象下,成为其子物体,并reset一下,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第5张图片
在stage下创建一个Cube,并为该Cube赋予一个brick材质,在project窗中,打开NGUI-> Example->brick。并调整它的大小,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第6张图片
选择stage对象,调整它的位置,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第7张图片
再次选择stage对象,为它添加一个spin组件(Component->NUI->Example->spin),这个组件可以旋转自身,并设置其参数,点击播放,可以看到立方体旋转起来了。当然这里大家应该知道,子物体会继承父物体的所有变换
(平移、缩放和旋转)。如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第8张图片
选择cube对象,为其添加一个SpinWithMouse组件(Component->NGUI->Example->Spin With Mouse),该组件可以使得物体随着鼠标的拖动而转动,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第9张图片
在3D对象下创建一个Direction Light,这样就把场景照亮了,这样场景就漂亮多了,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第10张图片
接下来,我们来制作GUI部分。使用Create a new UI对话框,创建一个Simple 2D,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第11张图片 把Anchor对象改名为Anchor Bottom,并设置其side参数为Bottom。如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第12张图片
选择Panel,改名为Window Panel,使用WidgetTool创建一个SlicedSprite,设置参数,并把该元件改名为background,并调整它的大小和位置,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第13张图片 现在看到视口中间还有一个正方形,这个东西是我们上面那个3D对象层级的背景,我们选择UIRoot(2D)对象包括其子对象,为其添加一个2DGUI layer(如何添加Layer和Layer的作用在unity文档中有描述,这里不再赘述)。选择UIRoot(2D)中的Camera,设置其Culling Mask为2DGUI,也就是说这个摄像机只显示这个Layer中的对象,其他Layer的对象不会在这个摄像机中显示。最后效果如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第14张图片
选择WindowPanel,为其添加一个新的Panel(NGUI->create a Panel),并重新命名为ListPanel,如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第15张图片
为ListPanel创建一个空的游戏对象,并命名为DragDropContainer,reset一下,并为它添加一个Collider(NGUI->Attach a collider),如图所示
(搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一)_第16张图片

你可能感兴趣的:((搬运工)NGUI官网示例11 –Drag ; Drop(图标与物体拖拽放置)(一))