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上。这里,不同平台的语法不一致。

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;

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

猜你喜欢

转载自blog.csdn.net/baidu_29474379/article/details/83819970