0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-05-04

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

スクリーンショット

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

title-logo.png < 各設定はフォントを実際に使う前に行った方が良さげクエッ

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

sample.as
var baseFont:BitmapFont = TextField.getBitmapFont("フォント名");
// 横幅16ptの固定幅フォントを作る
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詳細編)

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?