cocos2d-xでCCLabelBMFontのフォントサイズを変更


tint_before

iOS7になってからこのタイプのiOSシミュレータが使えなくなっちゃったっぽいのですが、「シミュレータ」って感じがするので今も基本iOS6でテストしちゃってますよ。

それはともかく、cocos2d-xでCCLabelBMFontを使用する機会が多くなってきたのですが、そのフォントサイズを変更できたらと思ったので、やり方を調べてみました。

cocos2d-xでの文字の描画方法

先に、基本のおさらいを。
cocos2d-xでは、主に2種類の文字の描画方法があります。

CCLabelTTF

システムフォントや自前で用意したttfファイルを使って描画する方法です。
以下のようなメリットとデメリットがあるみたいです。

【メリット】
・フォントサイズなど自在に変更できる
・色も自由に変更できる
・ストロークの設定ができる(※)
・テキストシャドウの設定もできる(※)
(※)cocos2d-x2.1.4以降から。ただストロークは、iOS7やAndroidでは色が変わらないというバグがあるみたい。
【デメリット】
・描画が遅い
・自前でttfファイルを用意しない場合、ちょっとちゃっちい
・(ttfファイルを用意した場合)ファイル容量がかさばる

とりあえず、iPhone側はヒラギノなど結構組み込みフォントも豊富なのですが、Androidはちょっとアレですね。全然ないですもんね。

参考:[cocos2d] CCLabelTTFで利用出来るFontについて(iPhone用のフォントです)

//フォントサイズ40で作成
CCLabelTTF* ttf = CCLabelTTF::create("テスト","HiraKakuProN-W6",40);
//フォントの色を変更(setColorでも同じかも)
//ttf->setColor(ccc3(0,0,0));
ttf->setFontFillColor(ccc3(0,0,0));
//ストローク(色、太さ)
ttf->enableStroke(ccc3(200,0,200),1.0f);
//テキストシャドウ(オフセット、透明度、ぼかし)
ttf->enableShadow(CCSizeMake(2,-2),255,3.0f);
this->addChild(ttf);

cclabelttf_stroke

Androidはヒラギノ角ゴがないのでデフォルトのが表示されます。

独自フォントを用意しないかぎりは、Arialなど使ってただ文字を表示させる為に使うという位置付けで使う方がいいかもです。それだけでも使う機会はかなりでてくると思います。

CCLabelBMFont

次に、今回のメインのCCLabelBMFontです。これは、用意したテクスチャアトラスからラベルを作ってくれるクラスとなります。
親クラスはCCSpriteBatchNodeで、テクスチャをくっつけるだけなのでとても描画が早いというメリットがあるみたいです。

【メリット】
・描画が早い
・色んなデザインのフォントを描画できる
【デメリット】
・fntファイルを用意する必要がある(面倒)
・ストローク、テキストシャドウ、フォントサイズ、フォントの色だけを変更する関数などは実装されてない(基本できない)

あれ…サイズ変更できないの?

どうも、そんなの実装されてないみたいです。
そもそもCCLabelBMFontはCCSpriteBatchNodeを使って画像をしきつめるだけなので、当然っちゃ当然ですね。

ただCCNodeにはsetScale()というスケールを変更する関数が存在してますので、それを使えば擬似的にサイズを変更することができます。

同様に、白い文字でfntファイルを作成すれば、setColorを利用することで色も変えることができますね。

めでたしめでたし。

ちょっと記事として陳腐すぎますね。

そんなの誰でも思いつくだろうし、実際みんなやってることだろうと思います。
探しても全然記事がないから今回記事にしてみたんですけど、記事がないのは要するに「言わずもがな領域」だからなんでしょうかね。みんな思いつくという意味で。
あるいはあらかじめ大きさを計算して作成するだろうから大きさを変更する必要がないのかもですね。

とはいえ、ぼくはやっぱり大きさは変更したいですし、特にマルチ解像度に対応させたかったのでそれを簡単にする方法をメモも兼ねて書いておきます。

それに言わずもがな領域だったとしても書いてる記事がネットにあまりないのなら書いておきたいですね(`・ω・´)
それくらいしか書けることがないですからね(`・ω・´)

