{"id":331,"date":"2017-11-01T21:37:43","date_gmt":"2017-11-01T10:37:43","guid":{"rendered":"https:\/\/ocias.com\/blog\/?p=331"},"modified":"2017-12-04T18:57:59","modified_gmt":"2017-12-04T07:57:59","slug":"simple-framework-beautiful-mobile-game-ui-unity","status":"publish","type":"post","link":"https:\/\/ocias.com\/blog\/simple-framework-beautiful-mobile-game-ui-unity\/","title":{"rendered":"Simple Framework for Beautiful Mobile Game UI in Unity"},"content":{"rendered":"

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.<\/p>\n

What you need is a framework that allows you to use a single design across all devices.<\/p>\n

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.<\/p>\n

\"Vertical<\/a><\/p>\n

The most professional solution is to make a bespoke design for every key device type. However, I work mostly independently and don\u2019t 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.<\/p>\n

My Mobile Game UI Solution<\/h2>\n

This framework is composed of four elements:<\/p>\n

\"a<\/p>\n

    \n
  1. The fundamental construction of your screen is done at 360\u00d7640 resolution. While this doesn\u2019t line up to an existing Apple device point resolution, it has a number of benefits:\n