可変幅ビットマップフォントを等幅設定に動的に変換する

9298 ワード
Starling AIR ActionScript flash ActionScript テキストリンク

BitmapFontの便利Util集を作っているので、ちょいちょい紹介します。

上の画面のように、色々な文字つめのフォントを既存のフォントを元に作ります。各フォントが同じテクスチャを使っているので、ドローコールが１ですむのもポイントです。( TextFieldでなく、BitmapFont.createSpriteを使えば。)

＜ 各設定はフォントを実際に使う前に行った方が良さげクエッ

プロポーショナルフォントを等幅フォントに変換する

等幅をにプロポーショナルに変換するのは難しいですが、逆は可能でした。BitmapFontUtilというものをご用意しております。実ソースのリンクは最後に。

sample.as
var baseFont:BitmapFont = TextField.getBitmapFont("フォント名");
// 横幅１６ptの固定幅フォントを作る
var monoSpaceFont1:BitmapFont =
    BitmapFontUtil.cloneBitmapFontAsMonoSpaceFont("新フォント名1", baseFont, 16);
monoSpaceFont1.lineHeight = 16; // ついでにlineHeightも16に調整

一部の横幅のみ変更したフォントを作る

全体コピー時だけでなく、一部の設定上書きも可能です。コード一覧を扱いやすくするCharCodeUtilというクラスも作りました。

sample.as
// フォントのコピーを取る(取らなくてもいいよ)
var monoSpaceFont2:BitmapFont = 
    BitmapFontUtil.cloneBitmapFont("新フォント名2", monoSpaceFont1);
// 一部文字のコード一覧を得る(CharCodeUtil)
var targetIdList:Vector.<int> = CharCodeUtil.getIdListByLetters("、。！？");
// 指定文字だけ半角に変換
BitmapFontUtil.setFixedWidth(monoSpaceFont2, 8, true, targetIdList);

一部のみ余白多めにしたフォントを作る

おまけでこんな事もできました。
余白多くする＝offsetXとxAdvanceを増やす：xAdvanceにはoffsetX増加分も含める、です。

sample.as
var padding:int = 8;
// フォントのコピーを取る(取らなくてもいいよ)
var yohakuFont:BitmapFont = BitmapFontUtil.cloneBitmapFont("新フォント名3", baseFont);
BitmapFontUtil.updatePadding(yohakuFont, padding, 0, padding*2,
// 一部文字のコード一覧を得る(CharCodeUtil)
CharCodeUtil.getIdListByLetters("ヨハクオオメ！"));

スペース系文字の幅を調整する


半角スペース、全角スペース、タブスペースの幅を直接設定できます。

sample.as
var spacesFont:BitmapFont = 
    BitmapFontUtil.cloneBitmapFont("新フォント名4", baseFont);
BitmapFontUtil.setSpaceWidth(spacesFont, 6);
BitmapFontUtil.setZenkakuSpaceWidth(spacesFont, 14);
BitmapFontUtil.setTabWidth(spacesFont, 48);

フォント詳細情報をtraceする。

開発時に必要だったので、BitmapFontUtil.traceBitmapCharInfo(bitmapFont);というのでtraceできるようにしました。

log.txt
<Font:yohaku>
'　'(12288) txsize:0*0 offset:0,0 xAdv:16
'、'(12289) txsize:3*2 offset:0,14 xAdv:5
'。'(12290) txsize:5*4 offset:0,12 xAdv:7
'！'(65281) txsize:2*10 offset:8,5 xAdv:20
'   '(9) txsize:0*0 offset:0,0 xAdv:32
'？'(65311) txsize:8*10 offset:0,5 xAdv:10
' '(32) txsize:0*0 offset:0,0 xAdv:8
'ぁ'(12353) txsize:8*8 offset:0,8 xAdv:10
:
: 
(以下略)

ソースなど

とりいそぎ以上です。BitmapFontUtilには他にも便利機能があります。なお、ビットマップフォントは別記事で紹介したShoeBoxで作りました。マイナーツールですが、便利です。
ShoeBox：ビットマップFONTを書き出してみる (#1紹介編)
ShoeBox：ビットマップFONTを書き出してみる (#2実践編)
ShoeBox：日本語ビットマップFONTを書き出してみる (#3実践編その2)
ShoeBox：ビットマップフォント書き出し設定の解説 (#4詳細編)