posts - 311, comments - 0, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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

Posted on 2013-10-15 11:56 点点滴滴 阅读(4394) 评论(0)  编辑 收藏 引用 所属分类: 02 编程语言
为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，成功！