Tweet

Pocket

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

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

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

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

CCLabelTTF

システムフォントや自前で用意した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);

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

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

CCLabelBMFont

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

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

どうも、そんなの実装されてないみたいです。
そもそも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などを使うと簡単に作れます。無料でも作れるのがあるみたいです。

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

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

マルチ解像度対応

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

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

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

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

//マクロの定義
#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です。

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

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