■お詫び
先週、記事を公開することが出来ませんでした。
弊社記事をご覧の皆様、誠に申し訳ございませんでした。
■はじめに
前回は、UnityのUI機能についてご紹介致しました。
今回は、Starling（Feather）の部品の1つである、テキスト入力に対して、埋め込みフォントを利用する方法についてご紹介します。
■テキスト入力部品に埋め込みフォントを適用する
Starling + Feather 環境でコンテンツを作成している際に、テキスト入力が必要な場面が出てきた場合には、「feathers.controls.TextInput」を利用します。
※リファレンスは http://feathersui.com/api-reference/feathers/controls/TextInput.html になります
この部品では、一般的なテキスト入力部品と同等の機能を備えています。
・ビットマップフォントを利用することが出来る
・埋め込みフォントを利用することが出来る
・最大文字数を設定できる
・文字制限を設定することが出来る
・背景を設定できる
今回は、テキスト入力に「小塚明朝」という埋め込みフォントを適用します。
リファレンスの冒頭で、フォントに関するプロパティを設定する場合は「textEditorProperties」を利用すること、という記載があったため、初めは以下のように実装を行ってみました。
var textInput:TextInput = new TextInput(); textInput.textEditorProperties.textAlign = "center"; textInput.textEditorProperties.fontSize = 20; textInput.textEditorProperties.fontFamily = "小塚明朝 Pro H"; textInput.textEditorProperties.color = 0x810000; textInput.textEditorProperties.maxChars = 12; addChild( textInput );
このテキスト入力部品を、Windows＋IE環境で見てみましょう。
無事に、入力した文字列が、小塚明朝で表示されていることがわかります。
図1 Windowsで表示した場合はフォントが適用されています
ところが…このテキスト入力部品を、Macの環境で見てみたところ、フォントが適用されておりません。
Mac＋Safari、GoogleChrome、FireFox全てNGでした。
図2 Macで表示するとフォントが適用されませんでした
この方法では上手くいかなかったため、もう一度リファレンスを見てみます。
どうやら、textEditorProperties でフォント等を設定する際に利用されているクラスは、「StageTextTextEditor」という記載がありましたが、このクラスではMacに適用されていない、ということのようです。
丁度、TextInput部品では、textEditorFactory で、フォント等を設定する際に利用するクラスを直接設定することが出来ますので、今度は自分で設定してみることにしました。
var textInput:TextInput = new TextInput();
__textInput.textEditorFactory = function():ITextEditor
{
var tf:TextFieldTextEditor = new TextFieldTextEditor;
tf.embedFonts = true;
tf.textFormat = new TextFormat("小塚明朝 Pro H", 20, 0x810000);
tf.text = "初期値をここに設定します";
tf.textFormat.align = TextFormatAlign.CENTER;
return tf;
}
addChild( textInput );
このテキスト入力部品で動きを確認したところ、Windows環境でも、Mac環境でも、小塚明朝で表示されました！
図3 Windowsで表示した場合は先ほどと変わりません
図4 Macで表示した場合もフォントが適用されるようになりました
■まとめ
以上で、Starling + Feather 環境で埋め込みフォントを適用する方法のご紹介は終了です。
最後までご覧頂き、ありがとうございました。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。