StarlingManual:显示文本

来自Starling中文站
跳转到: 导航, 搜索

显示文本非常简单。TextField 类本身具有自说明性。

var textField:TextField = 
    new TextField(100, 20, "text", "Arial", 12, Color.RED);
 
textField.hAlign = HAlign.RIGHT;  // 横向对齐
textField.vAlign = VAlign.BOTTOM; // 纵向对其
textField.border = true;

系统字体 / 嵌入字体

默认情况下 Starling 会使用系统字体渲染文本。要想得到更好的渲染效果,应将需要的字体(确保字体存在)嵌入 SWF 文件。用以下代码实现:

// 不要忽略 "embedAsCFF" 项!
[Embed(source="Arial.ttf", embedAsCFF="false", fontFamily="Arial")]
private static const Arial:Class;
 
[Embed(source="Arialbd.ttf", embedAsCFF="false", fontFamily="Arial", fontWeight="bold")]
private static const ArialBold:Class;

只要嵌入了字体并在创建文本是使用了正确的名称(以及粗体)Starling 就会全部自动完成了,省力又省心。


对于不是经常改变的文本,只使用系统字体就够了。但是如果你的文本内容会经常变动或者你想显示一些特殊形状(不存在的字体)的文本,那么建议你使用位图字体。

位图字体

位图字体就是一个包含所有需要显示字符的纹理。字符位置信息在一个 XML 文档中定义。Starling 渲染文本所要做的全部,就是创建一些保存相应选项的文件:

   有一个来自 AngelCode 的非常好用的工具,可以通过任何字体(TrueType)创建文本字体: Bitmap Font Generator (仅支持 Windows)
   在 OS X 下推荐使用 Glyph Designer – 一款非常强大的为字体添加特效的工具。

无论选择哪款工具:导入字体后,均可以导出 XML 字体数据文件和一个包含白色字符透明背景(32 bit)的 PNG 格式纹理图片。将得到一个扩展名为 “.fnt” 的文件和对应的包含字符的图片文件。

Desyrel.png

要使用位图字体,只要嵌入这些文件到你的 SWF 文件并在 TextField 类中注册字体即可。

[Embed(source="font.fnt", mimeType="application/octet-stream")]
public static const FontXml:Class;
 
[Embed(source = "font.png")]
public static const FontTexture:Class;
 
var texture:Texture = Texture.fromBitmap(new FontTexture());
var xml:XML = XML(new FontXml());
TextField.registerBitmapFont(new BitmapFont(texture, xml));

使用字体时,设置 TextField 实例的 “fontName” 属性为 fnt 文件中定义的名字(“face” 属性)即可。

textField.fontName = "fontName";

以上就是所有要做的了。

BTW: 将文本纹理添加到纹理图谱是非常好的做法,高效。

翻译:于洋(Seven)

个人工具
名字空间

变换
操作
导航
Starling中文资料
Starling原创教程
论坛
友链
工具箱