A friend and I are developing a mobile game together, and we noticed that the sizes of our UI canvases are different, even though we are working from the same source code and project (We are collaborating with git). On my screen, the canvas is significantly larger, and the UI elements placed on it are much smaller in the game view compared to her’s, where they are much bigger. They also show up in different positions on the screen.
The only difference I can think of is that my side is set up to test on android, and hers is set up for iPhone. She tried switching to android development, but the canvas size didn’t change, so I’m not sure if that is the issue. Is there something we are missing in order to get the same canvas ratio?
If it’s a screen space canvas, the size of the canvas is always the resolution of the screen/game viewport. The difference is most likely due to you and your friend having different screen resolutions.
You’ll want to both get very familiar with the concepts in this article in order to layout your UI properly: Basic Layout | Unity UI | 1.0.0
It can be very fiddly but it is super-powerful once you reach comfort with the UI.
Building upon Praetor’s great post above, let me suggest this approach:
make a quick first draft of your UI.
in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions)
see what happens to your UI in this new shape window
iterate and fix your anchors and scalings and whatnot
Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) always use Scale with Screen Size and Match Width Or Height, with 100% height because it seems the most useful. I also NEVER change the 800x600, which lets me copy/paste prefabs between any of my projects trivially.
