纳金网

标题: 【转载】NGUI 官网示例7-- ScrollView讲解(三) [打印本页]

作者: 艾西格亚 时间: 2012-10-11 11:18
标题: 【转载】NGUI 官网示例7-- ScrollView讲解(三)
在这里官方例子中的最下角，有两个元件，一个是用于控制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。如图所示：