Unity UI Why does my UI look different on different computers?

I think I have a flawed understanding of multiple things here, so please correct my assumptions.

I want a UI that looks the same on all computers, so what I did was create a player that defaults to a specific resolution and doesn't pop up the dialog when you start the game to give you the option to change it:



Then, when I develop, I set the aspect ratio to be Standalone 1280x720. When I play my game or edit it, everything looks fine. This is how it looks:



But then I gave the game to a beta tester, and when he plays, it looks like this:


Given that the game should be running at 1280x720 (major assumption), why would it look different on our two different machines? These UI elements are on a Screen Space - Overlay canvas.

Also, what's the best way to test and fix this issue so I don't need players to tell me it looks bad? If I change the aspect ratio in the game view, I can make it look pretty funky, but none of them look like this player's screen, so I worry if I fix it for all the aspect ratios, it may look broke on his machine still.

 

Don't hard-code for a specific resolution. You can't count on it being 1280x720...if that resolution doesn't exist on a machine, trying to force it won't work. The UI should work on any resolution and aspect ratio.

--Eric

 

OK so what concept do I need to learn about to achieve this? Is it all about anchors?

 

Pretty much.

--Eric

 

What's the best way to know how it'll look on other screens?

At the top-left of the game view, you can change the resolution of the game view. Change the drop-down that says "Free Aspect" to different aspect ratios and screen sizes. You can also add your own custom resolutions.

For a more automatic method, there's a nice asset called Multi Device Preview & Gallery. https://assetstore.unity.com/packages/tools/utilities/multi-device-preview-gallery-82015

Canvas Scaler

Beyond anchors, it is also important to know that the Canvas game object has a lot of useful scaling modes on it. You can set it so you have a target resolution, and it'll adjust to other sizes. This works especially well when the aspect ratio is the same. Also, and I wish I'd known about this before, there is an option to expand and shrink your UI elements.

The best reference I could find on short notice is: https://forum.unity.com/threads/und...n-match-mode-and-reference-resolution.524194/

Another Note on Aspect Ratios

What is an aspect ratio (skip this if you know): The aspect ratio of a display is the ratio of the width to the height. Everything used to be 4:3. 16:9 is very popular today (with so-called "short screens", er, cough, "wide screens"). As pixels are square on modern computers, you can take a resolution's width and height to get the aspect ratio; ex. 1280/720 = 1.7̅ = 16:9, or you might just use an aspect ratio calculator.

With this said, look at your resolution and presentation screenshot. While not ideal if you are developing for devices that don't have an identical resolution, you could turn off all the 'supported aspect ratios' except the one that you want. I don't know exactly what Unity does on a device that doesn't support your desired aspect ratio, though, but if you are targeting Mac and Windows (not Windows mobile), I suspect the graphics cards will support common, and especially "historical" sizes.


Cheers,
Clinton

 

Two more things that may prove useful:

• How to create UI for all Resolutions
• Auto Letterbox Asset

 

I liked that first link a lot. I feel like I got this working already by taking every rect transform, and putting the anchors on the 4 corners of the currently selected element. As far as I can tell, this looks fine. I can't tell what trouble I'll get myself into by using Constant Pixel Size on the canvas.