Unity插件之NGUI学习（5）—— 创建Label图文混排及文字点击

创建一个新的Scene，并按 Unity插件之NGUI学习（2）创建UI Root。

准备工作，制作Font，现在Project窗口创建一个Font文件夹，然后从系统自带字体文件夹中选择自己需要的字体，我选择了黑体，然后拖到Font文件夹中去。选择刚导入的字体。

Font Size默认是16，不过网上看到过size16在IOS上显示太小，所以设置为30。

在菜单中选择NGUI->Open->Font Maker

Type默认是Generated Bitmap——会生成材质文件，Dynamic——动态字体，不过黄色警告提示动态字体会产生多余的DrawCall，考虑绘制性能问题，所以选择了Generated Bitmap。

Source选择刚才导入的黑体字体。

Size——设置材质图片中字体的大小。

Custom——可以增加游戏中显示的文字。

Atlas——选择原有已经制作的的Atlas （图文混排时，需要与混排的图片制作在同一个Atlas）。

然后点击Create the Font按钮，在Project窗口会生成Font的Prefab

设置图文混排的标识，选择Project窗口中刚制作的Font Prefab，然后在Inspector窗口设置图片标识。

在Symbols and Emoticons窗口，目前我只是的图片标识有："(<)" 使用undo_btn代替，"(?)"使用help_btn代替。

选择菜单NGUI->Open->Widget Wizard(Legacy)

Atlas选择刚才制作Font中output的Atlas

Font选择刚才制作的Font Prefab

Template选择Label

Add To选择UI Root

然后在Inspector设置Label参数

Font Size —— 字体大小。

Overflow 选择ResizeHeight，由文本总体高度来决定。

Effect —— None没有特效，Shadow阴影，Outline描边。

其他的属性大家可以自己尝试，应该都能读懂的。

文字内容：

[b]bold[/b],[i]italic[/i],[u]underline[/u], [s]strikethrough[/s],

[sub]sub[/sub] 

[00ff00]Green[-]

Lucy(?) 露茜军团 (<)

[url=http://blog.csdn.net/xcookies][u]clickable [/u][/url]

[b][/b]黑体 [i][/i]斜体 [u][/u]下划线 [s][/s]中划线 [sub][/sub]副标题效果 [00ff00][-]颜色效果 (?) (<)就是刚才设置的图片标识 [url=http://blog.csdn.net/xcookies][/url]地址链接

看下显示效果

下面添加Label的点击效果，使用户点击了clickable字样可以打开Url链接。

创建一个C# Script

using UnityEngine;

using System.Collections;

public class LabelClickTest : MonoBehaviour {

void OnClick ()

{

Debug.Log("Label Click");

UILabel lbl = GetComponent<UILabel>();

if (lbl != null)

{

string url = lbl.GetUrlAtPosition(UICamera.lastHit.point);

if (!string.IsNullOrEmpty(url)) Application.OpenURL(url);

}

}

}

在Hierarchy窗口选择Label，选择菜单Component->Physics->Box Collider，勾选Is Trigger ， 在Inspector窗口设置Box大小尺寸，可以在Widget的Collider勾选auto-adjust to match。然后将刚才的LabelClickTest脚本添加到Label。

运行游戏，点击clickable字样，会自动打开浏览器，访问Label内容的Url链接。

PS:NGUI的Label真的很强大，尤其是图文混排，还支持局部黑体、斜体、下划线等等功能，唯一遗憾的是图文混排时，如果图片过大时，排版有点难看，所以制作图片的时候，尽量使用跟字体高度差不多的图片比较合适。