Starling の TextFiled を使ったテキスト表示

Starling では、文字を表示するために TextField というクラスが提供されています。フォントの種類、大きさ、色、位置などを指定して、テキストを画面に表示できます。

とはいえ、GPU で直接フォントを扱えるわけではありません。実際には、裏で Flash Player の TextFiled を使って CPU 描画したものを、ビットマップ化して GPU にアップロード、という動作をします。

つまり、Starling の TextField が提供するのは、与えられたテキストとフォントから、動的にテクスチャを生成する機能です。

そのため、カーソルで、表示されたテキスト内の文字を選択する、といった操作はできません。 (ただのビットマップなので)

また、特に動的に生成する理由のないテキストは、TextField を使うより、事前にテクスチャとして準備しておいた方が、実行時の効率は良さそうです。

TextField のインスタンス生成

さて、下が TextField のコンストラクタの定義です。表示領域の幅と高さ、表示するテキストの 3 つの引数が必須です。

TextField(width:int, height:int, text:String, 
  fontName:String = "Verdana", fontSize:Number = 12,
  color:uint = 0x0, bold:Boolean = false)

どの値も、後から変更できますが、効率面からは、幅と高さはあまり変えない方が良いかもです。

下は、Hello World を表示するサンプルです。フォントの大きさと色をインスタンス生成後に指定しています。

import starling.text.TextField;
 
private var myTextField:TextField;
 
private function onAddedToStage(e:Event):void
{
  // TextFieldのインスタンスを生成
  myTextField = new TextField(160, 80, "Hello World");
 
  // TextFieldインスタンスに属性を指定
  myTextField.fontSize = 16;
  myTextField.color = 0x993333;
  myTextField.border = true;
 
  addChild(myTextField);
}

border 属性の値を true にしておくと、TextField の領域が目で確認できるため、開発時には便利です。

Starling の TextField には、指定された幅と高さから、テキストがはみ出ないよう、フォントの大きさ自動的に調整する便利な機能があります。

myTextField.autoScale = true;

TextField オブジェクトの autoScale 属性を true に設定すると、テキスト全体の表示が、フォントの大きさの指定よりも優先されます。

Starling の便利クラス

Starling には、色を指定するための Color という便利クラスがあります。TextField の color 属性の指定に使えます。

import starling.utils.Color;
 
myTextField.color = Color.AQUA;

また、テキスト配置の値を持つクラスもあります。縦方向の配置は HAlign、横方向の配置は VAligin です。

import starling.utils.HAlign;
import starling.utils.VAlign;
 
// TextFieldの左上に寄せて文字を配置
myTextField.hAlign = HAlign.LEFT;
myTextField.vAlign = VAlign.TOP;

HAlign に定義されている値は、LEFT、CENTER、RIGHT の 3 種類、VAlign に定義されている値は、TOP、CENTER、BOTTOM の 3 種類です。

フォントの埋め込み

Starling の TextField では、埋め込んだ TrueType フォントの利用が可能です。

フォントを埋め込むと、表示結果が実行環境に依存しなくなるため、お勧めということになっています。日本語の場合は、いろいろと難しい面もありそうですが。

ともあれ、以下が、フォント埋め込みのサンプルです。Ubuntu という名前のフォントを埋め込んでいます。

[Embed(source="Ubuntu-R.ttf", embedAsCFF="false", fontFamily="Ubuntu")]
private static const UbuntuRegular:Class;
 
private function onAddedToStage(e:Event):void
{
  myTextField = new TextField(160, 80, "Hello World", "Ubuntu", 16);
  myTextField.color = 0x993333;
  addChild(myTextField);
}

Embed の指定の際に、embedAsCFF の記述は必須です。

ビットマップフォントの使用

Starling の TextField ではビットマップフォントも使えます。

ビットマップフォントは、グリフをビットマップとして書き出したものです。個々の文字のファイル内の位置情報等は別途 XML 形式で記述します。

