[教程] 【转载】NGUI官网示例7-- ScrollView讲解(二)

[复制链接]

艾西格亚

955 主题	164 听众	7万积分

版主

Rank: 7 Rank: 7 Rank: 7

纳金币: 59338
精华: 28

电梯直达

楼主

发表于 2012-10-11 08:56:11 |只看该作者 |倒序浏览

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

首先先创建这个窗口的拖动图标。在菜单上选择NGUI->Create a Panel,在WindowRoot下创建一个新的Panel，并命名为Panel ClipView。如图所示：

创建一个空的游戏对象，命名为UIGrid，该对象用来自动调整它的子对象的排列方式。并把该游戏对象作为Panel ClipView的子对象，并reset一下。如图所示：

新建一个空的游戏对象，命名为Item 1。并作为UIGrid的子对象，并reset一下。如图所示：

接着，使用我们先前学过的创建Widget的方法，为它创建图标的外观（这里不再赘述），最后效果如图所示：

使用Ctrl+D的方式复制出9个Item，位置重叠不要紧，等会为UIGrid加上一个组件之后会有神奇的效果。如图所示：

现在选择UIGrid，为它添加一个Grid组件（Component->NGUI->Interaction->Grid）,这时候神奇的效果出现了，真佩服NGUI的功能，它会自动排列好它的组件，最终效果如图所示：

因为NGUI的事件响应是通过Trigger来实现的，所以，选择所有的Item(在hierarchy里选择Item 1，然后按住shift键，再点击Item 9，这样就连选了所有的Item元件)，为它们添加一个Trigger，（NGUI->Attach a collider）。然后再为它们添加一个Drag Panel Content组件（Component->NGUI->Interaction->Drag Panel Contents），加上这个组件之后，就表明这些item是Drag Panel的一部分（必须添加的）。如图所示：

（这一步是关键）选择Panel ClipView，为其添加一个Draggable panel组件（Component->NGUI-> Interatcion->Draggable Panel）。点击播放，可以看到，这些Item终于可以通过鼠标划动了。如图所示：

现在这里有一个问题，如果你鼠标左右移动时没有任何问题，可是上下移动时，这些item也跟着上下移动，如图所示：

选择Panel ClipView中的DraggablePanel组件，打开Scale参数，把其中的Y和Z轴的值设置为0，这样，就可以把拖动方向限制在x轴上。如图所示：

最后，大家还记得我们已经做了一个滚动条在下方，我们可以用它来控制item的滚动，很简单，把这个元件赋值给Panel ClipView的DraggablePanel组件下的Horizontal Scroll Bar，就可以了，如上图。点击播放，现在你可以使用那个滚动条来对item进行滚动了！

这样，我们就实现了图标的滚动了。分为三步，第一步是使用Grid组件对Item进行排列；第二部是为为Panel添加DraggablePanel组件；第三步是为每个Item添加Trigger和Drag Panel Content。