NGUI 例子8 scroll view
程序开发
2023-09-25 11:01:37
其效果如图所示：
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进行滚动了！
这样，我们就实现了图标的滚动了。分为三步，第一步是使用 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 ，参数如下：
选择 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的弹出和弹入效果实现了！
这个教程写得好累，休息下！哈哈
描述:请输入描述
图片:1.png
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 下成为其子物体，成为如图所示：
描述:请输入描述
图片:2.jpg
现在来完成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，如图所示：
描述:请输入描述
图片:3.jpg
为它创建一个窗口边框，使用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，如图所示： 描述:请输入描述
图片:4.jpg
接下来制作窗口的上方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，最后的结果如图所示：
描述:请输入描述
图片:5.png
创建一个Label，参数为Font：Arimo18，Line Width为720，Effect为Shadow，Shadow颜色为黑色，Color Tint为深棕黄色。其效果如图所示： 描述:请输入描述
图片:6.jpg
创建图标滚动背景。创建一个SlicedSprite，参数为Template为SlicedSprite，Sprite为Hightlight-Shadow，Color Tint为黑色，大小X为724，Y为266，并调整它的位置，并命名为Outline，如图所示：
描述:请输入描述
图片:7.png
创建一个ScrollBar，参数为Template为ScrollBar，Background为Hightlight-Shadows，Foreground为Button，Direction为Horizontal。如图所示：
描述:请输入描述
图片:8.png
这样，就创建好了基本的窗口了。 待续。。。。。
首先先创建这个窗口的拖动图标。在菜单上选择 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 的方式复制出 9 个 Item ，位置重叠不要紧，等会为 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 ），加上这个组件之后，就表明这些 item 是 Drag Panel 的一部分（必须添加的）。如图所示：
描述:请输入描述
图片:7.png
（这一步是关键）选择Panel ClipView，为其添加一个Draggable panel组件（Component->NGUI-> Interatcion->Draggable Panel）。点击播放，可以看到，这些Item终于可以通过鼠标划动了。如图所示：
描述:请输入描述
图片:8.png
现在这里有一个问题，如果你鼠标左右移动时没有任何问题，可是上下移动时，这些item也跟着上下移动，如图所示，
描述:请输入描述
图片:9.png
选择Panel ClipView中的DraggablePanel组件，打开Scale参数，把其中的Y和Z轴的值设置为0，这样，就可以把拖动方向限制在x轴上。如图所示：
描述:请输入描述
图片:10.png
最后，大家还记得我们已经做了一个滚动条在下方，我们可以用它来控制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 ，参数如下：
描述:请输入描述
图片:1.png
选择 checkbox 下的 background ，设置其 Color Tint 为木黄色；选择 checkmark, 设置其 Color Tint 颜色为绿色， Label 的文本为 Center on Item ，最终效果如图所示：
描述:请输入描述
图片:2.png
描述:请输入描述
图片:2.png
选择 Panel-Window ，为其添加一个高亮背景。在 Panel-window 下创建一个 SlicedSprite 元件，参数为 Template 为 Sliced Sprite ， Sprite 为 Row Outline 。创建完成之后设置其大小为 x158 ， y258 ， ColorTint 为 R32 ， G22 ， B12 ；调整它的位置，最终效果如图所示： 描述:请输入描述
图片:3.png
设置Checkbox。首先选择checkbox，把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件（Component->NGUI->Interaction-> CheckboxComponent）,把UIGrid赋值给该组件的Target；再添加一个CheckboxCompo nent，把SlicedSprite（Row Outline）赋值给它的Target，这样可以打开或者关闭该对象。点击播放，现在可以通过checkbox控制那个高亮背景的显示与关闭，但是定位还没有实现，如图所示：
描述:请输入描述
图片:4.png
选择 UIGrid ，为其添加一个 CenterOnChild 组件（ Component-> NGUI -> Interaction -> CenterOnChild ） , 并关闭它，（这里有一个细节， checkbox controller component 在控制 target 对象的组件开关时，它只对第一个组件进行控制，所以，我们要把 UICenterOnChild 放在 UIGrid 组件之前，这个时候你可能需要先删除 UIGrid ，然后再添加 CenterOnChild ，再添加 UIGrid ，再把 UIGrid 对象重新赋值给 Checkbox 的 Checkbox Control Component 中的 target 中）如图所示：
描述:请输入描述
图片:5.png
使用 Ctrl+D 复制 Anchor-Bottom ，改名为 Anchor-BottomRight, 删除掉其下的 checkbox ，把 Side 设置成 BottomRight 。接着，为其添加一个 Button 元件，并设置它的参数和调整它的位置，使用该按钮来旋转窗口，如图所示：
描述:请输入描述
图片:6.png
先选择WindowRoot，为其添加一个TweenRotation组件（Component-> NGUI -> Tween -> Rotation），同时关闭该组件。并设置该组件的属性（这样便给WindowRoot设置了一个旋转的Tween动画，我们将用按钮来触发）如图所示：
描述:请输入描述
图片:7.png
选择 Button ，为其添加一个 ButtonTween 组件（ Component-> NGUI -> Interaction -> Button Tween ），把 WindowRoot 赋值给该组件的 Target ， PlayDirection 为 Toggle （可以实现翻转，不然你用 forward 只能点一次了，就再也回不去，可以试试）。注意，播放 Animation 用 ButtonPlayAnimation 组件，播放 Tween 动画用 ButtonTween 组件。如图所示：
描述:请输入描述
图片:8.png
现在点击播放，点击ClickMe按钮，看窗口旋转起来了，再点一下Clickme按钮。又转回来了！
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight，并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示：
描述:请输入描述
图片:9.png
创建一个Sprite组件，其参数为
描述:请输入描述
图片:10.png
为该sprite添加一个TweenPosition组件（Component->NGUI->Tween->position），设置该组件的参数为，并关闭该组件：
描述:请输入描述
图片:11.png
为Sprite添加一个Button Tween组件（Component->NGUI->Interaction -> Button Tween）。设置参数为TweenTarget为Sprite，Trigger为OnClick，PlayDirection为Toggle，如图所示：
描述:请输入描述
图片:12.png
最后，为该Sprite添加一个Collider（NGUI->Attach a Collider）。点击播放，哈哈，Logo的弹出和弹入效果实现了！
这个教程写得好累，休息下！哈哈
标签：
上一篇：
C# 高效比较两个DataTable数据差异化
下一篇：
相关文章
-
无相关信息