NGUI官网示例7-- ScrollView讲解(一)

Myth丶恋晨 2022-04-14 03:30 212阅读 0赞

其效果如图所示：  
 ![16_7487_e8e3ff89a75fc90.png_1051][]

描述:请输入描述

图片: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 下成为其子物体，成为如图所示：  
![16_7487_1e1461dbfa6c8c6.jpg_9][]

描述:请输入描述

图片: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，如图所示：  
![16_7487_f41582ca9167a5c.jpg_59][]

描述:请输入描述

图片: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，如图所示：

![16_7487_8270bded8f166b2.jpg_53][]

描述:请输入描述

图片: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，最后的结果如图所示：

![16_7487_97097ca6e238ca4.png_311][]

描述:请输入描述

图片:5.png

创建一个Label，参数为Font：Arimo18，Line Width为720，Effect为Shadow，Shadow颜色为黑色，Color Tint为深棕黄色。其效果如图所示：

![16_7487_f722799ea71f1be.jpg_153][]

描述:请输入描述

图片:6.jpg

创建图标滚动背景。创建一个SlicedSprite，参数为Template为SlicedSprite，Sprite为Hightlight-Shadow，Color Tint为黑色，大小X为724，Y为266，并调整它的位置，并命名为Outline，如图所示：

![16_7487_4007821d14295f9.png_380][]

描述:请输入描述

图片:7.png

创建一个 ScrollBar ，参数为 Template 为 ScrollBar ， Background 为 Hightlight-Shadows ， Foreground 为 Button ， Direction 为 Horizontal 。如图所示： ![16_7487_f6d452adefee749.png_448][]

描述:请输入描述

图片:8.png

这样，就创建好了基本的窗口了。 待续。。。。。

[16_7487_e8e3ff89a75fc90.png_1051]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_e8e3ff89a75fc90.png?1051
[16_7487_1e1461dbfa6c8c6.jpg_9]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_1e1461dbfa6c8c6.jpg?9
[16_7487_f41582ca9167a5c.jpg_59]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_f41582ca9167a5c.jpg?59
[16_7487_8270bded8f166b2.jpg_53]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_8270bded8f166b2.jpg?53
[16_7487_97097ca6e238ca4.png_311]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_97097ca6e238ca4.png?311
[16_7487_f722799ea71f1be.jpg_153]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_f722799ea71f1be.jpg?153
[16_7487_4007821d14295f9.png_380]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_4007821d14295f9.png?380
[16_7487_f6d452adefee749.png_448]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_f6d452adefee749.png?448