cocos2d-x ラベルの表示

ラベルを表示するには下記３つのクラスがある。

CCLabelTTF
CCLabelBMFont
CCLabelAtlas

それぞれ表示するフォントに何を使うかによる。のかな？？

●CCLabelTTF

・メリット
　システムフォント使うことができる。(お気に入りのフォントがあれば用意する必要がない。)
　多くの文字に対応できる。
　
・デメリット
　システムフォントが気に入らなければttfファイルを用意しなければならない。
　ttfファイルは容量が大きい。
　描写が遅い。

●CCLabelBMFont

・メリット
　描写が早い。
　
・デメリット
　ビットマップフォント画像を用意しなければならない。
　fntファイルは容量が大きい。
　フォントサイズを変更することができない。

*下記はサンプルにあったものです。

●CCLabelAtlas

　調べてみてもなかなか見つからないのがこのCCLabelAtlas。
　でも初心者な自分にはpngファイルを使っているのをCocos2d-xのサンプルでみて、
　とりあえず真似して使えるのでは？？と思って試してみた。
　スコアの表示によいかなぁと思いまして。
　pngファイルをみると、「./0123456789」という文字列が入っていて、
　どういう順に並んでいるかもわからなかったけど、どうやらASCII文字順らしい。

・メモ
　簡易版CCLabelBMFont。らしい。

*下記はサンプルにあったものです。

それで、実際に使ってみたラベルのファイルの画像は下記。

これは　　横256px　　縦32px　　(sdの場合)となっていて、

横幅は　256px　÷　16　=　16px
(サンプルにあったpngファイルだと文字16個分のスペースがあったので1個あたりの横幅のpxを計算)

高さは　32px　 ÷　3/4　　　　　　 =　24px
(サンプルにあったpngファイルだと高さが3/4のスペースだったので1個あたりの高さのpxを計算)

実際のソースは下記。

	// スコアマーク表示
	// 切り取る幅を設定(上記のメモを参照)
	const int IMAGE_WIDTH = 256 / 16;
	const int IMAGE_HEIGHT = 32 *3/4;

	// タイマー用のラベル
	// cc.LabelAtlas.create(strText, charMapFile, itemWidth, itemHeight, startCharMap)
	countTime=0.00;

	// %3.2fは小数点以上3桁、小数点以下2桁でfは浮動小数点型
	timeString = CCString::createWithFormat("%3.2f", countTime);
	
	CCLabelAtlas *labelTime = LabelAtlas::create(timeString->getCString(), "labelatlas.png", IMAGE_WIDTH, IMAGE_HEIGHT, '.');
	
	labelTime->setPosition(Point(origin.x + spriteMark[0]->getContentSize().width*2,
		origin.y+ visibleSize.height*3/4 + spriteMark[0]->getContentSize().height/2));
	
	this->addChild(labelTime);

ラベルの使い方はみんな大体同じかな。

//●CCLabelTTF

	//　CCLabelTTF::create(テキスト, フォント, 文字サイズ);
	CCLabelTTF *labelTTF = CCLabelTTF::create("HellonWorld", "Arial", 30);

	//で、画面の中央に表示。とか。
	labelTTF->setPosition(ccp(size.width/2,size.height/2));

//●CCLabelBMFont

	//　CCLabelBMFont::create(テキスト, ファイル);
	CCLabelBMFont *labelBMFont = CCLabelTTF::create("HellonWorld", "file.fnt");

	//画面の中央に表示。
	labelBMFont->setPosition(ccp(size.width/2,size.height/2));

//●CCLabelAtlas

	//　CCLabelAtlas::create(テキスト, ファイル, 横幅, 高さ, ファイルの最初の文字);
	CCLabelAtlas *labelAtlas = CCLabelAtlas::create("123", "file.png", IMAGE_WIDTH, IMAGE_HEIGHT, '.');

	//画面の中央に表示。
	labelAtlas->setPosition(ccp(size.width/2,size.height/2));

こんな感じ。

自分の場合は、サンプルにあったのを真似しようとしてCCLabelAtlasを使ってみた。
スコアで数字しか使わないし、pngファイルだったらinkspaceですぐ作れちゃうと思ったし、
固定文字の場合スプライトで貼りつけておけば良いのだろう思って。。
でもこの記事を書いてみると、CCLabelBMFontの方がよさそうな気がしますね。。

ちなみにfntファイルを作成するには
Windowsの場合は「Bitmap Font Generator」
macの場合は「GlyphDesigner」
などのツールを使えば良いみたい。

今度試してみるかな。

 - アプリ ラベル