NGUI官网示例7-- ScrollView讲解(三)
zf223669
zf223669 25148 18
精华热门加亮 NGUI 2012-10-07 16:42
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
 
NGUI官网示例7-- ScrollView讲解(一)  http://game.ceeger.com/forum/read.php?tid=4269  
NGUI官网示例7-- ScrollView讲解(二) http://game.ceeger.com/forum/read.php?tid=4279
第三步,实现一些小细节上的效果

   在这里官方例子中的最下角,有两个元件,一个是用于控制item中心显示的check box,还有一个是实现窗口旋转的功能。还有右上角的Logo图标,鼠标点击它是会自动弹出来,鼠标移开后又会自动弹回原位。现在我们来分别实现它。
  Camera下创建一个panel。并在这个Panel下创建一个空游戏对象,并命名为Anchor-Bottomreset一下,为其添加一个AnchorNgui->Attach a Anchor),把UIAnchor组件中的Side参数设置成Bottom。在这个Anchor-Bottom
下创建一个Checkbox,参数如下:

描述:请输入描述

图片:1.png

请输入描述
 选择checkbox下的background,设置其Color Tint为木黄色;选择checkmark,设置其Color Tint颜色为绿色,Label的文本为Center on Item,最终效果如图所示:

描述:请输入描述

图片:2.png

请输入描述

描述:请输入描述

图片:2.png

请输入描述
选择Panel-Window,为其添加一个高亮背景。在Panel-window下创建一个SlicedSprite元件,参数为TemplateSliced SpriteSpriteRow Outline。创建完成之后设置其大小为x158y258ColorTint R32G22B12;调整它的位置,最终效果如图所示:

描述:请输入描述

图片:3.png

请输入描述
设置Checkbox。首先选择checkbox,把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件(Component->NGUI->Interaction-> CheckboxComponent,UIGrid赋值给该组件的Target;再添加一个CheckboxCompo nent,把SlicedSpriteRow Outline)赋值给它的Target,这样可以打开或者关闭该对象。点击播放,现在可以通过checkbox控制那个高亮背景的显示与关闭,但是定位还没有实现,如图所示:

描述:请输入描述

图片:4.png

请输入描述

选择UIGrid,为其添加一个CenterOnChild组件(Component-> NGUI -> Interaction -> CenterOnChild,并关闭它,(这里有一个细节,checkbox controller component在控制target对象的组件开关时,它只对第一个组件进行控制,所以,我们要把UICenterOnChild放在UIGrid组件之前,这个时候你可能需要先删除UIGrid,然后再添加CenterOnChild,再添加UIGrid,再把UIGrid对象重新赋值给CheckboxCheckbox Control Component中的target中)如图所示:

描述:请输入描述

图片:5.png

请输入描述

使用Ctrl+D复制Anchor-Bottom,改名为Anchor-BottomRight,删除掉其下的checkbox,把Side设置成BottomRight。接着,为其添加一个Button元件,并设置它的参数和调整它的位置,使用该按钮来旋转窗口,如图所示:

描述:请输入描述

图片:6.png

请输入描述

先选择WindowRoot,为其添加一个TweenRotation组件(Component-> NGUI -> Tween -> Rotation),同时关闭该组件。并设置该组件的属性(这样便给WindowRoot设置了一个旋转的Tween动画,我们将用按钮来触发)如图所示:

描述:请输入描述

图片:7.png

请输入描述

选择Button,为其添加一个ButtonTween组件(Component-> NGUI -> Interaction -> Button Tween),把WindowRoot赋值给该组件的TargetPlayDirectionToggle(可以实现翻转,不然你用forward只能点一次了,就再也回不去,可以试试)。注意,播放AnimationButtonPlayAnimation组件,播放Tween动画用ButtonTween组件。如图所示:

描述:请输入描述

图片:8.png

请输入描述

现在点击播放,点击ClickMe按钮,看窗口旋转起来了,再点一下Clickme按钮。又转回来了!
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight,并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示:

描述:请输入描述

图片:9.png

请输入描述

 创建一个Sprite组件,其参数为

描述:请输入描述

图片:10.png

请输入描述

为该sprite添加一个TweenPosition组件(Component->NGUI->Tween->position),设置该组件的参数为,并关闭该组件:

描述:请输入描述

图片:11.png

请输入描述

为Sprite添加一个Button Tween组件(Component->NGUI->Interaction -> Button Tween)。设置参数为TweenTarget为Sprite,Trigger为OnClick,PlayDirection为Toggle,如图所示:

描述:请输入描述

图片:12.png

请输入描述

最后,为该Sprite添加一个Collider(NGUI->Attach a Collider)。点击播放,哈哈,Logo的弹出和弹入效果实现了!
这个教程写得好累,休息下!哈哈

 (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
 在这里做过小广告,呵呵,我是浙江传媒学院新媒体学院数字游戏设计专业的老师,目前我们培养的学生都是往数字游戏设计方向发展的,而且以unity3D作为游戏引擎工具,下半年我们将引进UDK虚幻引擎,如果有需要该方面的人才,可以跟我联系。谢谢帮忙,这也是为学生找找工作!
 
分享:
游客
要评论请先登录 或者 注册
18条回应 只看楼主 最新
ly774508966 论坛版主 2012-10-07 16:54 1楼
支持,赞一个,亲,辛苦啦!
lanneret 学者 2012-10-07 21:04 2楼
   
耐呢,栩凌 新手 2012-10-12 09:23 3楼
老师你好!我的NGUI为什么没有Component-> NGUI -> Interaction -> CenterOnChild选项

是不是版本的问题啊?
耐呢,栩凌 新手 2012-10-12 09:24 4楼

图片:QQ截图20121012092126.jpg

zf223669 学者 2012-10-12 09:35 5楼
回 耐呢,栩凌 的帖子
耐呢,栩凌:老师你好!我的NGUI为什么没有Component-> NGUI -> Interaction -> CenterOnChild选项

是不是版本的问题啊? (2012-10-12 09:23) 

你用的是什么版本的呢?
zf223669 学者 2012-10-12 09:36 6楼

图片:无标题.png

耐呢,栩凌 新手 2012-10-12 10:02 7楼
回 zf223669 的帖子
zf223669:你用的是什么版本的呢? (2012-10-12 09:35) 

NGUI_Next-Gen_UI_v2.0.3d.unitypackage
0o_mu 学徒 2012-10-19 09:20 8楼
谢谢老师~~~但是我的也没有 CenterOnChild~~所以也就暂时没有让选择跟随的那个效果~~~老师真是幸苦了
wangyel1 大师 2012-10-29 22:36 9楼
2.03版没有这个center组件,等升级再看效果了,呵呵
1 2
返回顶部