NGUI 例子8 scroll view
来源：互联网 发布：泛洪填充算法 编辑：程序博客网 时间：2024/05/22 12:09
其效果如图所示：
NGUI的ScrollView能够实现鼠标或者手势对图标的滚动操作，现在在很多的游戏中都能够见到。例如在《愤怒的小鸟》中的关卡选择等等。实现图标的滚动操作在NGUI中很容易实现，只要在Panel中加入一个UIDragPanelContents组件，再做些细节上的操作就可以了。在本教程中，我们将分三步来完成这个例子。第一步，创建窗口背景；第二步，创建和实现图标滚动效果；第三步，实现一些小细节上的效果。
1. 选择菜单上的NGUI->Create a new UI,出现UI Tool窗口，选择Camera为Simple2D，然后点击Create Your UI，创建原始的GUI对象结构，在此不给出截图，节约点图片。哈哈。
2. 调整它的原始结构，把Anchor改名为Anchor-Center，为Anchor-Center添加一个空的子游戏对象，并命名为WindowRoot，并且reset一下，接着把panel改名为Panel-Window，并拖到WindowRoot下成为其子物体，成为如图所示：
现在来完成Panel-Window的制作。创建一个空游戏对象，命名为Background，并成为Panel-Window的子对象，并reset一下。在其下使用Create a new widget对话框，创建一个Tiled Sprite
件，其参数为Atlas：WoodenAtlas，Font：Arimo14，Template：TileSprite，Sprite：Honeycomb；大小X：770，Y：570；Color Tint为R：255，G：236，B：206，把刚才那个木质背景改名为
background，如图所示：
这样，就创建好了基本的窗口了。待续。。。。。
首先先创建这个窗口的拖动图标。在菜单上选择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进行滚动了！
在这里官方例子中的最下角，有两个元件，一个是用于控制item中心显示的check box，还有一个是实现窗口旋转的功能。还有右上角的Logo图标，鼠标点击它是会自动弹出来，鼠标移开后又会自动弹回原位。现在我们来分别实现它。
选择UIGrid，为其添加一个CenterOnChild组件（Component-> NGUI -> Interaction -> CenterOnChild）,并关闭它，（这里有一个细节，checkbox controller component在控制target对象的组件开关时，它只对第一个组件进行控制，所以，我们要把UICenterOnChild放在UIGrid组件之前，这个时候你可能需要先删除UIGrid，然后再添加CenterOnChild，再添加UIGrid，再把UIGrid对象重新赋值给Checkbox的Checkbox Control Component中的target中）如图所示：
使用Ctrl+D复制Anchor-Bottom，改名为Anchor-BottomRight,删除掉其下的checkbox，把Side设置成BottomRight。接着，为其添加一个Button元件，并设置它的参数和调整它的位置，使用该按钮来旋转窗口，如图所示：
先选择WindowRoot，为其添加一个TweenRotation组件（Component-> NGUI -> Tween -> Rotation），同时关闭该组件。并设置该组件的属性（这样便给WindowRoot设置了一个旋转的Tween动画，我们将用按钮来触发）如图所示：
选择Button，为其添加一个ButtonTween组件（Component-> NGUI -> Interaction -> Button Tween），把WindowRoot赋值给该组件的Target，PlayDirection为Toggle（可以实现翻转，不然你用forward只能点一次了，就再也回不去，可以试试）。注意，播放Animation用ButtonPlayAnimation组件，播放Tween动画用ButtonTween组件。如图所示：
现在点击播放，点击ClickMe按钮，看窗口旋转起来了，再点一下Clickme按钮。又转回来了！
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight，并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示：
创建一个Sprite组件，其参数为
为该sprite添加一个TweenPosition组件（Component->NGUI->Tween->position），设置该组件的参数为，并关闭该组件：
为Sprite添加一个Button Tween组件（Component->NGUI->Interaction -> Button Tween）。设置参数为TweenTarget为Sprite，Trigger为OnClick，PlayDirection为Toggle，如图所示：
最后，为该Sprite添加一个Collider（NGUI->Attach a Collider）。点击播放，哈哈，Logo的弹出和弹入效果实现了！
NGUI的ScrollView能够实现鼠标或者手势对图标的滚动操作，现在在很多的游戏中都能够见到。例如在《愤怒的小鸟》中的关卡选择等等。实现图标的滚动操作在NGUI中很容易实现，只要在Panel中加入一个UIDragPanelContents组件，再做些细节上的操作就可以了。在本教程中，我们将分三步来完成这个例子。第一步，创建窗口背景；第二步，创建和实现图标滚动效果；第三步，实现一些小细节上的效果。
第一步，创建窗口
1. 选择菜单上的NGUI->Create a new UI,出现UI Tool窗口，选择Camera为Simple2D，然后点击Create Your UI，创建原始的GUI对象结构，在此不给出截图，节约点图片。哈哈。
2. 调整它的原始结构，把Anchor改名为Anchor-Center，为Anchor-Center添加一个空的子游戏对象，并命名为WindowRoot，并且reset一下，接着把panel改名为Panel-Window，并拖到WindowRoot下成为其子物体，成为如图所示：
现在来完成Panel-Window的制作。创建一个空游戏对象，命名为Background，并成为Panel-Window的子对象，并reset一下。在其下使用Create a new widget对话框，创建一个Tiled Sprite
件，其参数为Atlas：WoodenAtlas，Font：Arimo14，Template：TileSprite，Sprite：Honeycomb；大小X：770，Y：570；Color Tint为R：255，G：236，B：206，把刚才那个木质背景改名为
background，如图所示：
为它创建一个窗口边框，使用Create a new Widget对话框创建一个Sliced Sprite元件，Atlas为WoodenAtlas，Font为Arimo14，Template为Sliced Sprite，Sprite为Glow-Outer，大小为X：
814，Y为614，Color Tint为黑色，其，Depth为-3，比background低一个数值。把该元件改名为Glow，如图所示：
接下来制作窗口的上方Title。创建一个空的游戏对象，命名为Title，并成为WindowRoot的子对象，要记得reset一下。创建一个TiledSprite，参数为WoodenAtlas，Font为Arimo14，Template
为TitedSprite,Color Tint为浅灰色；并成为Title的子对象，并命名为background。
创建一个SlicedSprite，其Sprite参数为Glow-Inner，该元件命名为Glow，Color Tint为黑色，Depth为-1，调整它的大小和位置，使得其围绕Title下的background的外围；
创建一个SlicedSprite，Sprite为Glow-Inner，Color Tint为暗灰色，并命名为Shadow，调整大小和位置，使得它覆盖Title下的background。
最后创建一个Label，参数为Font：Arimo20，Effect为OutLine，颜色为天蓝色，这样可以为它添加一个字体外框。其文本为Scroll View，最后的结果如图所示：
创建一个Label，参数为Font：Arimo18，Line Width为720，Effect为Shadow，Shadow颜色为黑色，Color Tint为深棕黄色。其效果如图所示：
创建图标滚动背景。创建一个SlicedSprite，参数为Template为SlicedSprite，Sprite为Hightlight-Shadow，Color Tint为黑色，大小X为724，Y为266，并调整它的位置，并命名为Outline，如图所示：
创建一个ScrollBar，参数为Template为ScrollBar，Background为Hightlight-Shadows，Foreground为Button，Direction为Horizontal。如图所示：
这样，就创建好了基本的窗口了。待续。。。。。
第二步，创建和实现图标滚动效果
首先先创建这个窗口的拖动图标。在菜单上选择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。
第三步，实现一些小细节上的效果
在这里官方例子中的最下角，有两个元件，一个是用于控制item中心显示的check box，还有一个是实现窗口旋转的功能。还有右上角的Logo图标，鼠标点击它是会自动弹出来，鼠标移开后又会自动弹回原位。现在我们来分别实现它。
在Camera下创建一个panel。并在这个Panel下创建一个空游戏对象，并命名为Anchor-Bottom，reset一下，为其添加一个Anchor（Ngui->Attach a Anchor），把UIAnchor组件中的Side参数设置成Bottom。在这个Anchor-Bottom
下创建一个Checkbox，参数如下：
选择checkbox下的background，设置其Color Tint为木黄色；选择checkmark,设置其Color Tint颜色为绿色，Label的文本为Center on Item，最终效果如图所示：
选择Panel-Window，为其添加一个高亮背景。在Panel-window下创建一个SlicedSprite元件，参数为Template为Sliced Sprite，Sprite为Row Outline。创建完成之后设置其大小为x158，y258，ColorTint 为R32，G22，B12；调整它的位置，最终效果如图所示：
设置Checkbox。首先选择checkbox，把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件（Component->NGUI->Interaction-> CheckboxComponent）,把UIGrid赋值给该组件的Target；再添加一个CheckboxCompo nent，把SlicedSprite（Row Outline）赋值给它的Target，这样可以打开或者关闭该对象。点击播放，现在可以通过checkbox控制那个高亮背景的显示与关闭，但是定位还没有实现，如图所示：
选择UIGrid，为其添加一个CenterOnChild组件（Component-> NGUI -> Interaction -> CenterOnChild）,并关闭它，（这里有一个细节，checkbox controller component在控制target对象的组件开关时，它只对第一个组件进行控制，所以，我们要把UICenterOnChild放在UIGrid组件之前，这个时候你可能需要先删除UIGrid，然后再添加CenterOnChild，再添加UIGrid，再把UIGrid对象重新赋值给Checkbox的Checkbox Control Component中的target中）如图所示：
使用Ctrl+D复制Anchor-Bottom，改名为Anchor-BottomRight,删除掉其下的checkbox，把Side设置成BottomRight。接着，为其添加一个Button元件，并设置它的参数和调整它的位置，使用该按钮来旋转窗口，如图所示：
先选择WindowRoot，为其添加一个TweenRotation组件（Component-> NGUI -> Tween -> Rotation），同时关闭该组件。并设置该组件的属性（这样便给WindowRoot设置了一个旋转的Tween动画，我们将用按钮来触发）如图所示：
选择Button，为其添加一个ButtonTween组件（Component-> NGUI -> Interaction -> Button Tween），把WindowRoot赋值给该组件的Target，PlayDirection为Toggle（可以实现翻转，不然你用forward只能点一次了，就再也回不去，可以试试）。注意，播放Animation用ButtonPlayAnimation组件，播放Tween动画用ButtonTween组件。如图所示：
现在点击播放，点击ClickMe按钮，看窗口旋转起来了，再点一下Clickme按钮。又转回来了！
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight，并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示：
创建一个Sprite组件，其参数为
为该sprite添加一个TweenPosition组件（Component->NGUI->Tween->position），设置该组件的参数为，并关闭该组件：
为Sprite添加一个Button Tween组件（Component->NGUI->Interaction -> Button Tween）。设置参数为TweenTarget为Sprite，Trigger为OnClick，PlayDirection为Toggle，如图所示：
最后，为该Sprite添加一个Collider（NGUI->Attach a Collider）。点击播放，哈哈，Logo的弹出和弹入效果实现了！
这个教程写得好累，休息下！哈哈
0 0
- NGUI 例子8 scroll view
- NGUI例子9 – Scroll View(Camera)
- NGUI -- Scroll View
- 【NGUI】循环Scroll View
- NGUI之Scroll View
- Unity3D NGUI Scroll View注意事项
- 【Unity3D】【NGUI】循环Scroll View
- NGUI Scroll View 循环滚动
- Unity NGUI制作scroll view
- unity NGUI tutorial scroll view
- Unity3D NGUI Scroll View注意事项
- NGUI研究——NGUI Scroll View
- NGUI官网示例8 – Scroll View(Camera)
- NGUI官网示例8 – Scroll View(Camera)
- NGUI官网示例8 – Scroll View(Camera)
- NGUI官网示例8 – Scroll View(Camera)
- (搬运工)NGUI官网示例8 – Scroll View(Camera)
- NGUI例子Scroll View场景中item添加点击后自动滑到终点
- poj 3414
- IKAnalyzer2012FF + Lucene4.9 TokenStream contract violation: reset()/close() call missing
- 杭电 2056
- Acmer语录
- uva 11029 Leading and Trailing
- NGUI 例子8 scroll view
- HDOJ3752
- Eclipse中Find Bugs插件的学习
- 设计模式之JAVA----工厂模式
- 通过经纬度计算两个之间的距离
- C# 适配数据库（待完成）
- Linux笔记 11 -- 网络编程
- 【HDU】3498 whosyourdaddy 重复覆盖入门题
- UVa10539 Almost Prime Numbers
