【转载】NGUI官网示例7-- ScrollView讲解(一)

艾西格亚

（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）



其效果如图所示：







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。如图所示：







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

狂风大尉

顶一个，张老师的教程很不错，受益良多

艾西格亚

我们会陆续转载张老师的精彩教程

may

支持楼主的帖子