How to scale your game, so it will be the same on every mobile device

Hello everyone,

Iam currently working on my first app. A big problem that I encountered is, that my game works perfect on IPhone, but whenever I switch to IPhone XS or IPad all my Buttons and Borders are out of place. I know this topic got questioned a lot and I was trying for the past 2 days to find a solution to this. But unfortunatly I didnt.
I managed to scale my UI (Buttons, Scoretext, ...) with my Screen, however my borders (left, right and bottom) are always placed wrong. Simply reading the Screen.width and height and replacing the borders wont work, because it will influence the gameplay (size between borders are bigger on IPad than on IPhone, but the movespeed of my player object will be the same). How am I able to fix this? I just cant figure out how to make this. Would love, if someone could bring me on the right path .

PS: sorry for my bad english, iam german .

Just so you get a feeling for what it currently looks like:

 

Simply put the is no magic bullet for what you ask. And I think you already answered to this yourself; you can modify UI to fit different screen aspect ratios, but your static level won't change somehow magically.

You'll have to either:
A . create different level versions for different aspect ratios
B. show different amount of level content on different aspect ratios.
C. Add empty space / art around your level (16:9 vertical layout on 4:3 screen). Think letterboxing.

But how these work is debatable. For some puzzle game it might be easy, but for some action / reaction based game changing AR might break the gameplay. IMO Archero is good example of horrible design choices... on phones it has vertical tall game field, but on tablets they simply filled the screen based on the width of the level, practically making it impossible to see the enemies.

 

I think there are two choices:
1. You will have to change the speed of your player depending upon the dimension. So wider screen will move the player faster than narrow screen. This will however may produce a different player experience on different device.
2. Scale the game dimension proportionately depending upon the device screen. Proportional adjustment will need to show black areas on the up/down or left/right of the game. So a twice bigger screen will show the balls twice size. While half size screen will show the balls half the normal size.

 

That's can help you:
https://forum.unity.com/threads/how-to-determine-scale-to-increase-sprite-width-to-screen-width.406218/

my code:

Code (CSharp):

1.  private const float FULLHD_LEVEL_WIDTH = 5.625f;
2.  
3.     private void Start()
4.     {
5.         // get the screen height & width in world space units
6.         float worldScreenHeight = Camera.main.orthographicSize * 2.0f;
7.         float worldScreenWidth = (worldScreenHeight / Screen.height) * Screen.width;
8.  
9.         Debug.Log($"worldScreenWidth {worldScreenWidth}");
10.  
11.         Vector2 scaleResult = Vector2.one;
12.         scaleResult.x = worldScreenWidth / FULLHD_LEVEL_WIDTH;
13.  
14.         this.transform.localScale = scaleResult;
15.  
16.         Debug.Log($"Scale {scaleResult}");
17.     }
18. }

 

As far as UI consistency, here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

https://forum.unity.com/threads/inc...size-between-two-people.1130146/#post-7261747

https://forum.unity.com/threads/game-ui-button-size-problem.1142650/#post-7337383