NGUI官网示例7-- ScrollView讲解(二)
zf223669
zf223669 74457 16
精华热门加亮 NGUI 2012-10-07 16:34
NGUI官网示例--讲解:http://game.ceeger.com/forum/read.php?tid=4172;fpage=2
NGUI官网示例2-interaction-讲解(一)http://game.ceeger.com/forum/read.php?tid=4179
NGUI官网示例2-interaction-讲解(二)http://game.ceeger.com/forum/read.php?tid=4180
NGUI官网示例3--Menu讲解http://game.ceeger.com/forum/read.php?tid=4187
NUI官方实例—ControlIerInput讲解http://game.ceeger.com/forum/read.php?tid=4222
NUI 官方示例–lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226
NGUI官网示例6 – Draggable Window讲解(一)http://game.ceeger.com/forum/read.php?tid=4243
NGUI官网示例6 – Draggable Window讲解(二) http://game.ceeger.com/forum/read.php?tid=4244;ds=1

NGUI官网示例7-- ScrollView讲解(一) http://game.ceeger.com/forum/read.php?tid=4269
NGUI官网示例7-- ScrollView讲解(二)
http://game.ceeger.com/forum/read.php?tid=4279

NGUI官网示例7-- ScrollView讲解(三)http://game.ceeger.com/forum/read.php?tid=4280;ds=1

NGUI官网示例7-- ScrollView讲解(一)http://game.ceeger.com/forum/read.php?tid=4269
第二步,创建和实现图标滚动效果

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

描述:请输入描述

图片:1.png

请输入描述

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

描述:请输入描述

图片:2.png

请输入描述

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

描述:请输入描述

图片:3.png

请输入描述

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

描述:请输入描述

图片:4.png

请输入描述

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

描述:请输入描述

图片:5.png

请输入描述

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

描述:请输入描述

图片:6.png

请输入描述

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

描述:请输入描述

图片:7.png

请输入描述

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

描述:请输入描述

图片:8.png

请输入描述

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

描述:请输入描述

图片:9.png

请输入描述

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

描述:请输入描述

图片:10.png

请输入描述

最后,大家还记得我们已经做了一个滚动条在下方,我们可以用它来控制item的滚动,很简单,把这个元件赋值给Panel ClipViewDraggablePanel组件下的Horizontal Scroll Bar,就可以了,如上图。点击播放,现在你可以使用那个滚动条来对item进行滚动了!
这样,我们就实现了图标的滚动了。分为三步,第一步是使用Grid组件对Item进行排列;第二部是为为Panel添加DraggablePanel组件;第三步是为每个Item添加TriggerDrag Panel Content

(浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
分享:
游客
要评论请先登录 或者 注册
16条回应 只看楼主 最新
ly774508966 论坛版主 2012-10-07 16:52 1楼
沙发,给力,支持!继续
dj808 学徒 2012-10-12 17:20 2楼
我想一个页面一个页面的翻,如何让它正好翻过一页?
zf223669 学者 2012-10-12 18:06 3楼
回 dj808 的帖子
dj808:我想一个页面一个页面的翻,如何让它正好翻过一页? (2012-10-12 17:20) 

试试用每一页用一个panel来做。
王木木 学徒 2012-11-20 12:40 4楼
老师 你是怎么让item在那个outline里面显示的 为什么我的都显示在外面 ?
asabust 学海无涯 2012-11-20 14:48 5楼
回 zf223669 的帖子
zf223669:试试用每一页用一个panel来做。 (2012-10-12 18:06) 

老师 你是怎么让item在那个outline里面显示的 为什么我的都显示在外面 ?

我也想问这个问题!!!
求老师解答
啊? 学海无涯 2013-02-22 11:29 6楼
回 asabust 的帖子
asabust:老师 你是怎么让item在那个outline里面显示的 为什么我的都显示在外面 ?

我也想问这个问题!!!
求老师解答 (2012-11-20 14:48)

同样有这个问题  而且范围是怎么控制的。
qq394700782 学徒 2013-02-27 14:48 7楼
边界问题:(刚学会,分享下)
将PanelClipView下 UIPanel 组件中的 Clipping 参数设置成 SoftClip,SoftClip下面的参数根据实际情况自己设置,这样超过边界的ITEM就自动隐藏了。
李偌闲 学徒 2013-04-29 15:06 8楼
qq394700782:边界问题:(刚学会,分享下)
将PanelClipView下 UIPanel 组件中的 Clipping 参数设置成 SoftClip,SoftClip下面的参数根据实际情况自己设置,这样超过边界的ITEM就自动隐藏了。
回到原帖
但是这个的边界会移动,item往左懂,边界也会慢慢的往左移,显示效果很奇怪。这个怎么解决。
李偌闲 学徒 2013-04-29 15:07 9楼
老师,我有一个问题 PanelClipView下 UIPanel 组件中的 Clipping 参数设置成 SoftClip, 但是这个的边界会移动,item往左懂,边界也会慢慢的往左移,显示效果很奇怪。这个怎么解决。
1 2
返回顶部