ビットマップフォントで遊ぶ：ドット絵用フォントをつくってみる

ビットマップフォントで遊ぶシリーズのさらに続きです。前回まで。

• フォントに絵文字を入れ込む
• 未定義文字をトウフで埋める

今回は、扱うすべての文字を絵文字（色つきの四角）に置き換えて、ドット絵パターンを表示してみます。しかし、いったいなんの役に立つのか。。は最後にまとめてます。

さて、これはなんでしょう？ 正解はこれもまた下の方に。

フォントを0から作る

Bitmap Fontを生成する際には、コンストラクタの引数にXMLが必要です。XMLを書くのは結構めんどいので、自作のUtilクラスでは、そのあたりを隠蔽して簡単にフォントが作れるようにしました。

sample.as

//BitmapFontUtil.createEmptyFont("フォント名" ,フォントサイズ,
//   lineHeight(任意), スムージングフラグ(任意);
var font:BitmapFont = BitmapFontUtil.createEmptyFont("hoge" ,12, 12, false);

lineHeightとスムージング設定はあとから設定可能です。このフォントに前回のように画像を登録してやります。

sample.as

// Aに画像を登録する場合
var texture:Texture = _assetManager.getTexture("Aのテクスチャ名");
BitmapFontUtil.addBitmapCharToFont(
    font, BitmapFontUtil.createBitmapCharByTexture("A", texture));

今回の場合は16色のカラーチップ画像（テクスチャを節約するためによく使われるテクニックで、べた塗り作るときに引き伸ばして使うやつ）をテクスチャに用意してあるので、"0"~"E"までに登録してやります。

これでできたフォントを先ほどの、文字テキストに適用すると。。

できあがり

あっ！

さらに横の余白とラインハイトを調整して、隙間を0にすると

あっ！

// 一応、キャラパターンのソースは以下になります。

sample.as

var chara:String = [
	"000888888000",
	"008888888880",
	"00CCCAACA000",
	"0CACAAACAAA0",
	"0CACCAAACAAA",
	"0CCAAAACCCC0",
	"000AAAAAAA00",
	"00CC8CCC0000",
	"0CCC8CC8CCC0",
	"CCCC8888CCCC",
	"AAC8A88A8CAA",
	"AAA888888AAA",
	"AA88888888AA",
	"008880088800",
	"0CCC0000CCC0",
	"CCCC0000CCCC",
].join("\n");

#何に使えるのか？

ドット絵表示するには無駄が多くて使えませんね（笑）。0からフォントを作る参考にやってみたのですが、これ、マップチップ表示には使えるかもしれません。RPGとかシューティングゲームのマップをキストエディタでちゃちゃっと書いて(本格的にやるならTiledとか専用ツールを使うんでしょうが)テ、そのままデータとして使うという。テキスト１発表示でおわので、パフォーマンスも悪くなさげですよ。書き換えが激しい場合は、専用シェーダーとか用意するのがベストですけども。

実際に動くソースはこちらにあります。
https://github.com/harayoki/-qiita1/blob/dot_marix/src/StarlingMain.as

#余談
Starling2.0から組み込みのミニマムビットマップフォント（フォント名MINI)が画像埋め込みでなく、画像データもソース直書きになっています。Embedすると、mx.coreパッケージが必要になっちゃうからとのことです。細かい修正が素晴らしい。
https://github.com/Gamua/Starling-Framework/blob/master/starling/src/starling/text/MiniBitmapFont.as

＜たぶん終わるクエー