Ui Canvas Resolution for phone and tablet

Hi everyone,

Here I am again posting a new question or at least a question I had already asked. But with no solution solved…

Today, given that the Unity3D platform, to evolve, maybe someone will be able to help me.
This is one of the only things I still can’t understand after several years of practicing with Unity3D. This is how interfaces work and resolution!

My question is simple, after creating an interface Ui with “Canvas”, at the right size in the “Game” unit window, for example two joysticks on each side of the screen, a menu button at the top left of the screen, a score at the top right of the screen, then information window interactions are displayed in the center of the screen when the player moves in the game. So far all are displayed correctly!

My question is why when I test my game, on two different devices. That is to say, when I “build run” the game on a Samsung galaxy phone, it is different from that of the “Game” window of unity and why when I “build” it on a Samsung Tab A7 tablet my interface is different from that of the phone and also that of the “Game” window of unity!?

It makes me uncomfortable that I can’t understand how displays work with Unity! No matter how hard I try to learn, I can’t! I modify according to the available settings, but it does not work!

I would like my interface that is in the unity “game” or “simulator” window to be the same on devices when I “build run” my game

Is there someone who can help me understand how it works so that the interfaces don’t change when I test on different devices? I’m not going to buy all the devices, existing on the market, to be able to test the interface of my game?

Thank you in advance for your time and answer!

Thank you so much for taking the time to help me. I have read your explanations carefully and I have followed your explanations to the letter. I also have to read the Unity documentation you sent me.

Indeed, I also have like you a misunderstanding about the UI canvas system of Unity for my game development. I hope to understand better with your help!

Only I have followed your explanations, but I do not have a big change…

My Canvas was well programmed until point 5 on the anchor points of your explanations!

Here is the implementation on your advice
I can not publish all the images to show you step by step the steps of writing here! So I show you the result that I have in relation to your advice from the 8 to 10

So I used “Anchors presets” for the top interface. I then also select “Shift: Also set pivot” and “Alt: Also set position” My “interfaceGame” displays in “Rect Transform” 0,0,0… I reposition “InterfaceGame” not in relation to the “Game” window (1920x1080Landscape) of unity and then test on my phone… The interface is well positioned but not like on the Unity interface and I will see if on my tablet if the display is different or not…

Thank you in advance for your feedback…

Hello Giannigiardinelli. This is an issue that I faced a lot when I started my Game Dev Journey. But the Solution to this is way easier and simple than it looks.

You probably know what a Resolution is Right? It is the size of our Display. For Example, On Landscape Devices, it is common to have 1080p HD Resolution (which is 1920 x 1080 pixels). On phones, Portrait 1080p HD (which is 1080 x 1920 pixels).

  1. When we build our game in Unity, the first thing you want to make sure is that the Game is on proper Resolution. Most people prefer to always make Mobile games of the Resolution 1080 x 1920. On top of the Game View Tab, you can see the written Free Aspect. Change it to anything that Mobile Phones have in Common (Usually 1080 x 1920).
  2. Then Secondly, set your Canvas Scalar Correctly. When we make a Canvas, there comes a component attached to it called Canvas Scalar. First, change the UI Scale Mode to Scale With Screen Size. Then, Put the Reference Resolution the same as you put in the Game View. After that, Select Match Width Or Height on the option Screen Match Mode. And in the Match Option Change the Sider to 0.5.
  3. After ensuring both of these things, you can align each individual UI element on your screen. The Issue you are facing is very common called Responsiveness Issue.
  4. Well, the resolution we set in our game doesn’t mean to be for all people. Some people have 1080p Resolution, and some don’t. And nowadays a lot of people have those long, stretched phones, which have a longer vertical screen. So the resolution doesn’t match. But, when we set our Canvas Scalar to Scale With Screen Size, this means that our Canvas will scale according to Screen’s size. Also, we Set Match Width or Height to 0.5, this means that both vertical and horizontal displays would be scaled accordingly. In simple words, the game would not just stretch in just one direction, but rather equally stretch or shrink in both directions.
  5. When our assigned resolution in the game differs from the one on the user’s phone, the game would stretch or shrink. This also makes the UI elements on our Canvas, leave their position and scale. However, we can assign a specific amount of distance that our UI elements always have to maintain while scaling or changing their position. This can be done by using the Anchor Points in the Rect Transform Component of our UI Elements.
  6. Let’s Suppose, we set our Game’s Resolution then properly set our Canvas’ properties and make a Button. We want this Button to be on the Top-Left Side of Our Screen. So we drag the Button to the Top-Left of the Canvas in our Scene view. Now everything is fine. Right?
  7. But when we change the Resolution of our Game, the Button changes its position to either top or bottom of its original position. We can simply Fix this by selecting an Anchor Point in the Rect Transform Component. Choose the One at the Top Left cause we want our Button to Always Shrink or Expand its Position from the Top-Left.
  8. But, what would this Anchor Point Do? When we assign an Anchor Point to an element, you’ll notice that the Position Property in the Rect Transform Component will also change. This is because, when we applied an anchor point, it became the origin of the Button. Consider this: When we change the Position Property in the Rect Transform Component to 0, 0, 0, the Button will lie on the Anchor Point on its center. Did you understand? This is how we assign permanent value or pixels to our elements to be fixed on that.
  9. Now, what we have to do is to place the anchor Points to the Top-Left and just put the Button where ever we want. For example, you put it somewhere in the scene view, and the Position Property in the Rect Transform Component shows the Position as 60, -60, 0. This means that the Button is 60 Pixels to the Left (X-Axis), 60 Pixels to the Bottom (Negative Y-Axis), and 0 Pixels on the Z-Axis, from the Anchor Point. These Pixel Values are Permanent, meaning that whenever the Resolution changes on the Device the Button will always be 60 Pixels to the Left (X-Axis), 60 Pixels to the Bottom (Negative Y-Axis), and 0 Pixels on the Z-Axis, from the Anchor Point. And the Anchor Point was on the Top Left of the Screen, which results in the same 60 Pixels to the Left (X-Axis), 60 Pixels to the Bottom (Negative Y-Axis), and 0 Pixels on the Z-Axis from the Top-Left of the Screen.
  10. At the End, we can conclude that we can’t assign a fixed place to our UI elements, but rather we can assign some values (pixels) to them that they always maintain from their Anchor Points.
    **I’m Sorry to Write this Long Passage. But this is one of the Core Concepts to know in detail. I would suggest you to Please read Unity’s Official Documentation about this: **
    Designing UI for Multiple Resolutions | Unity UI | 1.0.0