posts - 311, comments - 0, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
这里官方例子中的最下角,有两个元件,一个是用于控制item中心显示的check box,还有一个是实现窗口旋转的功能。还有右上角的Logo图标,鼠标点击它是会自动弹出来,鼠标移开后又会自动弹回原位。现在我们来分别实现它。
  Camera下创建一个panel。并在这个Panel下创建一个空游戏对象,并命名为Anchor-Bottomreset一下,为其添加一个AnchorNgui->Attach a Anchor),把UIAnchor组件中的Side参数设置成Bottom。在这个Anchor-Bottom
下创建一个Checkbox,参数如下:
请输入描述
 选择checkbox下的background,设置其Color Tint为木黄色;选择checkmark,设置其Color Tint颜色为绿色,Label的文本为Center on Item,最终效果如图所示:

请输入描述请输入描述
选择Panel-Window,为其添加一个高亮背景。在Panel-window下创建一个SlicedSprite元件,参数为TemplateSliced SpriteSpriteRow Outline。创建完成之后设置其大小为x158y258ColorTint R32G22B12;调整它的位置,最终效果如图所示:
请输入描述
设置Checkbox。首先选择checkbox,把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件(Component->NGUI->Interaction-> CheckboxComponent,UIGrid赋值给该组件的Target;再添加一个CheckboxCompo nent,把SlicedSpriteRow Outline)赋值给它的Target,这样可以打开或者关闭该对象。点击播放,现在可以通过checkbox控制那个高亮背景的显示与关闭,但是定位还没有实现,如图所示:

请输入描述
选择UIGrid,为其添加一个CenterOnChild组件(Component-> NGUI -> Interaction -> CenterOnChild,并关闭它,(这里有一个细节,checkbox controller component在控制target对象的组件开关时,它只对第一个组件进行控制,所以,我们要把UICenterOnChild放在UIGrid组件之前,这个时候你可能需要先删除UIGrid,然后再添加CenterOnChild,再添加UIGrid,再把UIGrid对象重新赋值给CheckboxCheckbox Control Component中的target中)如图所示:
请输入描述
使用Ctrl+D复制Anchor-Bottom,改名为Anchor-BottomRight,删除掉其下的checkbox,把Side设置成BottomRight。接着,为其添加一个Button元件,并设置它的参数和调整它的位置,使用该按钮来旋转窗口,如图所示:
请输入描述
先选择WindowRoot,为其添加一个TweenRotation组件(Component-> NGUI -> Tween -> Rotation),同时关闭该组件。并设置该组件的属性(这样便给WindowRoot设置了一个旋转的Tween动画,我们将用按钮来触发)如图所示:
请输入描述
选择Button,为其添加一个ButtonTween组件(Component-> NGUI -> Interaction -> Button Tween),把WindowRoot赋值给该组件的TargetPlayDirectionToggle(可以实现翻转,不然你用forward只能点一次了,就再也回不去,可以试试)。注意,播放AnimationButtonPlayAnimation组件,播放Tween动画用ButtonTween组件。如图所示:
请输入描述
现在点击播放,点击ClickMe按钮,看窗口旋转起来了,再点一下Clickme按钮。又转回来了!
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight,并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示:
请输入描述
 创建一个Sprite组件,其参数为
请输入描述
为该sprite添加一个TweenPosition组件(Component->NGUI->Tween->position),设置该组件的参数为,并关闭该组件:
请输入描述
为Sprite添加一个Button Tween组件(Component->NGUI->Interaction -> Button Tween)。设置参数为TweenTarget为Sprite,Trigger为OnClick,PlayDirection为Toggle,如图所示:
请输入描述
最后,为该Sprite添加一个Collider(NGUI->Attach a Collider)。点击播放,哈哈,Logo的弹出和弹入效果实现了!
这个教程写得好累,休息下!哈哈