mirror of
https://github.com/geode-sdk/geode.git
synced 2025-02-17 00:30:26 -05:00
make layouts responsive to different screen sizes
also add CCSize::aspect convenience method
This commit is contained in:
parent
5a1545ebc1
commit
ea037a9ccb
6 changed files with 74 additions and 16 deletions
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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> {
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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");
|
||||
|
|
Loading…
Reference in a new issue