Improved scaling relative to the screen aspect ratio for various GUI components.

This commit is contained in:
Leon Styhre 2021-07-02 17:57:52 +02:00
parent 6627899f88
commit 6178830504
5 changed files with 36 additions and 25 deletions

View file

@ -88,11 +88,17 @@ GuiComplexTextEditPopup::GuiComplexTextEditPopup(
if (multiLine)
textHeight *= 6;
mText->setSize(0, textHeight);
mInfoString2->setSize(Renderer::getScreenWidth() * 0.70f, mInfoString2->getFont()->getHeight());
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
// regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float infoWidth = Math::clamp(0.70f * aspectValue, 0.60f, 0.85f) * Renderer::getScreenWidth();
float windowWidth = Math::clamp(0.75f * aspectValue, 0.65f, 0.90f) * Renderer::getScreenWidth();
setSize(Renderer::getScreenWidth() * 0.75f, mTitle->getFont()->getHeight() +
textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f);
mText->setSize(0, textHeight);
mInfoString2->setSize(infoWidth, mInfoString2->getFont()->getHeight());
setSize(windowWidth, mTitle->getFont()->getHeight() + textHeight +
mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f);
setPosition((Renderer::getScreenWidth() - mSize.x()) / 2,
(Renderer::getScreenHeight() - mSize.y()) / 2);
mText->startEditing();

View file

@ -77,10 +77,10 @@ GuiDetectDevice::GuiDetectDevice(
Font::get(FONT_SIZE_MEDIUM), 0xFFFFFFFF, ALIGN_CENTER);
mGrid.setEntry(mDeviceHeld, Vector2i(0, 4), false, true);
// For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
// width rather than the 60% allowed for wider displays.
float width = Renderer::getScreenWidth() *
((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
// regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth();
setSize(width, Renderer::getScreenHeight() * 0.5f);
setPosition((Renderer::getScreenWidth() - mSize.x()) / 2,

View file

@ -214,10 +214,10 @@ GuiInputConfig::GuiInputConfig(
mButtonGrid = makeButtonGrid(mWindow, buttons);
mGrid.setEntry(mButtonGrid, Vector2i(0, 6), true, false);
// For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
// width rather than the 60% allowed for wider displays.
float width = Renderer::getScreenWidth() *
((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
// regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth();
setSize(width, Renderer::getScreenHeight() * 0.75f);
setPosition((Renderer::getScreenWidth() - mSize.x()) / 2.0f,

View file

@ -27,11 +27,14 @@ GuiMsgBox::GuiMsgBox(Window* window, const HelpStyle& helpstyle, const std::stri
mDisableBackButton(disableBackButton),
mDeleteOnButtonPress(deleteOnButtonPress)
{
// For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
// width rather than the 60% allowed for wider displays.
float width = Renderer::getScreenWidth() *
((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
float minWidth = Renderer::getScreenWidth() * 0.3f;
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
// regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) *
Renderer::getScreenWidth());
float minWidth = floorf(Math::clamp(0.30f * aspectValue, 0.10f, 0.50f) *
Renderer::getScreenWidth());
mMsg = std::make_shared<TextComponent>(mWindow, text, Font::get(FONT_SIZE_MEDIUM),
0x777777FF, ALIGN_CENTER);
@ -95,11 +98,13 @@ void GuiMsgBox::changeText(const std::string& newText)
mMsg->setText(newText);
mMsg->setSize(mMsg->getFont()->sizeText(newText));
// For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
// width rather than the 60% allowed for wider displays.
float width = Renderer::getScreenWidth() *
((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
// Adjust the width depending on the aspect ratio of the screen, to make the screen look
// somewhat coherent regardless of screen type. The 1.778 aspect ratio value is the 16:9
// reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) *
Renderer::getScreenWidth());
float minWidth = Renderer::getScreenWidth() * 0.3f;
// Decide final width.

View file

@ -62,10 +62,10 @@ GuiTextEditPopup::GuiTextEditPopup(
textHeight *= 6;
mText->setSize(0, textHeight);
// For narrower displays (e.g. in 4:3 ratio), allow the window to fill 70% of the screen
// width rather than the 50% allowed for wider displays.
float width = Renderer::getScreenWidth() *
((Renderer::getScreenAspectRatio() < 1.4f) ? 0.7f : 0.5f);
// Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
// regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
float width = Math::clamp(0.50f * aspectValue, 0.40f, 0.70f) * Renderer::getScreenWidth();
setSize(width, mTitle->getFont()->getHeight() +
textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() / 2);