ラベルでテキストを表示しよう (1/4)
作成:2015-05-30 08:31
更新:2015-05-30 08:31
更新:2015-05-30 08:31
■Labelでテキストを表示する
前回、基本的なソースコードについてひと通り説明しました。そこでは、テキストの表示をするのに「Label」というクラスを利用していました。まずは、このLabelの基本的な使い方から説明しましょう。
Labelは、以下のようにしてインスタンスを作成します。
ただし、これだと表示するテキストに関する細かな設定がされません。ですから一般的には次のcreateWithTTFというメソッドを使うことが多いでしょう。
フォントは、プロジェクトの「Resources」フォルダ内にフォントファイルを用意しておき、それを指定します。createWithTTFは、その名前の通り、TrueTypeフォントファイル(TTF拡張子あるいはTTC拡張子のファイル)を使ってテキストの表示を作成します。
作成したら、setPositionで表示位置を設定します。
ただし、実際にやってみると、setPositionでは正しく表示位置が調整されないことに気がつくはずです。これは、Labelの表示位置の基準点となる「アンカー」がLabelの中央に設定されているからです。つまり、テキストの始まり位置ではなくて、真ん中の位置がsetPositionで設定されるのです。
後は、その位置をsetPositionで変更するだけです。では、簡単なサンプルを挙げておきましょう。
下のリストは、3つのLabelを順に表示するものです。いずれも、作成されたプロジェクトに標準で用意されているMarker Felt.ttfというフォントファイルを指定してあります。
実際にやってみるとわかりますが、setPosition(origin.x, origin.y)というように、originの位置に表示したLabelは、画面の左下に表示され、origin.y + 100というようにY軸の値を増やすと上に移動していきます。Cocos2d-xでは、位置の値は左下が基準となり、値が増えるに連れ右および上に位置するようになっていくのです。
●setDisplayStatsについて
もう1つ、見慣れない文が用意されているのに気がついたでしょう。以下のようなものです。
(※下のサンプルでは、ヘッダーファイルのHelloWorldScene.hから、void menuCloseCallback(cocos2d::Ref* pSender);を削除しておくのを忘れないように)
Labelは、以下のようにしてインスタンスを作成します。
auto 変数 = Label::create();
ただし、これだと表示するテキストに関する細かな設定がされません。ですから一般的には次のcreateWithTTFというメソッドを使うことが多いでしょう。
auto 変数= Label::createWithTTF(テキスト, フォントファイル, フォントサイズ);
フォントは、プロジェクトの「Resources」フォルダ内にフォントファイルを用意しておき、それを指定します。createWithTTFは、その名前の通り、TrueTypeフォントファイル(TTF拡張子あるいはTTC拡張子のファイル)を使ってテキストの表示を作成します。
作成したら、setPositionで表示位置を設定します。
《Label》->setPosition(横位置 , 縦位置);こんな感じですね。縦横の位置をそれぞれ引数に指定してもいいし、Vec2という構造体を用意しても構いません。後は、addChildでSceneに組み込むだけですね。
《Label》->setPosition(《Vec2》);
■表示位置の基準は?
ただし、実際にやってみると、setPositionでは正しく表示位置が調整されないことに気がつくはずです。これは、Labelの表示位置の基準点となる「アンカー」がLabelの中央に設定されているからです。つまり、テキストの始まり位置ではなくて、真ん中の位置がsetPositionで設定されるのです。
《Label》->setAnchorPoint(横位置 , 縦位置);
これで、表示位置の基準となる場所(アンカー)を設定できます。引数は、0~1の間の実数になります。ゼロだとウィジェットの左端および下端に、1だと右端および上端にアンカーポイントが設定されます。後は、その位置をsetPositionで変更するだけです。では、簡単なサンプルを挙げておきましょう。
下のリストは、3つのLabelを順に表示するものです。いずれも、作成されたプロジェクトに標準で用意されているMarker Felt.ttfというフォントファイルを指定してあります。
実際にやってみるとわかりますが、setPosition(origin.x, origin.y)というように、originの位置に表示したLabelは、画面の左下に表示され、origin.y + 100というようにY軸の値を増やすと上に移動していきます。Cocos2d-xでは、位置の値は左下が基準となり、値が増えるに連れ右および上に位置するようになっていくのです。
●setDisplayStatsについて
もう1つ、見慣れない文が用意されているのに気がついたでしょう。以下のようなものです。
Director::getInstance()->setDisplayStats(false);これは、画面に現在の動作状況の情報を表示しないようにするためのものです。デフォルトでは、畫面の左下にフレームレート数(1秒間に何回表示が書き換えられているか)などが表示されていましたね? あれをOFFにするのがこの文です。覚えておきましょう。
(※下のサンプルでは、ヘッダーファイルのHelloWorldScene.hから、void menuCloseCallback(cocos2d::Ref* pSender);を削除しておくのを忘れないように)
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
#include "HelloWorldScene.h" USING_NS_CC; Scene* HelloWorld::createScene() { auto scene = Scene::create(); auto layer = HelloWorld::create(); scene->addChild(layer); return scene; } bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getInstance()->getVisibleSize(); Vec2 origin = Director::getInstance()->getVisibleOrigin(); Director::getInstance()->setDisplayStats(false); // *stats OFF* auto label0 = Label::createWithTTF("Hello!!", "fonts/Marker Felt.ttf", 48); label0->setAnchorPoint(Vec2(0, 0)); label0->setPosition(origin.x, origin.y); this->addChild(label0, 1); auto label1 = Label::createWithTTF("Welcome.", "fonts/Marker Felt.ttf", 48); label1->setAnchorPoint(Vec2(0, 0)); label1->setPosition(origin.x, origin.y + 100); this->addChild(label1, 1); auto label2 = Label::createWithTTF("Good-bye...", "fonts/Marker Felt.ttf", 48); label2->setAnchorPoint(Vec2(0, 0)); label2->setPosition(origin.x, origin.y + 200); this->addChild(label2, 1); return true; }
※関連コンテンツ
「初心者のためのCocos2d-xゲームプログラミング入門」に戻る