首页 > 代码库 > Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击
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真的很强大,尤其是图文混排,还支持局部黑体、斜体、下划线等等功能,唯一遗憾的是图文混排时,如果图片过大时,排版有点难看,所以制作图片的时候,尽量使用跟字体高度差不多的图片比较合适。
Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击