cocos2dxで固定ピッチフォント画像を使った文字列表示

2013-09-14
#cocos2dx

cocos2dxでフォント表示をする場合、TrueTypeのCCLabelTTFとビットマップフォントのCCLabelBMFontが使える。ビットマップフォントを使う場合、.fntファイルというものが必要になる。

ビットマップフォントと.fntを作るツールとしてはGlyph Designerなどのツールがある（NGUI 向けのビットマップフォントを作成出来るアプリ一覧 - 強火で進め）。.fntファイルのフォーマットの正式な仕様は知らないけど、[Cocos2d-X] CCLabelBMFont で使用する .fnt ファイルの仕様 | 学習A4デスノート @ Cocos2d-x とかの勉強メモのような構成になっている。

でオールドタイプとしては固定ピッチで１枚に固められた（下のような）画像を使ってフォント表示をしたいんだけど、こういった場合でもCCLabelBMFontには.fntファイルが必要となる。

x1font

でもそのためにわざわざ新しいツールとか使いたくない…ので.fntをでっちあげるスクリプトを作った：

#!/usr/bin/ruby

# Create .fnt file for fixed font.

font_image_file_name = ARGV.shift || 'font.png'
fontw = ARGV.shift || 8
fonth = ARGV.shift || 8
cols = ARGV.shift || 16
rows = ARGV.shift || 6
start = ARGV.shift || 32  # Space

puts <<EOD
info face="" size=0 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=0 aa=1 padding=0,0,0,0 spacing=1,1
common lineHeight=#{fonth} base=0 scaleW=10 scaleH=100 pages=1 packed=0
page id=0 file="#{font_image_file_name}"

chars count=#{rows * cols}
EOD

rows.times do |i|
  cols.times do |j|
    c = start + i * cols + j

    puts <<EOD
char id=#{c} x=#{j * fontw} y=#{i * fonth} width=#{fontw} height=#{fonth} xoffset=0 yoffset=0 xadvance=#{fontw} page=0 chnl=0   // #{c.chr}
EOD
  end
end

生成された.fntファイル：

info face="" size=0 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=0 aa=1 padding=0,0,0,0 spacing=1,1
common lineHeight=8 base=0 scaleW=10 scaleH=100 pages=1 packed=0
page id=0 file="font.png"

chars count=96
char id=32 x=0 y=0 width=8 height=8 xoffset=0 yoffset=0 xadvance=8 page=0 chnl=0   //  
char id=33 x=8 y=0 width=8 height=8 xoffset=0 yoffset=0 xadvance=8 page=0 chnl=0   // !
char id=34 x=16 y=0 width=8 height=8 xoffset=0 yoffset=0 xadvance=8 page=0 chnl=0   // "
...

これと画像ファイルをResourcesに追加してやって

CCLabelBMFont* label = CCLabelBMFont::create("Hello, world!", "font.fnt");

などとすればよい。

CCLabelBMFontはCCSpriteBatchNodeを使って文字を表示しているのでパフォーマンスもなかなかよいだろう。

関連記事

新着記事