使用向导创建标签NGUI从入门到实战大学霸

使用向导创建标签NGUI从入门到实战大学霸

2.3  标签使用向导创建标签NGUI从入门到实战大学霸

标签（Label）的作用是在游戏视图的特定位置上，以特定字体显示文本信息。本节就来说明在Unity中，使用NGUI创建及使用Label的方法。

2.3.1  使用向导创建标签使用向导创建标签NGUI从入门到实战大学霸

本章第一节使用名为Widget Tool的向导创建了Sprite，而本节将使用同样的方法创建Label。不同的地方只是向导使用的模版不同而已，如图2-29所示。此处需要设置的属性是：

q  Template：Label；

q  Add To：Panel；

图2-29  创建标签使用向导创建标签NGUI从入门到实战大学霸

在Hierarchy视图里，选中新创建的Label，即可在Inspector视图查看其UILabel(Script)组件，如图2-30所示。

图2-30  Label上的UILabel(Script)组件使用向导创建标签NGUI从入门到实战大学霸

q  Font：指定了Label上显示的文本所使用的字体；

q  在文本框中键入的内容，此内容会作为Label上显示的文本；

q  Overflow：指定Label上显示的文本与Label大小之间的关系；

提示：Overflow属性有4个可选项：Shrink Content表示会缩小文本去适应Label的大小；Clamp Content表示，字体和Lable的大小都是固定的，而多余的文本将不在Label上显示；Resize Freely表示Label会改变大小适应文本内容；Resize Height表示Label只会改变高度去适应文本，也就是说文本会多行显示；如图2-31所示。

图2-31  Overflow属性各可选项效果

q  Encoding：如果开发者希望添加表情，以及令同一标签内文本的颜色不同，就需要将这个属性选中；

q  Effect：此属性可以用于为文本添加阴影，以及文字轮廓的效果；

q  Max Lines：此属性用于设置文本的最大行数；

2.3.2  示例：为游戏界面添加标题使用向导创建标签NGUI从入门到实战大学霸

在本章学习精灵图片类型的时候，曾制作了一个拥有花纹的游戏背景，如图2-32所示。而本小节将为这个游戏背景添加游戏标题，使用的就是本节介绍的Label。

图2-32  拥有花纹的游戏背景使用向导创建标签NGUI从入门到实战大学霸

具体的操作实现步骤是：

（1）为Hierarchy视图里的Panel对象添加子对象，方法有两种：

q  单击GameObject|Create Empty Child命令；

q  按下快捷键Alt+Shift+N；

（2）将新添加的子对象命名为Title，在其下使用向导创建一个Sprite，向导上各属性设置如图2-33所示。

图2-33  创建一个Sprite使用向导创建标签NGUI从入门到实战大学霸

（3）将新创建的Sprite命名为Background，它将作为Label上显示的文本的背景色。在Inspector视图里，设置下列属性：

q  Position：(0,0,0)；

q  Sprite Type：Sliced；

q  Depth：2；

q  Color Tint：（R：95，G：255，B：150，A：200）；

（4）为了让这个Background的宽度与游戏的背景保持一致，需要为其添加UIStretch（Script）组件。方法是：单击Component|NGUI|UI|Stretch命令，然后设置此组件的下列属性，如图2-34所示。

q  Container：Window；

q  Style：Horizontal；

q  Demensions：Y轴上的值是62；

图2-34  Background的两个脚本组件上属性的设置使用向导创建标签NGUI从入门到实战大学霸

（5）此时，就设置好了要添加的标题的背景色，效果如图2-35所示。

图2-35  游戏标题的背景色效果使用向导创建标签NGUI从入门到实战大学霸

（6）使用向导创建一个Label，用于显示游戏的标题。然后将其置于Title对象下，成为后者的子对象。并在Inspector视图里，设置下列属性：

q  文本框中填入内容：[AAFFFF]Main Menu；

提示：[AAFFFF]用于指定Main Menu文本的颜色。

q  Overflow：Resize Freely；

q  Depth：3；

（7）为了让这个Label与背景Background对齐，并处于后者的中心位置，需要为Label添加UIAnchor(Script)组件，并做下列设置，如图2-36所示。

q  Container：Background；

提示：此Background是Title的子对象。

q  Side：Center；

图2-36  Label的两个脚本组件上属性的设置使用向导创建标签NGUI从入门到实战大学霸

（8）完成以上设置以后，游戏标题的显示效果如图2-37所示。

图2-37  游戏标题的显示效果

（9）通过以上的各步操作，只是设置了一个具体特定背景颜色，以及特定文本内容的游戏标题而已，但是这个标题还没有放置到游戏背景中的合适位置。为此，需要为Title对象添加UIAnchor(Script)组件，方法是单击NGUI|Attach|Anchor命令，然后做下列设置，如图2-38所示。

q  Container：Window；

q  Side：Top；

图2-38  UIAnchor(Script)组件的各属性设置

（10）由此，游戏标题将显示于游戏背景顶部中央的位置，如图2-39所示。

图2-39  位于游戏背景顶部中央位置的游戏标题使用向导创建标签NGUI从入门到实战大学霸