Aspect Ratio Scaling — Mobile and Tablets

With mobile and tablet screen sizes and aspects ever-evolving, building game UI that looks great on everything is an ever-evolving challenge. There are a number of different ways to solve this, here’s a quick look at our simplistic approach to creating aspect agnostic UI for mobile games.

We design our UI and author our games at a 16:9 aspect. The screen space is set to expand horizontally to cater for ratios wider than the base aspect. The space will expand vertically for aspects that are taller. The resolution of the various devices doesn’t matter as the UI will have the same proportions regardless of different pixel sizes/densities.

The 16:9 space serves as a safe area, with varying aspects only adding space on the X or the Y axis. The safe area is never reduced, so layouts only need to adapt to accommodate either additional horizontal or additional vertical space.

UI elements are handled accordingly to accommodate the change in screen space. They can be stretched/expanded to occupy more space, distributed positionally over the extra space or fixed in the original position and simply add the extra space to the horizontal or vertical edges. For items such as scrollable lists or carousels etc, you can expand the container to benefit from additional screen space.

Below shows the settings we use on the Canvas Scaler in Unity to achieve the desired screen scaling set-up.

For screens such as the iPhone X with a notch and Home Indicator, we define a safe area for all UI elements to avoid interference with these features. Elements that are intended to sit against the edge of the screen (such as footer tabs) are extended in size, beyond the safe area.

Jamie S