Search

Designing UI For Any Aspect Ratio

Updated: Aug 22, 2019

I have long struggled with Unity's UI system. It's been designed to make it easy to support multiple resolutions simultaneously, through the use of anchors when placing elements. For instance, if you want to place a button or a text element, you can select where to put it relative to the screen's center, edge, or corner. That way, if the resolution, or, more critically, the aspect ratio, changes, the UI will reposition itself to keep in relatively the same place. The obvious advantage here is that nothing will ever get "cut off" if the game is played on a different sized screen than the one it was built on. This simple stuff is documented all over the place and I'm not going to go into it any further here.


However, this only applies to buttons and other "floating" elements. (3D cameras are usually fine too, as they will just display a slightly larger or smaller field of view as the aspect ratio changes.) What about menu backgrounds or other 2D images? Unity's Canvas object (the parent of all UI elements) has a property called "Match Width or Height" which can help in those situations. Say you're designing a game at 1920x1080 resolution, which is a 16:9 aspect ratio. If you change the editor setting to preview the game at 5:4 instead, Unity has two options on how to achieve this: it can either switch to 1920x1536 (matching the width) or to 1350x1080 (matching the height). (It's actually more complicated than this, and Unity automatically downscales stuff immensely if you work in exclusively ratio and not pixel-resolution mode, but this is the main gist.)


This very not-to-scale image shows the two options, and also demonstrates the problem. When converting from 16:9 to 5:4, you'll either lose a great deal of content from each side, or gain quite a bit on the top and bottom. Losing content is never good, but the right case isn't preferable either since it will by default add ugly black bars to the empty space at the top and bottom, or even worse, show the skybox through it. So what's the fix? Simple, actually, if not immediately intuitive: you need to create a background image that's the larger of the two sizes, but make sure that all of your relevant content fits within the smaller.


Here's a concrete example: I've set up a project at 1920x1080, which again is 16:9. I set the Canvas to "Match Width", so that changing to any other ratio will convert by adjusting the height of the screen, but not the width. Now, to create my background image, I take into account my 1920x1080 and "Match Width" settings, and do the math to discover that my background image should be 1920x1536 to cover the default 16:9, the smallest supported 5:4, and automatically all the ones in between. However, as I create my background, I remember that 1920x1080 is the default, so I make the relevant part of the image fit within those dimensions. The finished result gets implemented like this:

On the left, you see the full image, which is also what it looks like displayed at 5:4. On the right, what you see if you switch to 16:9. Now, the orange stripes are hardly better than the default black ones, but a real UI artist would be able to add flashing lights or knobs or the like befitting the TV monitor look: details that add to the image when you see them but has no impact on the game if you don't. It looks good no matter the screen size.


So what does all this have to do with multiplayer splitscreen? Well, imagine trying to break up the screen into a variable number of equally-sized viewports...when the screen could be any size or shape whatsoever! ...But you'll just have to wait until next time for the details on that.