文本

文本是FairyGUI的基础控件之一。文本不支持交互,鼠标/触摸感应是关闭的。

动态字体

动态字体(Dynamic Font)是指直接使用ttf字体渲染文字。ttf字体文件可能存在于操作系统中,也可能打包在游戏中。

FairyGUI编辑器运行的环境,与应用实际运行的环境是不相同的。比如你在PC上制作界面,最终界面可能运行在手机上。在编辑界面时,动态字体是使用FairyGUI使用编辑器所在的系统环境的字体,在运行时,则是由实际的运行环境,例如Android系统等提供的字体。设计时的字体可以与运行时的字体不同,但建议选取效果较为相近的。

设置编辑器使用的字体可以在项目属性里设置。运行时的字体则需要由代码设置:

//Droid Sans Fallback是安卓上支持中文的默认字体
UIConfig.defaultFont = 'Droid Sans Fallback';

设置运行时使用的字体需保证该字体在目标平台上也存在,否则达不到想要的效果。如果你想打包字体到目标平台,那么需要查询引擎提供的支持,比如Unity,可以这样做:使用字体

如果你需要使用ttf文件,请先在操作系统中安装该文件(一般双击ttf文件即可),这样重启编辑器后就可以在字体列表里看到这种字体了。

位图字体

在游戏中经常有这样的设计:一些表达特别元素的字符,使用了图片来制作,例如:

FairyGUI编辑器支持位图字体。首先,我们创建一种字体。点击主工具栏,然后,弹出了字体编辑窗口,我们从资源库里把制作好的数字图片拖入到窗口,并设置每个图片对应的字符,点击保存,这样我们的字体就设置好了。如果要修改每个字符对应的图片,将图片重新拖入即可。

使用图片代替字符的办法,对于少量文本,这是非常方便的,但如果需要嵌入成百上千字,为每个字制作为图片,然后再每个设置对应字符,这工作量就有点大了。FairyGUI编辑器支持外部的位图字体制作工具BMFont、ShoeBox等,这些工具的使用方法请自行参考网络资料。使用外部工具最后会导出一个fnt文件(注意1:文件格式应该选择fnt格式,不支持xml或者json),在编辑器点击导入素材,然后选择这个fnt文件,就可以把字体导入到编辑器里了。

以下是推荐的BMFont导出设置:

以下介绍位图字体设置界面的功能:

实例属性

点击主工具栏中的按钮,生成一个文本元件。

GTextField

文本支持动态创建,例如:

GTextField aTextField = new GTextField(); //LayaAir平台用new GBasicTextField
aTextField.SetSize(100,100);
aTextField.text = "Hello World";

动态改变文本的样式(字体大小、颜色等),在不同的平台,方式略有差别:

//Unity/Cry
TextFormat tf = aTextField.textFormat;
tf.color = ...;
tf.size = ...;
aTextField.textFormat = tf;

//Cocos2dx
TextFormat* tf = aTextField->getTextFormat();
tf->color = ...;
tf->size ...;
aTextField->applyTextFormat();

//其他平台
aTextField.color = ...;
aTextField.fontSize = ...;

如果要设置文本的字体为位图字体,字体名称直接使用字体的url就可以了,例如‘ui://包名/字体名’。

GTextInput

如果文本勾选为“输入”,则运行中的实例对象为GTextInput。

可以通过UIConfig.inputHighlightColorUIConfig.inputCaretSize修改光标的颜色和大小。注意,输入光标的大小会自动根据屏幕缩放选择最合适的宽度,一般情况下你不需要修改。

输入文本在文本改变时有通知事件:

//Unity/Cry
aTextInput.onChanged.Add(onChanged);

//AS3
aTextInput.addEventListener(Event.CHANGE, onChanged);

//Egret
aTextInput.addEventListener(Event.CHANGE, this.onChanged, this);

//Laya
aTextInput.on(laya.events.Event.INPUT, this, this.onChanged);

在获得焦点和失去焦点时有通知事件:

//Unity
aTextInput.onFocusIn.Add(onFocusIn);
aTextInput.onFocusOut.Add(onFocusOut);

//AS3
aTextInput.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
aTextInput.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);

//Egret
aTextInput.addEventListener(FocusEvent.FOCUS_IN, this.onFocusIn, this);
aTextInput.addEventListener(FocusEvent.FOCUS_OUT, this.onFocusOut, this);

//Laya
aTextInput.on(laya.events.Event.FOCUS, this, this.onFocusIn);
aTextInput.on(laya.events.Event.BLUR, this, this.onFocusOut);

如果要主动设置焦点,可以用

aTextInput.RequestFocus();

如果输入文本设置了单行,则当用户按回车键时会派发一个事件(注意,仅在PC上有效。在手机上的键盘按Done不属于支持范围内,引擎一般没有提供和手机键盘交互的接口):

//Unity
aTextInput.onSubmit.Add(onSubmit);

UBB语法

FairyGUI支持的UBB语法有:

标签之间支持嵌套,但不支持交叉嵌套。例如:

//允许
[color=#FFFFFF][size=20]text[/size][/color]

//不允许
[color=#FFFFFF][size=20]text[/color][/size]

对不支持的标签,例如“[tag]text[/tag]”,FairyGUI不做解析,这部分内容原样输出。当“[”字符要用于非UBB语法时,可以使用”\[“这样的方式转义,注意,在编辑器输入时是直接输入”\“即可,在代码里需要用”\\“这样才能表达反斜杠。另外,只需转义”[“,不需要转义”]”。

普通文本不支持语法中的img、url标签,因为普通文本是不可以图文混排的。要支持图文混排,改为使用富文本。

FairyGUI也提供了扩展UBB解析器的方法。继承UBBParser类,注册自己的TagHandler即可。具体实现方法请阅读UBBParser的源码或参考demo。

文本模板

使用文本模板可以更灵活的动态调整文本输出。例如,如果需要显示“我的元宝:100金200银”,那么常见的制作方式有:

  1. 使用一个文本控件显示,那么运行时程序员要改变数值时只能整个文本重新打一遍,这无疑是一个冗余的工作量,且不利于美术和程序解耦。
  2. 使用四个文本控件显示,那么运行时程序员只需要改变显示数值的文本控件即可,但美术的工作量增大。

使用文本模板功能,可以轻松解决这种需求。只需要在编辑器放置一个文本控件,文本为“我的元宝:{jin=100}金{yin=200}银”,然后勾选“使用文本模板”即可。这样在编辑器中显示依然是“我的元宝:100金200银”,运行时程序员只需要执行以下的代码就可以更新数值:

aTextField.SetVar("jin", "500").SetVar("yin", "500").FlushVars();

也可以批量设置:

Dictionary<string, string> values;
values["jin"] = "500";
values["yin"] = "500";
//注意,这种方式不需要再调用FlushVars
aTextField.templateVars = values;

如果运行时要动态启用文本模板功能,不需要设置什么开关,只需要直接调用SetVar即可。
如果运行时要动态关闭文本模板功能,只需要把templateVars设置为null即可,即:

aTextField.templateVars = null;

当“{”字符不是用于模板时,可以使用”\{“这样的方式转义,注意,在编辑器输入时是直接输入”\“即可,在代码里需要用”\\“这样才能表达反斜杠。另外,只需转义”{“,不需要转义”}”。

文本模板优先于UBB解析,所以模板也可以在UBB中使用,例如文本为:“这个是可以变色的[color={color=#FF0000}]文本[/color]”,可以方便的实现动态更改部分文本颜色的需求。