How do I scale properly?

Hello!

I'm making a game for android smartphone devices,

I've been testing and for 16:9 devices the game looks very good,

as the window size on my project is 486x864 (9:16).

The problem is when I try to play on smaller scales like 4:3 or 3:2.

(I'm currently using scale outer)

I've made an image of how my game looks now and how I want it to be:

So, basically the 2 screens on the left represents the present.

On a 16:9 resolution like 360x640 the game fills the screen completely (green color represents the game).

But on a smaller resolution like 320x480 the game scales to fit the screen which makes 2 lateral bars to appear.

What I would like it to be is like the image on the right,

the game fills the entire screen and the overflow is just not displayed.

Is this possible to do?

That would be scale inner if I am not mistaken.

Scale inner would be fine if the game would be fixed on top,

but it scales like from the center, so the top part of the game gets off-screen when scalling down.

Also all layers get messy, the UI all over the place, characters on the sky and ground mixed with the interface.

I don't know if it is because of the different parallax or something..

martinx09

Ashley wrote a tutorial for this: https://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes

and I have seen templates that show rectangles for various resolutions that you can use as a guide to know where safe zones are that will always be on screen, and where you have to make sure you have enough background to cover unusual screen sizes.

It is a common problem. It is up to you to decide how you want to handle it. It does sound like you want to do scale inner. Parallax can be an issue - UI layers should be set to 0,0 and you have to make sure import things are always visible on every resolution you want to support (always in the safe zone). You can use the Anchor behavior, or you can make a "camera" sprite with the scroll to behavior, or various other techniques to keep the desired parts of your game on screen.

I saw that tutorial, already, but still can't make it work as I want to.

I already have a scroll to behaviour on my character so that could be an issue as well?

Edit:

I changed the Y value for parallax on all layers and now it looks fine.

But I would still like the game to be fixed on the top part of the screen,

so that just the bottom part of the game would be hidden on a smaller device.

How can I achieve that?

How about taking the half of the users viewport, and scroll that distance down from the top of the layout.

And how can I scroll the distance down?

Edit:

I tried with scroll to Y and scroll to Object (with an object on the top of the screen),

both seem to do nothing.

Any other idea to scale from the top?

Try that again, but enable unbound scrolling.

AutoScaling.capx

We use dynamic UI rescaling using Viewport.

It is a lot of work, but it works quite nicely. You could conceivably do it only when they resize the screen, but I have it running every tick on my client for now.

Note: This disables the inherent browser zoom though.

Try that again, but enable unbound scrolling.

Tried that too,

same result, doesn't seem to move at all.

Tried with on start layout -> scroll Y to 0 then to -500 and 500.

Same result with all of them.