とりあえず、アイコンをピッチリ並べてみました。
ポイントは、座標や拡大サイズを全て計算で算出すること。
こうしないと、機種が変わったときに、確実にレイアウトが崩れます。
float buttonScale = visibleSize.height / (visibleSize.height / 4.0);
float buttonBase = 0.0;
auto homeButton = Sprite::create("btnHome.png");
if (homeButton == nullptr)
{
problemLoading("'btnHome.png'");
}
else
{
homeButton->setPosition(Vec2(sprite->getPosition().x + sprite->getContentSize().width * scaleRate / 2 + origin.x, visibleSize.height + origin.y));
homeButton->setAnchorPoint(Vec2(1.0,1.0));
homeButton->setScale(buttonScale);
buttonBase = visibleSize.height - homeButton->getContentSize().height * buttonScale;
this->addChild(homeButton, 1);
}
auto charaButton = Sprite::create("btnChara.png");
if (charaButton == nullptr)
{
problemLoading("'btnChara.png'");
}
else
{
charaButton->setPosition(Vec2(sprite->getPosition().x + sprite->getContentSize().width * scaleRate / 2 + origin.x,
buttonBase + origin.y));
charaButton->setAnchorPoint(Vec2(1.0,1.0));
charaButton->setScale(buttonScale);
buttonBase -= charaButton->getContentSize().height * buttonScale;
this->addChild(charaButton, 1);
}
auto equipButton = Sprite::create("btnEquip.png");
if (equipButton == nullptr)
{
problemLoading("'btnEquip.png'");
}
else
{
equipButton->setPosition(Vec2(sprite->getPosition().x + sprite->getContentSize().width * scaleRate / 2 + origin.x,
buttonBase + origin.y));
equipButton->setAnchorPoint(Vec2(1.0,1.0));
equipButton->setScale(buttonScale);
buttonBase -= equipButton->getContentSize().height * buttonScale;
this->addChild(equipButton, 1);
}
auto questButton = Sprite::create("btnQuest.png");
if (questButton == nullptr)
{
problemLoading("'btnQuest.png'");
}
else
{
auto scale = buttonBase / questButton->getContentSize().height;
questButton->setPosition(Vec2(sprite->getPosition().x + sprite->getContentSize().width * scaleRate / 2 + origin.x,
buttonBase + origin.y));
questButton->setAnchorPoint(Vec2(1.0,1.0));
questButton->setScale(scale);
this->addChild(questButton, 1);
}
例えば、「キャラ」のアイコンは「ホーム」のアイコンの下に並ぶように座標を計算して配置していますし、
その下の「装備」も「キャラ」の下に並ぶように座標を計算で算出しています。
「クエスト」のボタンは、上の3つのアイコンを並べた空きスペースにピッチリ収まるように、拡大率を算出して配置しています。
アイコンの拡大率も計算で算出しているので、機種や解像度が変化しても、アイコンの大きさが変わる程度で、大きくレイアウトは崩れないと思います。
思った以上に良い感じです。
「【COCOS2D-X】アイコン画像をピッチリ並べる」への1件のフィードバック