How to scale Unity UI objects for every screen - Unity UI tutorial

so there are hundreds of different display sizes both in mobile devices and desktop computers you ask how to make your ui look good on every device today i'll show you exactly that by transforming my existing game with ui to be scalable to all devices so i downloaded this template unity project from the asset store link in the description and added my custom ui elements health and monobars pause menu and at the bottom location text as you can see they look fine on this resolution but whenever i change the window size everything starts to go wrong and terribly messy let's start with the health and mana bars we want them to stick to the top left hand corner of the screen no matter what size the screen is so i'll select the bars group object and now noted this anchors button you can click on it and edit how objects should behave when the game runs in different resolutions because we like to have our object connected to the screen corner just press this button to stick it as you can see that immediately fixes the issue with the brown box but health bar still looks a bit off one solution to fix this would be to click on both health and mana bars and give them the same anchor point but in this case i would suggest to just set them as a children of our bars group that way they follow its parent rules and on resizing behave as intended now let's move to the paths button here the story is very similar in fact this pause icon has been already set as a child of our button so we don't need to worry about that just click here to open options like before and select the correct anchor this time the top right hand one after this change good news our ui starts to behave as intended but we still have to fix this button bar and the text i will now click on location text background open the anchor menu and select to stick it to the bottom edge of the screen but when i resize the game view it sticks to the bottom that's good but i like it to resize to fill the whole bottom edge to do that in anchor options select this one basically it tells the game to stick it to the bottom and fill the whole bottom edge of the screen if your object is not sticked to the edges like in my case and you like to quickly resize it just hold the alt or option key on your keyboard and click again on this bottom stretch option now the ui behaves as intended and to finish things up we can change the anchor of the text not to be stick to the left but to the center just select the text anchor options and holding the alt or option key click the middle center option to automatically move it now when we run our game we should see a nice resizable ui no matter what the resolution is but we have one more element left pause menu the background looks totally out of place and the buttons inside the box are not aligned let's fix this i'll stop the game and enable this pulse screen game object here we have an image that dims the screen and the box with text and two buttons let's start with the background the same way we stretched this location background before we need to stretch this transparent background to fill the whole screen as always click on the anchor presets and select the stretch stretch option while holding alt or option key now let's move to the buttons i think the best way to fix them would be to stretch them horizontally and add some margins let's do that select both resume and exit game buttons by holding shift key go to anchors presets and select this middle stretch option by holding alt or option key on your keyboard as you can see the buttons are now stretched the full width of the box but we don't want that we need some margins simply click here and input how many pixels of margin you like to have from the left side i'll input 24 and the same from the right side buttons now look way better and as an addition if you like to change the paths menu with you can do that without breaking button sizes they will resize automatically the last thing you might want to change is the scaling of your ui right now no matter what the size of the screen is your ui elements will always have the same size and in this example all elements look kind of small if you click on the canvas you can change a scale factor of your objects by typing something like 1.2 or even change the scale mode to scale it with the screen size to make all ui elements fill the same amount of space no matter what resolution is selected so that's the end be sure to check out my other ui tutorials and subscribe for more content like this also if you have suggestions for any other unique ui videos be sure to comment below see you in the next video

Channel: Coco Code

Views: 153,260

Keywords: Make Unity UI look good, unity gui, Resize Unity UI, bionicl, cococode, canvas, Unity UI, Unity UI fix, unity3d, Resize Unity canvas, unity gui tutorial, tutorial, bionicl code, scaling, Maciej maj, unity, Unity UI canvas, Advanced Unity UI, Better Unity UI, guide, gui, How to fix Unity UI

Id: QnT-2KxVvyk

Length: 5min 59sec (359 seconds)

Published: Tue Oct 06 2020