Simple Framework for Beautiful Mobile Game UI in Unity

Screen design for mobile game UI can be very daunting. There is a very broad range of device resolutions, screen sizes and aspect ratios to accomodate. It’s not viable for independent artists or small teams to design a new visual layout for every screen.

What you need is a framework that allows you to use a single design across all devices.

In the past, you could attach UI elements to screen borders, just specify a vertical field of view, then aim for 9:16 and automatically allow more vision on the sides on wider devices like iPads. However, with the rise of taller screens like the iPhone X, now that you face aspect ratios narrower than 9:16, meaning this approach is no longer viable. The vertical field of view will crop key elements out, and attaching UI elements to screen corners puts them far out of reach or in conflict with system gestures.

The most professional solution is to make a bespoke design for every key device type. However, I work mostly independently and don’t have time or money to multiply my workload that way. Instead, I’ve assembled a little design framework that elegantly accommodates a screen of any aspect ratio.

My Mobile Game UI Solution

This framework is composed of four elements:

1. The fundamental construction of your screen is done at 360×640 resolution. While this doesn’t line up to an existing Apple device point resolution, it has a number of benefits:
   • Easily divisible, including by 2, 3, 4, 5 and 8, allowing for elegant construction grids.
   • Exactly one third of Full HD (1920×1080) on each axis, which is the native pixel resolution of iPhone 6+/7+/8+ and a common Android device resolution.
   • The low resolution is very human-friendly for rapidly tweaking and repositioning elements.
   • Considering the pixels per centimetre of modern devices, pixel-aligned imagery is not a large concern.
2. A Unity canvas configuration that scales your UI to always fit on screen and behave consistently.
   • Canvas Scaler component set to “Scale with Screen Size” to resolution 360×640.
   • “Screen Match Mode” set to “Expand”, meaning differences in aspect result in space being added, not removed.
   • All UI elements are placed inside an empty 360×640 gameobject on the canvas. Combined with the scaler settings, this allows us to not care about the anchors or pivots of our objects. Any UI element placed within this 9×16 rectangle will stay in their position – screen aspect changes will only add space on the outside.
3. A canvas grid gizmo script that overlays your desired grid in the viewport, so you can match your design closely.
4. A camera script that takes control of your field of view, making it driven by the vertical angle when the screen is wider than 9:16, and swapping to horizontal angle when it’s narrower. This makes sure the viewport always expands out from your desired aspect ratio, meaning the visual behaviour matches the UI

Additionally, I have included a sample project, if you would like to investigate how it works.

Download

You can get the framework from github, or download the unitypackage.

I hope this removes some headaches from your process, and don’t hesitate to drop me a line if you end up using it, or if you run into any problems with it.