How can I keep the position and size of buttons in my UI in the same proportions regardless of the size of the screen?
I set it as follows, but when I change the width and height from the default 1920 * 1080 to 1280 * 720, the button does not come into place.
And I want UI elements shows same proportion regardless of device’s resolution is over FHD or below FHD, like 2560 * 1440 or 4k or 1280 * 720
For a landscape orientation, set the Canvas Scaler to match height 100%, not width. Start with the narrowest ratio you expect to support, like 4:3, or maybe even 5:4 (rare monitor ratio slightly more narrow than 4:3). I keep the reference height to a typical height I expect to be average, like the 1080 already set there, and then determine the width based on the ratio. So, a 1080 height, with a 4:3 ratio would be 1440 x 1080.
I usually start there, 1440 x 1080, match height. Create your UI on a 4:3 ratio, then stretch out to wider ratios and watch the elements space out, and use anchors at that point to control how things space out on wider screens.
With this setup anchors only matter horizontally. It doesn’t matter if you use vertical anchors or pixel values. Pixel values for height are in relation to the reference height, so 108 is always 10% of the height of the screen on any resolution or ratio. So, any combination of pixel values or anchors vertically all give the same visual result. Width is different because that’s not the anchored “match” axis, so anchors become relevant horizontally if you want an element to stretch, or which part of the screen it should be attached to as the screen gets wider.
Try just starting there and see if it doesn’t fix most of your issues.
@CodeRonnie
Thanks. So I set button’s anchor to bottom center, but when change height to 720 from 1080, button’s size become bigger.
For revise this, if I set anchor as Stretch, then button disappear when 720 height.
Okay. Well, you want to pick a reference resolution on the main CanvasScaler, and leave it that way. Then, you will need to restart designing your UI layout and properties. You can’t change the reference resolution or screen match mode later.
So, if you want the reference height to be 720, that’s fine. Really, the best height value is the pixel resolution of the device you need to support.
If you need to support multiple device resolutions, then you must keep in mind that the CanvasScaler will use multiplication to scale everything on the Canvas up or down, to match the actual screen height. That is all. Sometimes it will multiply up, sometimes down. So pick a good value that you like. Then, stop changing it, and begin to remake your UI.
So, if you want the reference height to be 720, then the algebra is like this for a narrow screen:
hr = height ratio
wr = width ratio
hp = height pixel resolution
wp = width pixel resolution
hr/wr = hp/wp
3/4 = 720/wp
wp = 720/0.75
wp = 960
So, with a reference height of 720, your reference resolution would be 960x720. That, or 1440x1080, or whatever. You just have to pick a reference height, lock it in, and stick to it.
I can’t tell more from here with just that image. If you could export a .unitypackage or share the actual canvas in some way I could look at it when I’m at a computer.
But, the red X’s usually appear because the RectTransform properties of your UI components are set in a way that makes the rectangle of that element invert backwards. You will have to go back through your components and lay everything out on a 4:3 aspect ratio in the Game View, like the reference resolution.
Then, change the Game View to a wider aspect ratio. Use anchors horizontally to stretch an element, or keep it relative to a certain part of the screen, or both. You can use a bit of anchor, and a bit of pixel width for a combined effect on a particular rectangle.
Anchors on the height axis don’t matter with this setup. Just arrange them in the most pleasing way for your workflow. They can all be at the center of the screen height, or they can be anchored to the top and bottom. It doesn’t matter, but it will affect the pixel values of the height of the RectTransform. That may be relevant when moving rectangles from script.
In any case, only the width anchors affect whether a rectangle stretches relative to screen width on wider screens, or moves to the left or right side of the screen as it widens. The visible height of the rectangle will always have the same relative percentage value on any screen.
But, you will have to go through and do the layout again if you change the reference resolution of your canvas, or the match mode. Pick a reference height for your expected devices, and expected upscaling and downscaling from the reference height. Lock it in, and determine the reference width for a 4:3 aspect ratio. Set the Game View to a 4:3 aspect ratio, such as the reference resolution, or just 4:3. Then, redo all of your layout.
It should be stable after that. Then you can go to wider aspect ratios and use the width value of anchors to affect how a rectangle moves or stretches as the screen goes wider.
(For any other readers, this is all for landscape, not portrait. For portrait, all of the principles are the same, but you set the Canvas Scaler to match width. You also pick a reference width and use algebra to determine the height. Anchors only matter for screen height, etc.)
Why you set 4:3? most modern device (phone, PC, console) adopt 16:9 mostly.
Yes, yes, yes. But, this is very important. You start from the smallest aspect ratio. You fit all of your elements into the smallest container. Then, you can expand outward.
This guarantees that your elements will never overlap. You can either space them out when the screen has more space, or you can stretch them out to fill the space using anchors. Anchors let you attach one or two spots on your rectangle to a certain percentage of the screen width. Two anchors will cause the rect to stretch out to that relative screen width on a wider screen.
In the end, you have to readjust it again to match 16:9.
Why do things twice?
If you can finish it in one go, it’s faster to do it from the beginning.
And in the end my problem is so how do I solve it?
In the end, I have no choice but to manually adjust the button graphic size to fit the 720p height.
What I want is an auto-fitting solution provided by Unity.
But does this mean there is no such thing?
I cannot get same button graphic size even after set as Stretch or set it to Anchor.
If I go to 720p, the size gets bigger.
Conversely, if I worked at 720p, the size will be smaller if I go to 1080p.
In the end, I am gradually coming to the conclusion that I will have to create two versions of the UI manually.
You replied long, but I can’t find solution to solve my this simple button size problem.
Well, screens are different sizes. The CanvasScaler will absolutely
The only variable is the width of the screen. So, you have to specify how buttons are arranged between the most narrow and the most wide screen.
There are many options. You can anchor the center of a button on the x-axis to a percentage of the screen width. Then it will space out on a wider screen and keep its shape. Or, you could anchor each edge of the rectangle to two different screen percentages. Then, the button will stretch out to be the same percentage of the screen, regardless of aspect ratio. Or, you can do a mixture of both, anchoring a percentage of the button to a percentage of the screen width.
The relative scale of the height of all UI objects will be the same on all screens.
My wife studied layout and design in college. She was an editor of the school newspaper. I’ve worked with people who were experts in UX. To make a video game you will have to do some amount of layout, choosing to anchor width or not.
I’ve described the process I use as well as I can. Good luck.
No it won’t! The canvas scaler doesn’t do that. If you design your UI around 720p and have said resolution as your reference resolution in your canvas scaler, then your UI will be the exact same size in 1080p, or even 4K.
Preview how your UI looks in the game window/simulator. Don’t go changing the reference resolution of your canvas scaler. That’s not what it’s meant to be used for.
Just build your UI around a base reference resolution, probably the most common resolution you expect to encounter on your target platform. For PC that is 1080p by a wide margin (60% on the Steam Hardware survey).
This honestly isn’t a difficult problem.
And just to be extra clear about why I design from the most narrow reference outward is because I have designed UI for one screen, and then had it all run together and overlap on a new piece of hardware with a more narrow screen. Designing from narrow outward toward wider screens solved that problem permanently. Now, the worst case scenario is empty space on wider screens.
My problem now is I set 1920 * 1080 as reference and worked all ui for this, but now I should support 720p. (1280 * 720)
And you have to change the height value of the canvas scaler to 720 to know exactly how it will look when placed on a 720p device.
Even if you change it to 1280 720 in the game window, it looks the same.
However, it is completely different when placed on an actual 720p device (Nintendo Switch).
It looks the same as when the reference value of the canvas scaler above was changed to 720.
In other words, it seems to follow the value of the canvas scaler on the actual device.
So I’m looking for a ui solution that will persist even if I change this value.
So which preset should you choose?
No matter which one I chose, my start button disappeared into an X as soon as the height changed to 720, or it got bigger.
https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-CanvasScaler.html
Absolutely not. You choose a reference resolution and choose a mode. Read the page above how they work in reality. It has mode to keep same pixel size, same % of the screen independent of the resolution and same physical size independent of the resolution. Obviously aside from the same number of pixels, the others carry rounding errors. That’s just computer math.
So do not change the reference resolution, choose one, the one you will see the most (PC games 1080, other devices the most common). Then DON’T TOUCH IT! If you want to see on different resolutions, change the viewport resolution.
The reference is what it says, a reference to have a base resolution which your UI based on (you made your UI for this reference) and in change of any resolution the math will be based on this reference. Not the other way around.
yes maybe it can be my misunderstanding, I will try again verify.
For anyone coming across this later as I did, here’s the solution I found:
1.Just set the reference resolution on the canvas scaler the same as whatever device you’re using for testing, likely your pc.
2. Make sure that your UI elements anchors are NOT set to STRETCH. Those are the presets with blue arrows. Unless you want the icons to morph with the resolutions (like a square becoming a rectangle) don’t use these. Use the red anchor presets in the center. They will preserve the aspect ratio of the elements, while allowing them to change in size. If your not sure which one, try Middle Center. Works for most cases for me.
That’s it, hope this helps.
