bmGlyphでゲーム用にゴージャスなフォントを作る - 夏までにiPhone アプリつくってみっか！

前作BeeClusterでは「フラットデザイン」と言い張り、飾り気のない真っ白なフォントを使っていました。
手抜きはいとも簡単に見破られ、レビューで「文字にやる気が感じられない」とのご指摘を受けてしまいました。
そこで、今作のTravelShooting JP(名前初公開です）では気合いの入ったフォントを作るべく、bmGlyphと言うMac用のビットマップフォント作成ツールを購入しました。Mac AppStoreで1000円でした。

bmGlyph

Stéphane QUERAUD
開発ツール
¥1,220

同じようなツールでGlyph Designerというものがあり、どちらにしようかと悩みましたが、こちらは3600円と若干お高いのと、Mac AppStoreでない独自のストアにカード番号を入力するのが若干不安だったので、安くて決済方法に安心感のあるbmGlyphを選択しました。

基本的にデザインは、Macに入っているフォントをベースに

1. 影を付ける
2. フチを付ける
3. 色やグラデーション、テクスチャーを付ける

という操作をしてゴージャスに仕上げます。
画面左側のボタンやスライダーを適当にクリックやドラッグしているとその効果がリアルタイムで右側のフォント表示部分に反映されるので、適当にいじっているうちに使い方がわかります。
フォントに日本語が含まれていればひらがな、カタカナ、漢字をビットマップフォントに含める事ができますが、全ての漢字を入れるのは無理があるので、使用するものをその都度追加して行くというような使い方になると思います。

f:id:takujidev:20140821205708j:plain

ゲーム画面での大きさや色のバランスを調整するためのPreview機能があり、ゲーム画面のスクリーンショットをドラッグ&ドロップして、その上の任意の位置に任意の文章を表示できます。
画面の色調に合わせてグラデーションを掛けてみました。
グラデーションに使う色はいくつも指定できるので、空、地面、遠景っぽい感じに仕上げました。

f:id:takujidev:20140821210244j:plain

bmGlyphはcocos2dに対応しており、CCLabelBMFont用の.fntファイルを生成可能です。
また、retinaディスプレイ用の-hd付きファイルと非retinaディスプレイ用のファイルを一緒に生成する事も可能です。
ファイルを生成するにはPublishボタンをクリックします。
初期状態ではTargetsにDefaultというのがありますので、これをretinaディスプレイ用に使用します。
パスとファイル名を指定し、Suffixを-hdにします。あとはFormatがCocos2dになっていればOKです。

f:id:takujidev:20140821211351j:plain

非レティナディスプレイ用のファイルを生成するため、ターゲットを追加します。
Defaultを選択した状態で、Duplicate with scaleの中にある「５０」と書かれたボタンを押すとTargetsに50%という行が現れます。
それをクリックして、SuffixのCHANGE MEを削除します。
あとは、PUBLISH !ボタンをクリックすれば自動的にretina, 非retina用の.pngファイルと.fntファイルが指定したディレクトリに作成されます。

f:id:takujidev:20140821212142j:plain

cocos2dでの使用方法はこんな感じになります。
自分の場合はプロジェクトのResourcesディレクトリの下にBMFontsというディレクトリを作りそこにファイルを生成しているのでファイル名の前にBMFonts/を付けています。

        CCLabelBMFont* kyoto = [CCLabelBMFont labelWithString:@"KYOTO 京都" fntFile:@"BMFonts/travelshootingJP.fnt"];
        kyoto.position = ccp(240, 160);
        [self addChild:kyoto];

このように表示されました。

f:id:takujidev:20140821213746j:plain

BeeClusterの殺風景なフォントと比べ大幅にゴージャス感がアップしました。

https://itunes.apple.com/jp/app/travelshooting-jp-toraberushutingu/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt