NGUI官网示例7-- ScrollView讲解(一)
zf223669
zf223669 94805 18
精华热门加亮 NGUI 2012-10-07 00:39
NGUI官网示例--讲解:http://game.ceeger.com/forum/read.php?tid=4172;fpage=2
NGUI官网示例2-interaction-讲解(一)http://game.ceeger.com/forum/read.php?tid=4179
NGUI官网示例2-interaction-讲解(二)http://game.ceeger.com/forum/read.php?tid=4180
NGUI官网示例3--Menu讲解http://game.ceeger.com/forum/read.php?tid=4187
NUI官方实例—ControlIerInput讲解http://game.ceeger.com/forum/read.php?tid=4222
NUI 官方示例–lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226
NGUI官网示例6 – Draggable Window讲解(一)http://game.ceeger.com/forum/read.php?tid=4243
NGUI官网示例6 – Draggable Window讲解(二) http://game.ceeger.com/forum/read.php?tid=4244;ds=1

NGUI官网示例7-- ScrollView讲解(一) http://game.ceeger.com/forum/read.php?tid=4269
NGUI官网示例7-- ScrollView讲解(二)
http://game.ceeger.com/forum/read.php?tid=4279

NGUI官网示例7-- ScrollView讲解(三)http://game.ceeger.com/forum/read.php?tid=4280;ds=1
其效果如图所示:

描述:请输入描述

图片:1.png

请输入描述


NGUIScrollView能够实现鼠标或者手势对图标的滚动操作,现在在很多的游戏中都能够见到。例如在《愤怒的小鸟》中的关卡选择等等。实现图标的滚动操作在NGUI中很容易实现,只要在Panel中加入一个UIDragPanelContents组件,再做些细节上的操作就可以了。在本教程中,我们将分三步来完成这个例子。第一步,创建窗口背景;第二步,创建和实现图标滚动效果;第三步,实现一些小细节上的效果。
第一步,创建窗口

1.         选择菜单上的NGUI->Create a new UI,出现UI Tool窗口,选择CameraSimple2D,然后点击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,参数为TemplateSlicedSpriteSpriteHightlight-ShadowColor Tint为黑色,大小X724Y266,并调整它的位置,并命名为Outline,如图所示:

描述:请输入描述

图片:7.png

请输入描述

 
创建一个ScrollBar,参数为TemplateScrollBarBackgroundHightlight-ShadowsForegroundButtonDirectionHorizontal。如图所示:

描述:请输入描述

图片:8.png

请输入描述

这样,就创建好了基本的窗口了。待续。。。。。
 
 (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
 在这里做过小广告,呵呵,我是浙江传媒学院新媒体学院数字游戏设计专业的老师,目前我们培养的学生都是往数字游戏设计方向发展的,而且以unity3D作为游戏引擎工具,下半年我们将引进UDK虚幻引擎,如果有需要该方面的人才,可以跟我联系。谢谢帮忙,这也是为学生找找工作!
 
 
分享:
游客
要评论请先登录 或者 注册
18条回应 只看楼主 最新
emaxya 论坛版主 2012-10-07 02:28 1楼
很不错的用途,推荐学习
ly774508966 论坛版主 2012-10-07 08:42 2楼
支持+,继续,
dawei661 师者 2012-10-07 08:58 3楼
继续啊 强力支持
gvc65344 新手 2012-10-07 15:31 4楼
感覺超厲害的 原來是用這種層疊關係製作  快點繼續吧  感謝指導
相思清明雨 学徒 2012-10-08 10:10 5楼
好帖,支持!
liamzhu 学者 2012-10-30 16:13 6楼
哪位大侠能详解下,scene中的场景在game中看不到,怎么调整摄像机??
木木 新手 2012-11-26 13:36 7楼
张老师很牛啊,一定要多向你学习!
海蓝123 新手 2013-01-22 14:51 8楼
好贴,学习了,谢谢张老师的分享
darreng 学徒 2013-01-24 16:57 9楼
嗯,不错不错。
1 2
返回顶部