koobas.hobune.stream
Change UI size dependent on screen resolution
Hi!
So I am making a game for mobile and want it to be able to run on phones and ipads. I have read tutorials about scaling for resolution and for the phones it all looks great. However, when I switch to the ipad resolutions the buttons are all really big which is not quite what I want.
For example there is a row of four buttons that on the phones fill the bottom of the screen but when I switch to ipad they still fill the bottom of the screen making them huge. I am wondering if there is a solution for which they scale correctly for the phones but I can check if it is an ipad being used and if so have them smaller of show a different canvas with different sized UI.
I hope that made sense and thank you for your time!
Hannah
I recorded some "life hacks" for you that I use myself. $$anonymous$$y English is bad, so it was easier for me to show.
https://www.youtube.com/watch?v=I$$anonymous$$s-1Gtsn8A
Some clarifications on the video. I change the size by holding the Shift. Drag and drop the element holding Shift + CTRL.
This is a short video and it just answers the question that you asked above.
I think the key insight you need here is that it's not just about screen resolution, it's also about physical screen size. You can work out the latter using Screen.dpi.
It sounds like you're going to want your buttons to scale differently on larger devices.
One way of handling this would be to create a script which allows you to define maximum and/or $$anonymous$$imum physical dimensions for a UI element and which, on Start(), clamps its size in pixels so that its physical size falls within those bounds. But how good this is going to end up looking and how complicated things are going to get will depend on how your UI hierarchy is set up (eg you might need to move things as well as adjusting their size).
Another way would be to set up 2 or more alternate UIs (or UI sections), and only have one of them active (choosing which one on Start(), depending on the physical screen size).
Hello Hannah, did you try playing around with Canvas Scaler? There should be an option called UI Scale Mode - Scale With Screen Size. This should help you solve the UI scaling problem. Not sure if it does work for mobiles, but I hope it's similar...
Hello! Thanks for your quick response.
I am quite new to unity and specifically UI. So when I set up my canvas's with a reference resolution of 1080 x 1920 and with the resolutions set like that the phone resolutions look okay when I change them but when I select the 1800 x 2480 (ipad resolution) the icons are really big. But when I change the scale screen size to be 1800 x 2480 they look okay. But I have to manually change the reference resolution scaling. If I were to build the app they would stay to the 1080 x 1920 reference resolution layout right?
Whenever I try to scale by screen size the images get really pixelated and you cannot read any of the words - any ideas on how to fix that please? And when I just use portrait 9:16 it cuts off the edges :(
That's quite a different thing to what this question is about, and quite specific. You'd be better off posting a new question. And add more detail about what you're doing. Are the words actually drawn into your images? How big are the images? Do they ever look ok? At what size? If the words are drawn into your images it could just be that the images are too small and you're scaling them up too far beyond their natural resolution.
