Cocos2d-x:ビットマップフォント作成

久しぶりにビットマップフォントを作成しようと思ったらハマったのでメモ。以前にもメモしたのですが言葉足らずな感じなので…。今回もShoeBoxを利用します。
→参考:以前のメモ(2014.9/8)
 

pngは分割しない

spriteFrameを作成するときはバラバラのpngデータを利用しますが、ビットマップフォントの場合は「1つにまとめたpngデータ」を用意します。今回用意したのは以下のような画像(分かりやすいように黒背景にしていますが、実際のデータは透明背景です)。
gameText
 

ShoeBoxの設定

1枚のpngファイルが分析されて自動分割されるので、それに合わせて「Txt Chars」を設定しなければなりません。メインウインドウ内(下画像で一番小さいウインドウ)に対応状況が表示される(黒縁の白文字)ので間違いがないか確認できます。
またデフォルトのカーニング設定は文字間隔が狭いので調整した方がよいでしょう(Kerning Valueの値を調整する)。
blog0227

.fntファイルの修正

shoeBoxでbitmapフォントを作成するとpngファイルの他に「fntファイル」が書き出されるのですが、このファイル内のパスが絶対パスになってしまうので、これを修正します。
スクリーンショット-2016-02-27-3.19
fileの値はfntファイルからみたpngファイルの相対位置なので、同じ階層に配置するのであればファイル名だけでOKです。あと問題はないと思うのですが、一番最初の「face」の項目も同じように修正しておきましょう。
 

Cocos上での表記

ビットマップフォントの表示をWeb上で検索すると「CCLabelBMFont」を利用した方法が出てきますが、これは非推奨になっているので以下のようにcreateWithBMFontメソッドを利用します。
++++++++++++++++++++++++++++++++++++++++++++++++++
string strTimeScore = StringUtils::format(“%d”,myTime);
Label* lbTimeScore = Label::createWithBMFont(“images/numFont.fnt”,strTimeScore);
lbTimeScore->setPosition(120,136);
endNode->addChild(lbTimeScore);
++++++++++++++++++++++++++++++++++++++++++++++++++
今回は得点表示なので、1行目で得点を文字列に変換しています。
2行目でビットマップフォントを作成しています。今回利用するnumFont.fntはCocosのResources内のimagesフォルダに入れたので上記のように「パス」を記述しました。3行目で位置を設定し、4行目で表示しています。

以上。

2 Responses to Cocos2d-x:ビットマップフォント作成

  1. youtubeで今週の進捗4/2を見ました!
    水色の回転しながら拡散し2回軌道を変えるのがとてもカッコよかったです(๑˃̵ᴗ˂̵)
    美しい形を関数だけで表すのが凄すぎて尊敬してます、頑張ってください╭(๑•̀ㅂ•́)و

    • ありがとうございます。あれは分裂弾の応用で、分裂数を1にすることで起動を変更していたりします。弾幕の器と差別化するため、今後もハデっぽい弾幕を追加していく予定です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


− 3 = 六


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>