Hi everyone!
I’d like to know how you handle the newer aspect ratios for Android devices. I’m talking about those higher than 16:9, ranging to 22:9 for taller phones. If you could share your config.lua files, I’d be more than happy.
Thank you in advance.
I have 2 approaches to this problem.
I will use Solar2D’s default configuration, and I will design the game to suit all 3 popular ratios (tablet 4:3, pc 16:9, phone 21:9)
And the game will be designed in a safe area with all 3 screen ratios.
You can refer to Solar2D’s Corona Cannon sample project .
My approach is to use a standard 16:9 for my game’s main canvas. This allows me to get a consistent visual output for the core gameplay.
What I do is to use some simple math to calculate the difference on x and y axis between my hardcoded 16:9 canvas and the actual screen dimensions. I use the difference to add to the coordinates of UI elements that are along the edges of the screen so that they can be pushed outward depending on the device without any special code being required.
Of course, for background images, i use a safely large size which will cover all aspect ratios.
For computing the difference in my coordinate bounds and those of the actual device, I have written a crude but effective script which has global variables that I can summon anywhere in the code to get the x and y difference values.
I’ll add that script here once I’m back on my pc. Hope it can help you or anyone else
UPDATE:
So, after checking, I use letterbox scaling which I find is easiest to maintain consistency in gameplay but this really depends on the kind of game-- you may feel quite comfortable lettering Solar2d scale things dynamically but that just doesn’t work for us. This is how I set things up in config.lua:
content =
{
width = 750,
height = 1334,
fps = 60,
shaderPrecision = "lowp",
scale = "letterbox",
},
I have also attached the screenCompensation script. It should automatically compute X and Y differences relative to your fixed letterbox and will also account for whether your app is set to run in portrait or landscape mode. It will automatically update the values whenever the screen is resized-- I think we had done this because the status bar can appear/disappear dynamically on Android so the values will need to be updated.
All that is needed is for the getXCompensation() and getYCompensation() functions to be called wherever you need to apply the difference to any display object.
screenCompensation.lua (4.4 KB)
Can you pls share details how do you place background image in the first solution? I want to do the same but my background image stretches (that I want to avoid) to fit screen size if I use
local background = display.newImageRect( "background.jpeg", display.actualContentWidth, display.actualContentHeight )
background.anchorX = 0
background.anchorY = 0
background.x = 0 + display.screenOriginX
background.y = 0 + display.screenOriginY```
My aim is to use always top left part of image as a background for any screen size.
I’m sorry for my late answer. I’ve been investigating and implementing the solutions you recommended. I wanted to make sure before I post.
Thank you both @Kan98 and @famousdoggstudios for your suggestions. After trying the solutions you suggested, I decided to go with the Corona Cannon solution. Hope this is the solution I’ve been looking for. Here is the final code. (Implemented this into the open source version of my game as well.)
local widthStarting, heightStarting = 720, 1280
local pixelWidth, pixelHeight = display.pixelWidth, display.pixelHeight
local scale = math.max(widthStarting / pixelWidth, heightStarting / pixelHeight)
local widthResolution, heightResolution = pixelWidth * scale, pixelHeight * scale
application =
{
content =
{
width = widthResolution,
height = heightResolution,
fps = 60,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3,
},
},
}