ShoeBoxを使用してフォントを作成して表示する。

ShoeBoxとは、テクスチャをゲーム用に扱いやすくしてくれるようなツールです多分。
cocos2dxとの相性はいいと思います。しかも無料で使えます(テクスチャアトラス化などもしてくれる様です)。
ビットマップフォントを作成するツールは他にもあり、Glyph Designerがありますが有料です。
作成手順としてはまず公式サイトからダウンロードしてきましょう。

ShoeBox
http://renderhjs.net/shoebox/

右上に青くShoeBoxとバージョン名が書かれたリンクを押すとダウンロードできます。
インストールが出来起動する前にフォント画像を用意します。
フォント画像としてM+FONTS使用させて頂きます、画像編集ソフトはGIMPです。

M+FONTS
http://mplus-fonts.sourceforge.jp/mplus-bitmap-fonts/index.html
出来た画像がこれです。512*512のpng形式でhiragana.pngという名前で作りました、文字の間隔を少し開いています。
hiragana.png
ShoeBoxを起動してGUIを押します。そこのBitmap Fontと書かれたところに作った画像ドラッグ&ドロップします
dorop21783281.png

そしたら文字を勝手に認識して分割表示されると思います。この状態だとまだ正しく分割されたとは言えません。設定を変えなくては行けないのでSettingを押します。
変更前621812
settingでの変更する所は作った画像(hiragana.png)の場合以下のようになります。
タブのAdvancedを選択します。
setting1273618.png
1.Merge Blod Sizeを5にします。これは文字の"い"”は”など間に空白のある文字の分割部分がおかしいので、Merge Blod Sizeを5に増やす事で分割する幅が5以上になったのだと思います。
2.Txt Charsに文字をセットします。ここには「あいうえおかきくけこさ……わをん」までを入力しています。画像の左上から順番に分割された画像がどの文字に当たるかを設定しています。
3.Messageでは1.2.で設定した部分が正確に反映されたか確認するためです。
4.File Nameを決めます。font.fntという名前にしました。
これで設定は完了です。以下のように表示が変わっていると思います。
変更後168221
3.Messageで入力した文字はプレビュー画面の右に"ん"と表示されていればおkです。
右下のSave Fontを押して保存したらfont.fntとfont.pngファイルが出来ているのでそれをプログラムで組み込む事で文字が表示できるようになります。

cocos2dx3.0で組み込む場合 xcodeでfont.fntとfont.pngを追加します。コードは以下のようになります。
//フォント生成
    Label* label = Label::createWithBMFont( "font.fnt", "あいうえお");
    label->setPosition(Point(Director::getInstance()->getWinSize().width/2, Director::getInstance()->getWinSize().height/2));//真ん中に表示
    addChild(label);
 
これで実行しても自分の場合breakpointが発生しました。
解決方法としてはfont.fntの中身のfont.pngまのでリンクが書かれているのをfile="font.png"だけにしたら表示出来ました。
fontLink変更前3128
↓変更後
fontLink変更後3128
faceは変えなくても出来たのですがついでに変えときました。
下のように表示されればおkです。
スクショ16373512

LabelBMFont使用時font.fntの中身編集したい時に覚えておくメモ
/*lineHeightが改行したときの幅になる。scaleW、scaleHはfont.pngの画像サイズを指定している。 */
common lineHeight=50 base=26 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
/*x,yが位置 width,heightがサイズ、xoffset、yoffsetは描画するときの位置、xadvanceが文字幅となっている */
char id=12354 x=68 y=193 width=31 height=32 xoffset=0 yoffset=18 xadvance=32 page=0 chnl=0 letter="あ"
 
余談ですがLabelTTFは文字を簡単に表示できるらしいですが、処理の速度を求めるならLabelBMFontを使った方が良さそうです。

Read more

検索フォーム
プロフィール

mihumo

Author:mihumo
FC2ブログへようこそ!

最新記事
月別アーカイブ
カテゴリ
ブロとも申請フォーム

この人とブロともになる

最新コメント
最新トラックバック
リンク
RSSリンクの表示
Amazon
楽天
QRコード
QR