FairyGUI:笔记 ：Text （六）

• 动态字体

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

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

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

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

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

如果要在编辑器里使用ttf字体，请双击ttf文件，确认安装到系统，这样重启编辑器后就可以在字体列表里看到这种字体了。

• 位图字体

• 实例数据

输入限制 限制用户输入的字符。一般只用在PC上。这里，不同平台的语法不一致。

• AS3/Starling 参考资料 TextField.restrict。
• Egret 参考资料 TextField.restrict。
• Laya 参考资料 Input.restrict。
• Unity 参考资料 正则表达式语法。例如限制只能输入数字的表达式是：“[0-9]”。

Egret  中TextField.restrict

restrict : string = null

 

语言版本:

Egret 2.4

运行时版本:

Web,Native

 

表示用户可输入到文本字段中的字符集。如果 restrict 属性的值为 null，则可以输入任何字符。如果 restrict 属性的值为空字符串，则不能输入任何字符。如果 restrict 属性的值为一串字符，则只能在文本字段中输入该字符串中的字符。从左向右扫描该字符串。可以使用连字符 (-) 指定一个范围。只限制用户交互；脚本可将任何文本放入文本字段中。
如果字符串以尖号 (^) 开头，则先接受所有字符，然后从接受字符集中排除字符串中 ^ 之后的字符。如果字符串不以尖号 (^) 开头，则最初不接受任何字符，然后将字符串中的字符包括在接受字符集中。
下例仅允许在文本字段中输入大写字符、空格和数字：
my_txt.restrict = "A-Z 0-9";
下例包含除小写字母之外的所有字符：
my_txt.restrict = "^a-z";
如果需要输入字符 \ ^，请使用2个反斜杠 "\\-" "\\^" ：
可在字符串中的任何位置使用 ^，以在包含字符与排除字符之间进行切换，但是最多只能有一个 ^ 用来排除。下面的代码只包含除大写字母 Q 之外的大写字母：
my_txt.restrict = "A-Z^Q";

• GTextField

文本支持动态创建，例如：

GTextField aTextField = new GTextField();
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.inputHighlightColor和UIConfig.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();

如果输入文本设置了单行，则当按用户回车时会派发一个事件：

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

• UBB语法

FairyGUI支持的UBB语法有：

• [img]image_url[/img] 显示一个图片。这里的image_url可以是”ui://包名/图片名”的内部url格式，也可以是一个外部资源的url。图片最终是通过GLoader显示的，支持外部资源的能力可以参阅GLoader的文档。在这里，你无法设置图片大小。如果需要需要设置图片大小，改用HTML语法。

• [url=link_href]text[/url] 显示一个超级链接。其中link_href可以在链接点击后触发的事件里获得。

• [b]text[/b] 设置文本为粗体。

• [i]text[/i] 设置文件为斜体。

• [u]text[/u] 设置文本为下划线。

• [sup]text[/sup] 设置文本为上标。（仅Unity平台支持，且在编辑器暂时无法预览）

• [sub]text[/sub] 设置文本为下标。（仅Unity平台支持，且在编辑器暂时无法预览）

• [color=#FFFFFF]text[/color] 设置文本颜色。注意一定要用十六进制颜色代码，像red、blue这种颜色名称是不支持的。使用color语法还可以设置文本颜色为渐变色（仅Unity平台支持，且在编辑器暂时无法预览），例如：

//指定两个颜色表示上下过渡
[color=#FFFFFF,#000000]文字[/color]
//指定四个颜色可以做左右过渡或者双方向过渡
[color=#FFFFFF,#CCCCCC,#000000,#FFFF00]文字[/color]

• [font=font_face]text[/font] 设置文本的字体。

• [size=10]text[/size] 设置文本的字体大小。

• [align=left/center/right]text[/align] 设置文本的水平对齐。（仅Unity平台支持，且在编辑器暂时无法预览）

标签之间支持嵌套，但不支持交叉嵌套。例如：

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

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

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

• 文本模板

使用文本模板可以更灵活的动态调整文本输出。例如，如果需要显示“我的元宝：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;

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