CCLabelBMFontのフォントサイズ変更(マルチ解像度対応版)

関連:cocos2dxでマルチ解像度に対応させる

とりあえず、ただ単にスケールを変更するだけっていうのだと記事としていいのかと不安になっちゃうんで、せめて「実際のフォントサイズと同じスケールに変更」できるような方法を考えてみます。

マルチ解像度対応に関して、正攻法で行くならそれぞれの解像度に合わせた画像を用意してそれぞれのフォルダに入れるということになるでしょうが、今回は一つの画像で対応できるようにします。

まずは準備

上のマルチ解像度対応のだとfontsフォルダを読み込まないようになっているので、ちゃんとそれも参照しにいくようにします。

cocos2dxでマルチ解像度に対応させるのをそのまま使う場合は、AppDelegate.cppに以下のコードを入れるだけでOKです。

//35行目
//soundファイルもついでに設定しとく
CCFileUtils::sharedFileUtils()->addSearchPath("sound");
CCFileUtils::sharedFileUtils()->addSearchPath("fonts");

次に、画像とfntファイルを用意します。

fntファイルは、有料ですがGlyph Designerなどを使うと簡単に作れます。無料でも作れるのがあるみたいです。

それで作った画像がこちら。

test_font.png

縮小することを前提とする為、64pxで作成しています。あと、ストロークは2pxとちょっと太めです。また色を変えることを前提とする為に白で作りました。

マルチ解像度対応

それでは対応させていきます。対応する際には「CC_CONTENT_SCALE_FACTOR()」を使います。

これですけど、以前書いたcocos2d-xのCCScale9Spriteで画像を部分的に引き延ばすでもマルチ解像度対応時に出てきた関数です。マルチ解像度対応時にはもうこれを使えばいい、と思っとけばいいかもですね。

この関数(というかマクロなのですが)の正体は「CCDirector::sharedDirector()->getContentScaleFactor()」となります。
実はCCLabelTTFはフォントサイズが例外をのぞいて自動でマルチ解像度対応となるのですが、それも内部的にはこの関数が使われています。

※補足:CCLabelTTFのマルチ解像度の例外
CCEGLView::sharedOpenGLView()->setDesignResolutionSize()を途中でいじった場合やこの環境が違う下では大きさが変わったりするみたいです。
ただ最初の設定以外でそこをいじる機会はないかも?(多分)

というわけで、それを使用してマルチ解像度のコーディングをしていきます。

//マクロの定義
#define BM_FONT_SIZE(__SIZE , __BASE) (CC_CONTENT_SCALE_FACTOR() * ((float)__SIZE / (float)__BASE))
#define BM_FONT_SIZE64(__SIZE) (BM_FONT_SIZE(__SIZE , 64))

//使用する
CCLabelBMFont* font = CCLabelBMFont::create("テスト", "test_font.png.fnt");
font->setAlignment(kCCTextAlignmentLeft);
font->setAnchorPoint(ccp(0,1));
font->setColor(ccc3(200, 0, 200));
font->setScale(BM_FONT_SIZE64(40));
font->setPosition(/*省略*/);
this->addChild(font);

//比較の為の
CCLabelTTF* ttf = CCLabelTTF::create("テスト", "HiraKakuProN-W6", 40);
ttf->setHorizontalAlignment(kCCTextAlignmentLeft);
ttf->setAnchorPoint(ccp(0,1));
ttf->setFontFillColor(ccc3(200,0,200));
ttf->enableStroke(ccc3(0, 0, 0), 1.0f);
ttf->enableShadow(CCSizeMake(2, -2), 255 , 2.0f);
ttf->setPosition(/*省略*/);
this->addChild(ttf);

現在作成してるアプリの中で確かめてみます。
上がCCLabelBMFont、下がCCLabelTTFです。

bmfont_ttf

大きさなど殆ど変わらない感じになってます。

こんな長々と書くようなものじゃないかもですけど、とりあえずこの方法で思ったフォントの大きさに自由に変更することができます。

コメントを残す

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