How do you make responsive mobile games that take safe areas into account and scale game world appropriately?

Unity Engine
, , , , ,
1

For the first time I really want to make a mobile game (iOs, Android, Tablets) and I stuck in the beginning. I have to solve an issue with responsiveness both in UI and in game

Problem:
Canvas lives in canvas-space with anchors and all this responsive stuff, GameObjects live in 2D/3D world and rely on position in world-space. I want to make my game look good without any clippings and stretches on variety of different mobile platforms. These platforms have different aspect-ratios, sometimes it’s more square-ish when it comes to tablets and sometimes it’s quite tall and aspect ratio varies from 4:3 to 16:9 (and some phones are even taller like iPhone 15 which AR is 19.5:9). I can fix canvas target resolution, make my UI controls anchored to some driving points, make sure they not overlap on reasonable aspect ratios, and adopt their size with respect to current device aspect ratio, but I don’t want to write gameplay logic and game objects using UI elements in 2D game which forces to use anchors instead of good old 3D positions. The issue is that Canvas lives in their own space, so that to map borders on my controls to world-point I have to do a lot of work with setting up canvas transforms (to represent edges of controls), map them onto world space via Camera screen point to ray APIs, it seems like quite a lot of work. I also had to write a terrible Sprite scaler that tries to scale game background image (done with Sprite Renderer) keeping its original aspect ratio and keeping some “anchor” points on this image to be snapped to world points so that any device has fixed left and right point of this background sprite the same in relation to borders (UI control and screen borders). It does the job quite bad because I can’t simply control rect of the sprite (like in in-editor Rect tool) instead I pondering on how much scale should I set to met these conditions. I also didn’t yet mention device safe zones in relation to which I should do all this math. Another issue is that I want my characters to move the same amount of space on each device, no matter what aspect ratio of the device screen is. I will quickly get lost in all these factors and multipliers to make character scaled correctly in relation to background size.
With that being said, I feel that it should not be that complex task because the engine is targeting mobile devices as well and a lot of mobile games are already made on it out there. What approach do you use when you need your UI to be boundaries of the game world and how do you fit it into safe area?
I also thought about making my mini UI-framework based on GameObjects so that I can zoom in/out my camera to clip it between needed bounds

3

There’s no real “one way to rule them all.”

You’re right that for 2D gameplay you almost certainly want SpriteRenderers seen by an ortho camera. That also lets you trivially do physics later.

Ortho camera size controls how much vertical can be seen.

If you care about how much horizontal is seen, then you need to back out the Screen.width/height and use that.

Cinemachine can go a long way to helping you with camera stuff in various ways.

As for UI and anchoring, it’s all anchoring and parenting as much as possible, and at the worst case, separate hierarchies for landscape / portrait, for example.

Sometimes an aspect ratio fitter on various parts of the sub-hierarchy can be very powerful, such as anchoring a small square to put your scores in box in the upper right corner that never exceeds half the width or half the height, as an example.

You also want to NEVER write code to compute and manipulate UI positions. The only way to even have a chance in that regard is to perhaps copy UI positions from known extra anchors you place in your canvas hierarchy, such as copying a corner of a safe rect into another moving panel, or lerping from one to the other.

Here’s more reading:

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

4

This works great for UGUI