第三步,实现一些小细节上的效果
在这里官方例子中的最下角,有两个元件,一个是用于控制 item 中心显示的 check box ,还有一个是实现窗口旋转的功能。还有右上角的 Logo 图标,鼠标点击它是会自动弹出来,鼠标移开后又会自动弹回原位。现在我们来分别实现它。
在
Camera
下创建一个
panel
。并在这个
Panel
下创建一个空游戏对象,并命名为
Anchor-Bottom
,
reset
一下,为其添加一个
Anchor
(
Ngui->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
元件,参数为
Template
为
Sliced Sprite
,
Sprite
为
Row Outline
。创建完成之后设置其大小为
x158
,
y258
,
ColorTint
为
R32
,
G22
,
B12
;调整它的位置,最终效果如图所示:
设置Checkbox。首先选择checkbox,把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件(Component->NGUI->Interaction-> CheckboxComponent),把UIGrid赋值给该组件的Target;再添加一个CheckboxCompo nent,把SlicedSprite(Row Outline)赋值给它的Target,这样可以打开或者关闭该对象。点击播放,现在可以通过checkbox控制那个高亮背景的显示与关闭,但是定位还没有实现,如图所示:
选择 UIGrid ,为其添加一个 CenterOnChild 组件( Component-> NGUI -> Interaction -> CenterOnChild ) , 并关闭它,(这里有一个细节, checkbox controller component 在控制 target 对象的组件开关时,它只对第一个组件进行控制,所以,我们要把 UICenterOnChild 放在 UIGrid 组件之前,这个时候你可能需要先删除 UIGrid ,然后再添加 CenterOnChild ,再添加 UIGrid ,再把 UIGrid 对象重新赋值给 Checkbox 的 Checkbox 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 赋值给该组件的 Target , PlayDirection 为 Toggle (可以实现翻转,不然你用 forward 只能点一次了,就再也回不去,可以试试)。注意,播放 Animation 用 ButtonPlayAnimation 组件,播放 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的弹出和弹入效果实现了!
这个教程写得好累,休息下!哈哈