back
ラベルでテキストを表示しよう (3/4)
■画面の好きな場所に配置する
Cocos2d-xのウィジェット（GUIの部品）を扱うとき、注意したいのが「表示場所をどう指定すればいいか？」でしょう。
ウィジェットの配置をするとき、「どこを基準にして位置を指定するか」をまず考えましょう。普通は、getVisibleOriginで取り出される位置となる左下からどれだけ離れているか？で指定をします。
が、それでは「右上に表示したい」なんて場合はどうすればいいのか、ちょっと考えてしまいますね。まずは、上下左右中央の位置の指定の仕方を理解し、そこからどれだけ離れた場所に置くか、を考えるようにするとよいでしょう。
では、下に簡単なサンプルを挙げておきます。これを見ながら、表示位置の設定の仕方をよく理解しておきましょう。
●画面の中央
中央に置く場合、アンカーポイントはウィジェットの中心に設定します。そしてoriginである左下から、visibleSizeの横幅・高さの半分だけ加算した位置に表示をします。
●画面の左下
左下は、サンプルでやりましたね。アンカーポイントを「0, 0」に設定し、originの位置に表示します。これは簡単ですね。
●画面の左上
左上の場合、アンカーポイントを「0, 1」に設定します。そして横幅はorigin.xに、高さはorigin.yにvisibleSize.heightを足した値に設定します。
●画面の右下
右下の場合、アンカーポイントは「1, 0」にします。そして横幅には、origin.xにvisibleSize.widthを足した値を設定します。高さはorigin.yに設定します。
●画面の右上
これが一番面倒です。アンカーポイントは「1, 1」に設定します。そして横幅はorigin.xにvisibleSize.widthを足した値に、高さはorigin.yにvisibleSize.heightを足した値に設定します。
ウィジェットの配置をするとき、「どこを基準にして位置を指定するか」をまず考えましょう。普通は、getVisibleOriginで取り出される位置となる左下からどれだけ離れているか？で指定をします。
が、それでは「右上に表示したい」なんて場合はどうすればいいのか、ちょっと考えてしまいますね。まずは、上下左右中央の位置の指定の仕方を理解し、そこからどれだけ離れた場所に置くか、を考えるようにするとよいでしょう。
では、下に簡単なサンプルを挙げておきます。これを見ながら、表示位置の設定の仕方をよく理解しておきましょう。
●画面の中央
ウィジェット->setAnchorPoint(Vec2(0.5, 0.5));
ウィジェット->setPosition(origin.x + visibleSize.width / 2,
origin.y + visibleSize.height / 2);
中央に置く場合、アンカーポイントはウィジェットの中心に設定します。そしてoriginである左下から、visibleSizeの横幅・高さの半分だけ加算した位置に表示をします。
●画面の左下
ウィジェット->setAnchorPoint(Vec2(0, 0));
ウィジェット->setPosition(origin.x, origin.y);
左下は、サンプルでやりましたね。アンカーポイントを「0, 0」に設定し、originの位置に表示します。これは簡単ですね。
●画面の左上
ウィジェット->setAnchorPoint(Vec2(0, 1));
ウィジェット->setPosition(origin.x,
origin.y + visibleSize.height);
左上の場合、アンカーポイントを「0, 1」に設定します。そして横幅はorigin.xに、高さはorigin.yにvisibleSize.heightを足した値に設定します。
●画面の右下
ウィジェット->setAnchorPoint(Vec2(1, 0));
ウィジェット->setPosition(origin.x +
visibleSize.width, origin.y);
右下の場合、アンカーポイントは「1, 0」にします。そして横幅には、origin.xにvisibleSize.widthを足した値を設定します。高さはorigin.yに設定します。
●画面の右上
ウィジェット->setAnchorPoint(Vec2(1, 1));
ウィジェット->setPosition(origin.x + visibleSize.width,
origin.y + visibleSize.height);
これが一番面倒です。アンカーポイントは「1, 1」に設定します。そして横幅はorigin.xにvisibleSize.widthを足した値に、高さはorigin.yにvisibleSize.heightを足した値に設定します。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
#pragma execution_character_set("utf-8")
#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("中央に表示する", "fonts/msgothic.ttc", 48);
label0->setAnchorPoint(Vec2(0.5, 0.5));
label0->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2);
this->addChild(label0, 1);
auto label1 = Label::createWithTTF("左下に表示する", "fonts/msgothic.ttc", 48);
label1->setAnchorPoint(Vec2(0, 0));
label1->setPosition(origin.x, origin.y);
this->addChild(label1, 1);
auto label2 = Label::createWithTTF("左上に表示する", "fonts/msgothic.ttc", 48);
label2->setAnchorPoint(Vec2(0, 1));
label2->setPosition(origin.x, origin.y + visibleSize.height);
this->addChild(label2, 1);
auto label3 = Label::createWithTTF("右上に表示する", "fonts/msgothic.ttc", 48);
label3->setAnchorPoint(Vec2(1, 1));
label3->setPosition(origin.x + visibleSize.width, origin.y + visibleSize.height);
this->addChild(label3, 1);
auto label4 = Label::createWithTTF("右下に表示する", "fonts/msgothic.ttc", 48);
label4->setAnchorPoint(Vec2(1, 0));
label4->setPosition(origin.x + visibleSize.width, origin.y);
this->addChild(label4, 1);
return true;
}
| << 前へ | 次へ >> |