XML ファイル内は、以下のような形式になっています。基本情報、文字コードとテクスチャの関連、それからオプションとしてカーニング情報が記述されます。

<font>
  <info face="Desyrel" size="35" />
  <common lineHeight="40" />
  <pages>
    <page id="0" file="desyrel.png" />
  </pages>
  <chars>
    <char id="48" x="23" y="1" width="24" height="23" xoffset="3" yoffset="13" xadvance="23" />
    <char id="49" x="48" y="1" width="12" height="23" xoffset="3" yoffset="12" xadvance="12" />
  </chars>
  <kernings> 
    <kerning first="83" second="83" amount="-4"/>
  </kernings>
</font>

これらビットマップフォントの情報は BitmapFont クラスに読み込みます。以下はその手順です。

まず、それぞれのファイルを埋め込みます。ここはテクスチャアトラスとまったく同じ手順です。

[Embed(source = "desyrel.png")]
private static const DesyrelTexture:Class;
 
[Embed(source="desyrel.fnt", mimeType="application/octet-stream")]
private static const DesyrelXml:Class;

次に、BitmapFont オブジェクトを生成します。

import starling.text.BitmapFont;
import starling.textures.Texture;
 
private function onAddedToStage(e:Event):void
{
  // ビットマップフォントの読み込み
  var texture:Texture = Texture.fromBitmap(new DesyrelTexture());
  // 文字情報の読み込み
  var xml:XML = XML(new DesyrelXml());
 
  // BitmapFontのインスタンス生成
  var myBitmapFont:BitmapFont = new BitmapFont(texture, xml);
 
  ...この先は下に続く
}

生成した BitmapFont オブジェクトは使用する前に、registerBitmapFont() メソッドで TextField クラスに登録します。 (registerBitmapFont() は静的メソッドです)

その後、TextField の fontName 属性にビットマップフォントのフォント名を設定すると表示されます。フォント名は、BitmapFont オブジェクトの name 属性から取得できます。

import starling.text.TextField;
 
private function onAddedToStage(e:Event):void
{
  ...上からの続き
 
  // TextFieldクラスにビットマップフォントを登録
  TextField.registerBitmapFont(myBitmapFont);
 
  // TextFieldのインスタンスを生成
  myTextField = new TextField(300, 150, "Hello World");
  // ビットマップフォントのフォント名を設定
  myTextField.fontName = myBitmapFont.name;
 
  addChild(myTextField);
}

不要になったビットマップフォントは unregisterBitmapFont() メソッドで登録を削除できます。引数に削除したいフォント名を指定します。

その際、削除した BitmapFont に対して dispose() も呼ばれます。これを避けたい場合は、2 つ目の引数に false を指定します。

TextField.unregisterBitmapFont(myBitmapFont.name, false);

ビットマップフォントのテクスチャは、独立したファイルではなく、一般のテクスチャアトラスと一緒のファイルに追加する形でも利用できます。これによりテクスチャの切り替えを減らせる場合もありそうです。

ビットマップフォントの表示設定

ビットマップフォントを、制作時の大きさで表示したい時は、TextField オブジェクトの fontSize 属性に BitmapFont.NATIVE_SIZE を指定します。

// ビットマップフォントの元の大きさで表示する
myTextField.fontSize = BitmapFont.NATIVE_SIZE;

また、ビットマップフォントを制作時の見た目で表示したい時は、TextField オブジェクトの fontSize 属性に Color.WHITE を指定します。

// ビットマップフォントのテクスチャそのままを表示する
myTextField.color = Color.WHITE;

color 属性のデフォルト値は黒のため、何も指定しないと、黒色のテキストが描画されます。

最後に、ビットマップフォントの制作には以下のツールが推奨されています。

  • Windows: Bitmap Font Generator (Angel Code:無償)
  • Mac OS: Glyph Designer (71squared:有償)

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/260

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261