[cocos2d]CCLabelBMFontクラスの使い方
(Xcode 4.3.2 、cocos2d 1.0.1)
こんにちは。
今回は文字画像をフォント代わりに使用したLabelを作成する、
"CCLabelBMFont" クラスの使い方について(最低限のことを)説明します。
2013/1/10 : fntファイル内の変数説明に誤りが有り、修正いたしました。
失礼いたしました。
① 文字画像ファイルを作成する
文字画像を作成します。
サンプルとして、以下の画像を作成しました。(ファイル名:score_image.png)
白色の数字です。
このファイルをプロジェクトに追加します。
② fntファイルを作成する
"○○.fnt"というテキストファイルを作成し、プロジェクトに追加します。
以下、中身のサンプルです。
|
"info face〜"の行の値の意味は不明です。
この行を削除してしまってもとりあえず問題はなかったのですが、サンプルにある設定をほぼそのまま使用しています。
"common〜"の行の値の意味も不明です。
共通設定なんだろうなぁーとは思うのですが、値をかえてもラベルの見た目が変わりません。
この値もサンプルのままです。
"page〜"の行の値は"file="に手順①で作成した文字画像ファイル名を書きます。
"id="の値の意味は不明ですが、この値を0以外にすると正しく動きません。
"char〜"の1行が、1文字の設定です。 各設定の意味は下表参照。
2013/1/10:x,yに指定する起点は「左上」でした。
id | 設定する文字のコードを指定。 コードはShift-JIS ※最近Unicodeも使えるようになったそうです。 |
x | 文字画像から切り抜く1文字の起点X (切り抜きたい部分の左上を起点とする) |
y | 文字画像から切り抜く1文字の起点Y (切り抜きたい部分の左上を起点とする) |
width | 文字画像から切り抜く1文字の横幅 |
height | 文字画像から切り抜く1文字の縦幅 |
xoffset | 1文字を表示させる際に、指定値だけ横にずらす。 +値だと右へ、ー値だと左へ。 |
yoffset | 1文字を表示させる際に、指定値だけ縦にずらす。 +値だと下へ、ー値だと上へ。 |
xadvance | 1文字の横幅。 最低widthの値以上にしないと、次の文字と重なってしまう。 |
page | 不明。 |
chnl | 不明。。。 |
1文字の設定を纏めると以下のイメージです。
2013/1/10 :イメージ図を修正しました。
③ .hファイルの修正
ヘッダファイルに、CCLabelBMFontクラスの変数を追加します。
以下、サンプルコードです。
CCLabelBMFont *scorelabel; //得点を表示するラベル(を想定) |
④ .mファイルの修正
メソッドファイルに、CCLabelBMFontクラスの初期化、表示などの処理を追加します。
以下、サンプルコードです。
|
CCLabelBMFontの初期化は以下のコードで行っています。
[[CCLabelBMFont labelWithString:@"00000000" fntFile:@"score_image.fnt"] retain]; |
第一引数はラベルの初期文字列、
第二引数(fntFile:)は手順②で作成したfntファイルの名前を文字列形式で指定します。
後はCCLabelTTFクラスなどと同じように、表示させる位置を設定し、レイヤーに追加します。
⑤ビルド!!
以下のように、指定した文字列が作成した対応した文字画像で表示されるようになります。
文字コードと画像が紐づけられるので、例えば特定の単語を画像にし、
それを1文字として使用していない文字コードと紐づけを行えば、
「〇〇連鎖」、「〇〇点」といった表示も簡単にできますね。
だいぶ不明点の多い説明でしたが、
これで自作フォントを作成することが可能です。
ただ、fntファイルの記述をを全アルファベット分手書きで行うのはさすがに大変です。
そんなときは文字画像作成やfntファイルの自動作成をしてくれる専用のツール(Hiero他)が有りますので、
自作フォントをゲームで使用する際は調べて使ってみようと思います。
以上です。
« [Xcode]ショートカット纏め(エディター編) | トップページ | [cocos2d]CCMenuクラスを使って簡単にメニューを作ろう »
コメント
この記事へのコメントは終了しました。
« [Xcode]ショートカット纏め(エディター編) | トップページ | [cocos2d]CCMenuクラスを使って簡単にメニューを作ろう »
参考になりました。しかし、文字の開始は左下ではなくて左上ではないでしょうか?
投稿: shinriyo | 2012年12月29日 (土) 22時44分
shinriyo様
ご指摘ありがとうございます。
記事を修正いたしました。
ご指摘のとおり、文字画像の開始は「左上」が開始点でした。
改めて確認した所、yの値を大きくするほど文字の上側から削られて行きました。
投稿: Noriki Nishimura | 2013年1月10日 (木) 21時16分