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

时间: 2025-01-02 03:18:52

Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击的相关文章

Unity插件之NGUI学习(4)—— 创建UI2DSprite动画

创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root,并在UI Root的Camera下创建一个Panel. 然后在选中Panel,在菜单中选择NGUI->Create->Unity 2D Sprite 查看Inspector窗口 接着是在Unity中制作Sprite: 在Project窗口创建Textures文件夹,并从外部拖入一些图片素材,然后选中需要转成Sprite的图片,然后在Inspector窗口进行转变Sprite的操作,如图. 选择Sprite(2D

Unity插件之NGUI学习(9)—— Tween和世界坐标系尺寸转换为NGUI尺寸

在游戏中,有一种比较常见的动画效果,就是产生得分后,分数会在游戏中显示,并快速移动到总分的位置并使之相加.今天我就打算使用NGUI的Tween来制作这种分数动画效果. 根据 Unity插件之NGUI学习(2),创建一个UI Root,然后使用NGUI创建一个Label和一个Button. 在Project窗口中,在Resources/Prefabs文件夹中创建一个Prefab,该Prefab就是一个NGUI的Label,然后在菜单中选择NGUI->Tween->Rotation和NGUI-&g

Unity插件之NGUI学习(7)—— ScrollView(Panel)

今天介绍的ScrollView,參考的是NGUI(3.6.8)中的Example项目:Scroll View(Panel). 先依照Unity插件之NGUI学习(2)创建一个UI Root.然后在UI Root以下创建一个Scroll View,选择菜单NGUI->Create->Scroll View 然后在Inspector窗体做一些參数设置 Movement设置滚动Vertical纵向或者horizontal横向. Scroll Bars能够加入纵向或者横向的滚动栏控件(在这个项目中暂且

Unity插件之NGUI学习(8)—— Table和NGUI尺寸转换为世界坐标系尺寸

根据 Unity插件之NGUI学习(2),创建一个UI Root,在UI Root下创建一个Texture作为背景图,并设置图片,在Wiget下调整大小:然后在UI Root下再创建一个Panel. 在Hierarchy窗口选中Panel,然后选择菜单Component->NGUI->Interaction->Table,查看Inspector窗口,在Panel的属性中增加了UITable. Columns 表示每行有几个元素 Direction 表示超过每列的元素后添加元素的方向 So

Unity插件之NGUI学习(3)—— 创建Button

紧接上一个的项目,使用NGUI在Plane下创建Button 选中Hierarchy窗口中Plane,选择菜单NGUI->Open->Widget Wizard,打开Widget Tool窗口 在Widget Tool窗口选择先前制作的Atlas,在Template中选择Button,在Background选择按钮背景图,Add To选择Plane,按钮就会出现了. 下面介绍按钮触发事件: 可参考宣雨松的关于NGUI事件的文章:http://www.xuanyusong.com/archive

Unity插件之NGUI学习(2)—— 创建Texture和Sprite

首先删除当前的MainCamera并保存当前的scene 选择菜单NGUI->Create->2D UI 添加后显示 Directional light是过后添加的直射光线 在Hierarchy窗口选择Camera,在Inspector窗口中,UICamera的Event Type选择2D UI. 然后在Build Settings...切换Android平台,下一步很重要,在UI Root选择Scaling Style为FixedSizeOnMoblies,一开始是默认的PixelPerfe

Unity插件之NGUI学习(6)—— 关于Widget如何添加触发事件

NGUI中,Button本身就带有OnClick事件,但是Sprite,Label等( 也绑有Widget的)并没有触发事件,其实NGUI的事件触发都必须添加Box Collider,并勾选Is Trigger,在Inspector窗口设置Box大小尺寸,可以在Widget的Collider勾选auto-adjust to match.还有一个比较重要的参数需要设置正确,即是UI Root下Camera参数,在Inspector窗口中,要确定UICamera中的Event Type选择3D UI

NGUI研究之有点坑爹的图文混排

 最近研究了了一下NGUI的图文混排工具,得出的结论是有点坑爹..大家看看我的测试步骤,我用的是目前NGUI的版本3.6.6 . 当我在 Open BitMapFont Marker 的时候界面上出现Assets/NGUI/Editor/FreeType.dylib is missing 的字样.于是查了一下,大概意思是必须要把FreeType.dylib 文件拷贝在/usr/local/lib/FreeType.dylib路径下面.FreeType.dylib 文件在NGUI/Editor

【学习中】Unity插件之NGUI 完整视频教程

课程 章节 内容 签到 Unity插件之NGUI 完整视频教程 第一章 NGUI基础控件和基础功能学习 1.NGUI介绍和插件的导入 6月29日 2.创建UIRoot 6月29日 3.学习Label控件,显示文字 6月29日 4.学习Sprite创建精灵,显示图片 5.学习Panel面板,控件容器 6.创建Button按钮,使用脚本监听按下 7.创建图集Atlas 8.切图SlicedSprite九宫切图 9.dynamicFont动态字体制作和显示 10.widget属性,pivot,dept