【转载】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。如图所示：





创建一个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的弹出和弹入效果实现了！

may

支持楼主的帖子

大大虾

连续看了这三教程~~~受益匪浅！~~非常感谢楼主无私分享！！！

筱筱

感谢楼主分享！！！

forlio

非常感谢楼主，基本都成功了。好像遗漏了Panel ClipView的clipping应选择为Soft Clip没有提到。
另外我有个问题，为什么我的画面刷新有残影呢？
如附件图片

Kadina

我也来支持下