[教程] 【转载】NGUI官网示例11 –Drag & Drop（二）

[复制链接]

艾西格亚

955 主题	164 听众	7万积分

版主

Rank: 7 Rank: 7 Rank: 7

纳金币: 59338
精华: 28

电梯直达

楼主

发表于 2012-10-17 12:57:33 |只看该作者 |倒序浏览

（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）

为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，成功！

NGUI