UI Scaling in Studio

Hi TS,

I ran into a issue recently where on a smaller iPhone, the UI that was setup looked awkward and not the best. It lead me to researching about scaling for UI in Studio.

When developing for different screen sizes and aspect ratios, what is the best course of action for designing the UI? Unity utilizes a Canvas Scaler to scale UI objects based on the resolution of the screen. Is there anything like that for Studio? Are there plans to create something that will scale UI?

Thanks,
Leonard Wedderburn

Hey Leonard,

The go-to way to do this in Studio right now is to use percentages in your UI sizes. So instead of 100 units it would be 100% of the screen width for example.

Here’s a screenshot from the Putt Putt Paradise Sample Project.

What about buttons with textures and UI text, does it get affected the same way by percentages?

Text scaling might require a little more work as you’ll have to create a component that determines the text size based on the screen width or something similar. Textures should be no problem with percentages.

Interesting okay, so for example, if I have a texture that is 150x50 px. When that is imported into a project, is it going to be the same size at 100%x100% if I set that for height and width or will it be visually smaller? Does it matter if it is a PNG or SVG? What is the best content fit setting for UI?

SVG and PNG will behave the same right now as they’re both treated like rasterized images. 100% is relative to the parent container and has no relation to the size of the image.