make layouts responsive to different screen sizes

also add CCSize::aspect convenience method
This commit is contained in:
HJfod 2023-02-13 19:49:51 +02:00
parent 5a1545ebc1
commit ea037a9ccb
6 changed files with 74 additions and 16 deletions

View file

@ -360,6 +360,13 @@ public:
inline bool equals(const CCSize& target) const {
return (fabs(this->width - target.width) < FLT_EPSILON) && (fabs(this->height - target.height) < FLT_EPSILON);
}
/**
* Get the aspect ratio of this CCSize
* @note Geode addition
*/
inline float aspect() const {
return this->width / this->height;
}
};
// alk cont

View file

@ -20,6 +20,8 @@ static void reorderButtons(Args... args) {
$register_ids(CreatorLayer) {
setIDSafe<CCSprite>(this, 0, "background");
auto winSize = CCDirector::get()->getWinSize();
if (auto menu = getChildOfType<CCMenu>(this, 0)) {
menu->setID("creator-buttons-menu");
@ -76,7 +78,12 @@ $register_ids(CreatorLayer) {
setIDSafe(menu, 2, "scores-button")
);
menu->setContentSize({ 470.f, 310.f });
if (winSize.width / winSize.height <= 5.1f / 3.f) {
menu->setContentSize({ winSize.width - 80.f, 310.f });
}
else {
menu->setContentSize({ winSize.width - 120.f, 310.f });
}
menu->setLayout(
RowLayout::create()
->setGap(12.f)

View file

@ -112,6 +112,45 @@ $register_ids(GJGarageLayer) {
->setAxisAlignment(AxisAlignment::Start)
);
this->addChild(bottomRightMenu);
// aspect ratio responsiveness
if (winSize.width / winSize.height <= 5.1f / 3.f) {
bottomLeftMenu->setPosition(15.f, 115.f);
bottomRightMenu->setPosition(winSize.width - 15.f, 135.f);
if (auto shardsMenu = this->getChildByID("shards-menu")) {
shardsMenu->setContentSize({ 110.f, 50.f });
shardsMenu->setPosition(
shardsMenu->getPosition() + ccp(50.f, 30.f)
);
shardsMenu->setLayout(
RowLayout::create()
->setAxisAlignment(AxisAlignment::Start)
);
}
}
if (winSize.width / winSize.height <= 4.1f / 3.f) {
bottomLeftMenu->setContentSize({ 90.f, 50.f });
bottomLeftMenu->setPosition(
15.f + 110.f / 2,
85.f
);
bottomLeftMenu->setLayout(
RowLayout::create()
->setAxisAlignment(AxisAlignment::Start)
);
bottomRightMenu->setContentSize({ 90.f, 50.f });
bottomRightMenu->setPosition(
winSize.width - 15.f - 110.f / 2,
85.f
);
bottomRightMenu->setLayout(
RowLayout::create()
->setAxisReverse(true)
->setAxisAlignment(AxisAlignment::End)
);
}
}
struct GJGarageLayerIDs : Modify<GJGarageLayerIDs, GJGarageLayer> {

View file

@ -78,15 +78,14 @@ $register_ids(LevelBrowserLayer) {
searchBtn,
clearBtn
);
searchMenu->setPositionX(
searchMenu->getPositionX() + 80.f / 2 -
searchBtn->getScaledContentSize().width / 2
);
searchMenu->setPositionY(
auto width = 45.f * winSize.aspect();
searchMenu->setPosition(
searchMenu->getPositionX() + width / 2 -
searchBtn->getScaledContentSize().width / 2,
searchMenu->getPositionY() - 80.f / 2 +
searchBtn->getScaledContentSize().height / 2
);
searchMenu->setContentSize({ 80.f, 80.f });
searchMenu->setContentSize({ width, 80.f });
searchMenu->updateLayout();
}
@ -113,6 +112,8 @@ $register_ids(LevelBrowserLayer) {
pageMenu->updateLayout();
}
auto navMenuWidth = 50.f * winSize.aspect();
if (auto prevPageBtn = setIDSafe(menu, 0, "prev-page-button")) {
auto navMenu = detachAndCreateMenu(
this,
@ -122,9 +123,9 @@ $register_ids(LevelBrowserLayer) {
prevPageBtn
);
prevPageBtn->setZOrder(-1);
navMenu->setContentSize({ 90.f, 40.f });
navMenu->setContentSize({ navMenuWidth, 40.f });
navMenu->setPositionX(
navMenu->getPositionX() + 90.f / 2 -
navMenu->getPositionX() + navMenuWidth / 2 -
prevPageBtn->getScaledContentSize().width / 2
);
navMenu->updateLayout();
@ -138,9 +139,9 @@ $register_ids(LevelBrowserLayer) {
->setAxisReverse(true)
->setAxisAlignment(AxisAlignment::End)
);
menu->setContentSize({ 90.f, 40.f });
menu->setContentSize({ navMenuWidth, 40.f });
menu->setPositionX(
winSize.width - 90.f / 2 - 5.f
winSize.width - navMenuWidth / 2 - 5.f
);
menu->updateLayout();
}
@ -148,7 +149,7 @@ $register_ids(LevelBrowserLayer) {
auto bottomMenu = CCMenu::create();
bottomMenu->setID("bottom-menu");
bottomMenu->setContentSize({ 375.f, 50.f });
bottomMenu->setContentSize({ 325.f + 20.f * winSize.aspect(), 50.f });
bottomMenu->setPosition(winSize.width / 2, 28.f);
bottomMenu->setZOrder(15);
bottomMenu->setLayout(RowLayout::create());

View file

@ -74,13 +74,13 @@ $register_ids(LevelInfoLayer) {
}
auto leftSideMenu = CCMenu::create();
leftSideMenu->setPosition(winSize / 2 + ccp(-254.f, 0.f));
leftSideMenu->setPosition(30.f, winSize.height / 2);
leftSideMenu->setLayout(ColumnLayout::create());
leftSideMenu->setID("left-side-menu");
leftSideMenu->setContentSize({ 50.f, 225.f });
this->addChild(leftSideMenu);
menu->setPosition(winSize / 2 + ccp(254.f, 0.f));
menu->setPosition(winSize.width - 30.f, winSize.height / 2);
for (auto child : CCArrayExt<CCNode>(menu->getChildren())) {
if (child->getPositionX() < 0.f) {

View file

@ -31,6 +31,7 @@ $register_ids(MenuLayer) {
else {
setIDSafe<CCLabelBMFont>(this, 0, "player-username");
}
// main menu
if (auto menu = getChildOfType<CCMenu>(this, 0)) {
menu->setID("main-menu");
@ -58,13 +59,14 @@ $register_ids(MenuLayer) {
// well with setLayout that deals with children in order
menu->swapChildIndices(playBtn, iconBtn);
menu->setContentSize({ 400.f, 65.f });
menu->setContentSize({ winSize.width - 140.f, 65.f });
menu->setLayout(
RowLayout::create()
->setGap(18.f)
->setCrossAxisOverflow(true)
);
}
// bottom menu
if (auto menu = getChildOfType<CCMenu>(this, 1)) {
menu->setID("bottom-menu");
@ -86,13 +88,14 @@ $register_ids(MenuLayer) {
menu->updateLayout();
}
menu->setContentSize({ 360.f, 65.f });
menu->setContentSize({ winSize.width - 220.f, 65.f });
menu->setLayout(
RowLayout::create()
->setGrowCrossAxis(true)
->setCrossAxisOverflow(false)
);
}
// social media menu
if (auto menu = getChildOfType<CCMenu>(this, 2)) {
menu->setID("social-media-menu");
@ -101,6 +104,7 @@ $register_ids(MenuLayer) {
setIDSafe(menu, 2, "twitter-button");
setIDSafe(menu, 3, "youtube-button");
}
// more games menu
if (auto menu = getChildOfType<CCMenu>(this, 3)) {
menu->setID("more-games-menu");