[cocos2d]CCLabelBMFontクラスの使い方

(Xcode 4.3.2 、cocos2d 1.0.1)

こんにちは。 今回は文字画像をフォント代わりに使用したLabelを作成する、
"CCLabelBMFont" クラスの使い方について(最低限のことを)説明します。

2013/1/10 : fntファイル内の変数説明に誤りが有り、修正いたしました。
　　　　　　　失礼いたしました。

① 文字画像ファイルを作成する

文字画像を作成します。
サンプルとして、以下の画像を作成しました。(ファイル名：score_image.png)

白色の数字です。
このファイルをプロジェクトに追加します。

② fntファイルを作成する

"○○.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=30 base=0 scaleW=10 scaleH=100 pages=1 packed=0
page id=0 file="score_image.png"

chars count=11
char id=44  x=0    y=5 width=10     height=36     xoffset=0     yoffset=0    xadvance=10     page=0  chnl=0   // ,
char id=48  x=9    y=5 width=23     height=36     xoffset=0     yoffset=0    xadvance=23     page=0  chnl=0   // 0
char id=49  x=30   y=5 width=13     height=36     xoffset=0     yoffset=0    xadvance=15     page=0  chnl=0   // 1
char id=50  x=44   y=5 width=20     height=36     xoffset=0     yoffset=0    xadvance=20     page=0  chnl=0   // 2
char id=51  x=63   y=5 width=19     height=36     xoffset=0     yoffset=0    xadvance=19     page=0  chnl=0   // 3
char id=52  x=83   y=5 width=21     height=36     xoffset=0     yoffset=0    xadvance=21     page=0  chnl=0   // 4
char id=53  x=103  y=5 width=19     height=36     xoffset=0     yoffset=0    xadvance=19     page=0  chnl=0   // 5
char id=54  x=122  y=5 width=18     height=36     xoffset=0     yoffset=0    xadvance=18     page=0  chnl=0   // 6
char id=55  x=140  y=5 width=19     height=36     xoffset=0     yoffset=0    xadvance=21     page=0  chnl=0   // 7
char id=56  x=159  y=5 width=20     height=36     xoffset=0     yoffset=0    xadvance=20     page=0  chnl=0   // 8
char id=57  x=179  y=5 width=21     height=36     xoffset=0     yoffset=0    xadvance=21     page=0  chnl=0   // 9

"info face〜"の行の値の意味は不明です。
この行を削除してしまってもとりあえず問題はなかったのですが、サンプルにある設定をほぼそのまま使用しています。

"common〜"の行の値の意味も不明です。
共通設定なんだろうなぁーとは思うのですが、値をかえてもラベルの見た目が変わりません。
この値もサンプルのままです。

"page〜"の行の値は"file="に手順①で作成した文字画像ファイル名を書きます。
"id="の値の意味は不明ですが、この値を0以外にすると正しく動きません。

"char〜"の１行が、１文字の設定です。 各設定の意味は下表参照。

2013/1/10：x,yに指定する起点は「左上」でした。

id	設定する文字のコードを指定。 コードはShift-JIS ※最近Unicodeも使えるようになったそうです。
x	文字画像から切り抜く１文字の起点X （切り抜きたい部分の左上を起点とする）
y	文字画像から切り抜く１文字の起点Y （切り抜きたい部分の左上を起点とする）
width	文字画像から切り抜く１文字の横幅
height	文字画像から切り抜く１文字の縦幅
xoffset	１文字を表示させる際に、指定値だけ横にずらす。 ＋値だと右へ、ー値だと左へ。
yoffset	１文字を表示させる際に、指定値だけ縦にずらす。 ＋値だと下へ、ー値だと上へ。
xadvance	１文字の横幅。 最低widthの値以上にしないと、次の文字と重なってしまう。
page	不明。
chnl	不明。。。

1文字の設定を纏めると以下のイメージです。

2013/1/10 :イメージ図を修正しました。

③ .hファイルの修正


ヘッダファイルに、CCLabelBMFontクラスの変数を追加します。
以下、サンプルコードです。

CCLabelBMFont *scorelabel;      //得点を表示するラベル(を想定）

④ .mファイルの修正

メソッドファイルに、CCLabelBMFontクラスの初期化、表示などの処理を追加します。
以下、サンプルコードです。

-(id) init
{
	if( (self=[super init])) {
        
        // 背景　-------------------------------------
	back = [CCSprite spriteWithFile:@"back.png"];
	back.position = ccp(160,240);
	[self addChild: back z:0];
        
        // CCLabelBMFontの設定 -----------------------------------------------------------------------
        scorelabel = [[CCLabelBMFont labelWithString:@"00000000" fntFile:@"score_image.fnt"] retain];
        [scorelabel setPosition:ccp(160,240)];
        [self addChild: scorelabel z:1];
	
        // 得点表示 --------------------------------------------------------------------------------
        NSString* score = @"123459876"; // 便宜上得点を文字列で保持。通常ゲームなら整数をNSString型に変換する処理を入れる。
        [scorelabel setString:score];
        
	}
	return self;
}

CCLabelBMFontの初期化は以下のコードで行っています。

[[CCLabelBMFont labelWithString:@"00000000" fntFile:@"score_image.fnt"] retain];

第一引数はラベルの初期文字列、
第二引数（fntFile:）は手順②で作成したfntファイルの名前を文字列形式で指定します。
後はCCLabelTTFクラスなどと同じように、表示させる位置を設定し、レイヤーに追加します。

⑤ビルド！！

以下のように、指定した文字列が作成した対応した文字画像で表示されるようになります。

文字コードと画像が紐づけられるので、例えば特定の単語を画像にし、
それを１文字として使用していない文字コードと紐づけを行えば、
「〇〇連鎖」、「〇〇点」といった表示も簡単にできますね。


だいぶ不明点の多い説明でしたが、 これで自作フォントを作成することが可能です。

ただ、fntファイルの記述をを全アルファベット分手書きで行うのはさすがに大変です。
そんなときは文字画像作成やfntファイルの自動作成をしてくれる専用のツール（Hiero他）が有りますので、
自作フォントをゲームで使用する際は調べて使ってみようと思います。

以上です。