其效果如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_e8e3ff89a75fc90.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 下成为其子物体,成为如图所示:
现在来完成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,如图所示:
创建一个 ScrollBar ,参数为 Template 为 ScrollBar , Background 为 Hightlight-Shadows , Foreground 为 Button , Direction 为 Horizontal 。如图所示:
这样,就创建好了基本的窗口了。 待续。。。。。
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_e8e3ff89a75fc90.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 下成为其子物体,成为如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_1e1461dbfa6c8c6.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,如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_f41582ca9167a5c.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,如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_8270bded8f166b2.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,最后的结果如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_97097ca6e238ca4.png)
创建一个Label,参数为Font:Arimo18,Line Width为720,Effect为Shadow,Shadow颜色为黑色,Color Tint为深棕黄色。其效果如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_f722799ea71f1be.jpg)
创建图标滚动背景。创建一个SlicedSprite,参数为Template为SlicedSprite,Sprite为Hightlight-Shadow,Color Tint为黑色,大小X为724,Y为266,并调整它的位置,并命名为Outline,如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_4007821d14295f9.png)
创建一个 ScrollBar ,参数为 Template 为 ScrollBar , Background 为 Hightlight-Shadows , Foreground 为 Button , Direction 为 Horizontal 。如图所示:
![点击查看原图 请输入描述](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_f6d452adefee749.png)
这样,就创建好了基本的窗口了。 待续。。。。。