とりあえず、アイコンをピッチリ並べてみました。

ポイントは、座標や拡大サイズを全て計算で算出すること。

こうしないと、機種が変わったときに、確実にレイアウトが崩れます。

    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つのアイコンを並べた空きスペースにピッチリ収まるように、拡大率を算出して配置しています。

アイコンの拡大率も計算で算出しているので、機種や解像度が変化しても、アイコンの大きさが変わる程度で、大きくレイアウトは崩れないと思います。

思った以上に良い感じです。

画像を配置するのは簡単なんですが、

その配置位置を調整するのがめちゃくちゃ大変だったりします。

    auto Button = Sprite::create("btnChara.png");
    if (Button == nullptr)
    {
        problemLoading("'btnChara.png'");
    }
    else
    {
        Button->setPosition(Vec2(sprite->getPosition().x + sprite->getContentSize().width * scaleRate / 2 + origin.x, visibleSize.height + origin.y));
        Button->setAnchorPoint(Vec2(1.0,1.0));
        Button->setScale(3.0);
        this->addChild(Button, 1);
    }

まず、setAnchorPoint()についてですが、

これは画像位置の基準となるポイントを設定する関数ですね。

デフォルトでは、アンカーポイントは中心(0.5, 0.5)の位置にあり、これを左下にするには(0, 0)、右上にするには(1, 1)と設定します。

今回は画像の右上を、背景の右上に合わせたいので、(1.0 , 1.0)、すなわち、画像のアンカーポイントを右上に設定しています。

次に背景画像の右上の座標を調べる必要があるのですが、

getContentSize()でspriteのサイズがわかりますが、

これはsetScale()で拡大する前の値になっていました。

なので、getContentSize()の値に拡大率を計算式に入れることで、見事に位置が合いました。

あとは、ちょうど良い感じで画像の大きさを調整。

もう少し大きくしても良いかな？

用意したアイコンを全部配置して、バランスを取ってみたいと思います。