NGUI官网示例9 – QuestLog(可展开元件)

青旅半醒 2022-04-14 03:36 166阅读 0赞

NGUI官网示例9 – QuestLog  
这个示例展示的是可伸缩的界面，点击没一个Quest，可以把里面的内容展开。如图所示：  
![16_7487_14b1d7175bf7b43.png_569][]

描述:请输入描述

图片:1.png

首先先制作出基本的界面，这里就不再赘述（可以参考我上面的系列教程），在这里提一下，在制作背景时，可以使用Create a Widget创建出一个SimpleTexture，贴上合适的材质之后，不要缩放和移动它，为它添加一个Stretch组件（Component->NGUI->UI -> Stretch），该组件可以根据窗口的大小自动调整尺寸。注意该层级结构，最终效果如图所示![16_7487_11b924f18302b5b.png_1028][]

描述:请输入描述

图片:2.png

接下来就是这个示例的重头戏了。选择Quest Log，并为其创建一个新的Panel（NGUI->Create a panel），并命名为SubPanel，如图所示  
![16_7487_6677a74e62f2a85.png_11][]

描述:请输入描述

图片:3.png

选择SubPanel，创建一个空的游戏对象，作为它的子物体，并命名为Table。该对象将来用于排列它的所有子对象的位置，现在暂时不管。如图所示  
![16_7487_988a352a06b1d93.png_11][]

描述:请输入描述

图片:4.png

选择Table对象，创建一个空的游戏对象，作为它的子物体，并命名为Quest1，reset一下。如图所示  
![16_7487_7acbfa13b018203.png_12][]

描述:请输入描述

图片:5.png

选择Quest1，为其添加一个Lable和一个SlicedSprite，最终效果如图所示  
![16_7487_c2ae41de2a188d1.png_393][]

描述:请输入描述

图片:6.png

选择Quest1，创建一个空的游戏对象，并命名为Tween，成为它的子对象，reset一下，并在Tween下创建一个Label，并输入文字描述，最终效果如图所示  
![16_7487_45e86e4952c77c5.png_442][]

描述:请输入描述

图片:7.png

首先先把Tween对象的Enable关掉，再使用同样的方式再制作出三个这样的Quest出来，我这里偷懒，直接使用Ctrl+D复制出2个来，并命名为Quest2和Quest3。不用去管它的位置，如图所示  
![16_7487_f03d246fa871c81.png_425][]

描述:请输入描述

图片:8.png

选择Table对象，为其添加一个Table组件（Component->NGUI->Interaction->Table），并设置Colomn参数为1，Direction为Down，Padding的Y为4，Sorted、Hide Inactive和Keep Within Panel勾选上，点击播放之后，其子物体就会自动地排列了，神奇！（大家从英文上应该能看出这些参数的意思吧，这里不赘述了）。如图所示  
![16_7487_76b236214a4ff11.png_299][]

描述:请输入描述

图片:9.png

接下来实现点击这些Quest时，会自动展开其下面的说明。选择Quest1下面的Tween对象，为其添加一个TweenScale组件（Component->NGUI->Tween->Scale），并设置其参数如图所示  
![16_7487_070f4544d557f55.png_22][]

描述:请输入描述

图片:10.png

选择Quest1下面的SlicedSprite，为其添加一个Trigger组件（NGUI->Attach a collider）用来接收输入事件，接着为其添加一个Button Tween组件（Component-> NGUI->Interaction->Button Tween）这个组件很熟悉吧，对其他的几个Quest进行类似的操作，点击播放，鼠标放在Quest上点击，ok，实现了！其参数如下  
![16_7487_4e39a0bc6f95d4b.png_130][]

描述:请输入描述

图片:11.png

如果你三个Quest同时展开，会发现，此时内容都漏出来了，呵呵，霸气外漏！我们来解决这个问题。选择SubPanel，设置其Panel组件中的Clipping为SoftClip，并设置它的size中x为420，Y为290，softness为X为1，Y为8，然后点击再播放，哈，内容在这个设置的范围内了。如图所示  
![16_7487_7413b401839f3cd.png_456][]

描述:请输入描述

图片:12.png

问题又来了，我想看下面的内容呢。那么我们可以给他添加一个ScrollBar滚动条。在Quest Log下创建一个垂直ScrollBar元件，我们现在想当内容超出panel时scollBar才显示出来，我们设置其Alpha为0，最后参数如图所示  
![16_7487_bbda7a5203e9d77.png_32][]

描述:请输入描述

图片:13.png

现在来连接SubPanel和ScrollBar。选择SubPanel，为其添加一个DraggablePanel组件（Component-> NGUI->Interaction->DraggablePanel）。然后把ScrollBar对象赋值给VerticalScrollBar，如图所示  
![16_7487_c59082e914cd8bb.png_30][]

描述:请输入描述

图片:14.png

OK，其拖动功能就搞定了！

这个示例当中还有一个拖动窗口的效果，这里效果在以前的教程中已经讲过。

[16_7487_14b1d7175bf7b43.png_569]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_14b1d7175bf7b43.png?569
[16_7487_11b924f18302b5b.png_1028]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_11b924f18302b5b.png?1028
[16_7487_6677a74e62f2a85.png_11]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_6677a74e62f2a85.png?11
[16_7487_988a352a06b1d93.png_11]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_988a352a06b1d93.png?11
[16_7487_7acbfa13b018203.png_12]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_7acbfa13b018203.png?12
[16_7487_c2ae41de2a188d1.png_393]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_c2ae41de2a188d1.png?393
[16_7487_45e86e4952c77c5.png_442]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_45e86e4952c77c5.png?442
[16_7487_f03d246fa871c81.png_425]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_f03d246fa871c81.png?425
[16_7487_76b236214a4ff11.png_299]: http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_76b236214a4ff11.png?299
[16_7487_070f4544d557f55.png_22]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_070f4544d557f55.png?22
[16_7487_4e39a0bc6f95d4b.png_130]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_4e39a0bc6f95d4b.png?130
[16_7487_7413b401839f3cd.png_456]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_7413b401839f3cd.png?456
[16_7487_bbda7a5203e9d77.png_32]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_bbda7a5203e9d77.png?32
[16_7487_c59082e914cd8bb.png_30]: http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_c59082e914cd8bb.png?30