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

其效果如图所示：


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 。如图所示：
这样，就创建好了基本的窗口了。 待续。。。。。