Responsive screen

Audio and Graphics
#1

Hi,

Coming back from old days to discover Corona is now Solar2D.
Neat!

Now to tackle the one problem that kept me from leaving behind native frameworks previously:

Is there currently a way to have the project canvas responsively fill all available screen regardless of it’s aspect ratio?

What I mean is not:

  • a fixed aspect ratio that is cropped, scaled, zoomed etc.
  • hard coding aspect rations/dimensions to account for various screen types,
  • tricks and workarounds,

What I mean is:

  • similarly to a responsive website or native Swift; if you specify that a button is sized 100x30 and 10px from the bottom, and 10 px from the right edge of the screen, then it doesn’t matter if the screen is 1024x768 or 50x100000, the button will still be in the bottom right corner sized 100x30.

Is that currently achievable? Thank you!

Best,

#2

You could not specify a canvas size and then you will be pixel perfect to the device. You know where top left is and what the width and height is from the APIs. So you can easily position elements based on those values.

I can’t think of a game situation where you would want this as a 100x30 button would be large on crappy devices and tiny on HD+ devices.

#3

Like @anon63346430 already hinted at, you have access to things like https://docs.coronalabs.com/api/library/display/screenOriginX.html (same for Y), plus for safe areas. You can use display API to dynamically calculate all edges of the screen and then position display objects relative to them. You can also handle the display object size scaling dynamically via display API too, if you want.

#4

You could not specify a canvas size and then you will be pixel perfect to the device.

That’s exactly what I meant, thanks!

I can’t think of a game situation where you would want this as a 100x30 button would be large on crappy devices and tiny on HD+ devices.

Agreed, this was a completely random example. :sweat_smile:

#5

Great; I figured you could position stuff this way but wasn’t sure if you could skip fixed canvas size/aspect. Only want to work with whatever screen I happen to be displayed on.
Appears this is possible, thanks!

#6

Thank you for the answers – appears the way to go is skip canvas size and base positions on actual screen. Great!

I wonder though why isn’t this the default workflow; as in most projects seem to have a fixed canvas which they then crop or zoom or conditionally resize. Why?? Seems way more practical to just glue things to sides; centers and other objects and be safe no matter the device…

#7

It isn’t done by default because there are also instances when you want UI to stick relative to the user defined content area. Also, you want certain display objects to go past safe areas, to the physical edges of the screens, but you want to keep important UI elements always visible, so they can’t go behind the rounded corners or notches, etc.

Sure, there could be a direct API call for “screen right edge x” and “screen bottom edge y”, but both of those take only a single simple math operation so figure out, so there’s been no need to bloat the engine itself with APIs for those values.

#8

Games use a fixed canvas size for many reasons. Two major ones that spring to mind are speed and look.

Personally, I want my UI to look the same and be positioned the same irrespective of device resolution so I align from the edges. I also don’t want the UI to be tiny on QHD devices.

Rendering at QHD asks many times more of the GPU than rendering at say 540x960.

1 Like