NGUI官网示例11 –Drag ; Drop（图标与物体拖拽放置）

Admin

游戏中经常会用到储物箱等GUI，GUI的一边是物品的图标，另一边是一个角色，你可以拖动这些图标放置到角色上，为它装配装备。那么我们首先来实现较为简单的Drag&Drop功能。如图所示：







首先来制作三维的场景：

1. 使用Create a new UI对话框创建一个Advanced3D UI，如图所示：







把Panel拖出来，脱离Anchor父物体，然后改名为3D，接着把Camera作为子物体拖动到Panel下面，reset一下Camera对象，最后删除UI Root（3D）对象和Anchor对象，这里删除UIRoot是因为这个对象只是用于调整GUI大小的，而我们这个层级只要显示一个立方体和一个背景而已，如图所示







选择Camera，使用WidgetTool对话框在Camera下创建一个SlicedSprite对象，调整其大小和位置，作为其背景，如图所示







创建一个空的游戏对象，并命名为stage，该对象用来使得其子物体能够自动旋转，把该游戏对象放置到3D对象下，成为其子物体，并reset一下，如图所示







在stage下创建一个Cube，并为该Cube赋予一个brick材质，在project窗中，打开NGUI-> Example->brick。并调整它的大小，如图所示







选择stage对象，调整它的位置，如图所示







再次选择stage对象，为它添加一个spin组件（Component->NUI->Example->spin），这个组件可以旋转自身，并设置其参数，点击播放，可以看到立方体旋转起来了。当然这里大家应该知道，子物体会继承父物体的所有变换（平移、缩放和旋转）。如图所示







选择cube对象，为其添加一个SpinWithMouse组件（Component->NGUI->Example->Spin With Mouse）,该组件可以使得物体随着鼠标的拖动而转动，如图所示







在3D对象下创建一个Direction Light，这样就把场景照亮了，这样场景就漂亮多了，如图所示







接下来，我们来制作GUI部分。使用Create a new UI对话框，创建一个Simple 2D，如图所示







把Anchor对象改名为Anchor Bottom，并设置其side参数为Bottom。如图所示







选择Panel，改名为Window Panel，使用WidgetTool创建一个SlicedSprite，设置参数，并把该元件改名为background，并调整它的大小和位置，如图所示







现在看到视口中间还有一个正方形，这个东西是我们上面那个3D对象层级的背景，我们选择UIRoot（2D）对象包括其子对象，为其添加一个2DGUI layer（如何添加Layer和Layer的作用在unity文档中有描述，这里不再赘述）。选择UIRoot（2D）中的Camera，设置其Culling Mask为2DGUI，也就是说这个摄像机只显示这个Layer中的对象，其他Layer的对象不会在这个摄像机中显示。最后效果如图所示







选择WindowPanel，为其添加一个新的Panel（NGUI->create a Panel），并重新命名为ListPanel，如图所示







为ListPanel创建一个空的游戏对象，并命名为DragDropContainer，reset一下，并为它添加一个Collider（NGUI->Attach a collider），如图所示

Admin

为ListPanel创建一个空的游戏对象，并命名为DragDropContainer，reset一下，并为它添加一个Collider（NGUI->Attach a collider），如图所示







在DragDropContainer对象下创建一个空的游戏对象，并命名为Item0，并为其添加一个Collider（NGUI->Attach a collider），接着在Item0下创建一个Sprite和一个SlicedSprite，构成了一个图标，并调整它们的大小和位置，如图所示







选择Item0，使用Ctrl+D复制出三个来，并重新命名为Item1，Item2和Item3，位置没有关系，并把其中的两个Item中的sprite换个图片，如图所示







选择WindowPanel，来设置这个Panel的可见范围。把Clipping设置成SoftClip，参数如下







选择DragDropContainer，为其添加一个Table组件（Component->NGUI->Interaction-> Table），该组件可以自动排列它的子物体，并调整它的位置，其参数和效

果如下







接下来，选择Item0，为其添加一个DragDropItem（Component->NGUI->Example->Drag atl+DropItem），这个组件可以跟已经保存好的Prefab连接起来，把NGUI中

的对应的prefab拖到它的参数中，如图所示







1.         对其他的Item进行相似的操作，只是Prefab的参数不同而已。

现在，点击播放，拖动Item，结果没有任何效果。来解决这个问题，第一，选择UIRoot（2D）下的Camera，然后把UICamera组件中的EventReceiverMask中的参数

设置成2DGUI，这样这个Camera中的消息就只接受这个Layer中的消息；如下图









1.         第二，选择DragDropContainer，修改一下里面的BoxCollider中的Center和Size参数，使其覆盖所有的Item，如下图绿色框所示，







接着，选择Item，会发现，其中的Collider中的Center中的Z值，其值与DragDropContainer中的z值相同，都为0.5，这样可能造成消息指发送给

DragDropContainer而Item接收不到鼠标消息，所以，把所有Item中的Collider中的Z值往外移动一些，如图所示







选择Cube，为其添加一个DragDropsurface组件。

现在点击播放，拖动其中的Item，会发现Item在Panel中消失了，然后拖到Cube上，哈，效果达到了。如图所示







现在在实现item拖动的效果。在UIRoot（2D）下创建一个空的游戏对象，并命名为Anchor-Center，为其添加一个Anchor（NGUI->Attach a anchor）,并reset一下

，如图所示







选择Anchor-Center，在其下添加一个Panel（NGUI->Create a panel），并为其添加一个DragDropRoot（Component->NGUI->Example->Drap Drop Root）,请注意

UI Root（2D）中的所有对象的Layer都是2DGUI，如图所示







点击播放，ok，成功！