posts - 311, comments - 0, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
这个示例展示的是可伸缩的界面,点击没一个Quest,可以把里面的内容展开。如图所示:
请输入描述
首先先制作出基本的界面,这里就不再赘述(可以参考我上面的系列教程),在这里提一下,在制作背景时,可以使用Create a Widget创建出一个SimpleTexture,贴上合适的材质之后,不要缩放和移动它,为它添加一个Stretch组件(Component->NGUI->UI -> Stretch),该组件可以根据窗口的大小自动调整尺寸。注意该层级结构,最终效果如图所示请输入描述

接下来就是这个示例的重头戏了。选择Quest Log,并为其创建一个新的Panel(NGUI->Create a panel),并命名为SubPanel,如图所示
请输入描述
选择SubPanel,创建一个空的游戏对象,作为它的子物体,并命名为Table。该对象将来用于排列它的所有子对象的位置,现在暂时不管。如图所示
请输入描述
选择Table对象,创建一个空的游戏对象,作为它的子物体,并命名为Quest1,reset一下。如图所示
请输入描述
选择Quest1,为其添加一个Lable和一个SlicedSprite,最终效果如图所示
请输入描述
选择Quest1,创建一个空的游戏对象,并命名为Tween,成为它的子对象,reset一下,并在Tween下创建一个Label,并输入文字描述,最终效果如图所示
请输入描述
首先先把Tween对象的Enable关掉,再使用同样的方式再制作出三个这样的Quest出来,我这里偷懒,直接使用Ctrl+D复制出2个来,并命名为Quest2和Quest3。不用去管它的位置,如图所示
请输入描述
选择Table对象,为其添加一个Table组件(Component->NGUI->Interaction->Table),并设置Colomn参数为1,Direction为Down,Padding的Y为4,Sorted、Hide Inactive和Keep Within Panel勾选上,点击播放之后,其子物体就会自动地排列了,神奇!(大家从英文上应该能看出这些参数的意思吧,这里不赘述了)。如图所示
请输入描述
接下来实现点击这些Quest时,会自动展开其下面的说明。选择Quest1下面的Tween对象,为其添加一个TweenScale组件(Component->NGUI->Tween->Scale),并设置其参数如图所示
请输入描述
选择Quest1下面的SlicedSprite,为其添加一个Trigger组件(NGUI->Attach a collider)用来接收输入事件,接着为其添加一个Button Tween组件(Component-> NGUI->Interaction->Button Tween)这个组件很熟悉吧,对其他的几个Quest进行类似的操作,点击播放,鼠标放在Quest上点击,ok,实现了!其参数如下
请输入描述
如果你三个Quest同时展开,会发现,此时内容都漏出来了,呵呵,霸气外漏!我们来解决这个问题。选择SubPanel,设置其Panel组件中的Clipping为SoftClip,并设置它的size中x为420,Y为290,softness为X为1,Y为8,然后点击再播放,哈,内容在这个设置的范围内了。如图所示
请输入描述
问题又来了,我想看下面的内容呢。那么我们可以给他添加一个ScrollBar滚动条。在Quest Log下创建一个垂直ScrollBar元件,我们现在想当内容超出panel时scollBar才显示出来,我们设置其Alpha为0,最后参数如图所示
请输入描述
现在来连接SubPanel和ScrollBar。选择SubPanel,为其添加一个DraggablePanel组件(Component-> NGUI->Interaction->DraggablePanel)。然后把ScrollBar对象赋值给VerticalScrollBar,如图所示
请输入描述