A simple Mobile Game UI Framework

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.

Vertical FOV doesn't work well with tall screens like iPhone X

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:

a 360 by 640 pixel canvas overlaid with a 5 pixel grid

  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.

The example UI I created to go with the framework

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.

2 thoughts on “Simple Framework for Beautiful Mobile Game UI in Unity”

  1. Hey mate,
    Nice work on the package, definitely interested in adapting and rolling a version of it my own development toolset.

    I also noticed that there is an infinite loop that is created when the grid size is set to zero or less in the inspector that I thought you would want to know can occur.

    Keep up the good work 🙂

Leave a Reply

Your email address will not be published.