Unity Scalable UI Tutorial - Create UI For Any Resolution | Scalable Canvas Settings in Unity

welcome to bigfoot codes in this video we are going to take a look at how to handle different screen resolutions in mobile development and testing them out with the device simulator inside of unity i'm going to be using the assets of an idle game we'll be working on the past few months also as always if you like the videos please consider leaving a comment and subscribing okay so i have an empty scene here i created three different resolutions but one is going to be full hd it's 1080 by 1920 and that one is the iphone x it's 1125 by 2436 and then i i did a generic tablet uh 3 4. so this is going to be like our normal base resolution this is going to be for taller devices and more skinny devices this is gonna be for wider devices [Music] i also have some graphics from a game that we worked on it's called fist of fury i will leave a link to the game as well if you want to check it out and i created a brief prefab with some ui elements to it so the first thing i'm going to do is create a canvas so let's go to ui canvas okay i'm going to drag and drop this here okay so like i said we're going to use as a base resolution full hd let's go to canvas we're going to change the canvas scaler so we want to use scale with screen size and we're going to do the reference resolution 1080 by 1920. okay perfect then the last thing we need to do is to change the screen match mode to expand and then just make sure that this is in zero zero zero zero and then we have our perfect ui there set up but what happens now if we change resolutions so in this example you can see that there's some ui that exceeds the the borders of of the game so if we go to a wider resolution for example tablets we're going to be able to see that extra ui and the content will be centered that that's why this is called center now you may have different behaviors here so i'm going to explain a few different ones and you can choose whatever whichever one fits best for your game this is a really straightforward one so the way to do this is just create your whole game in this resolution and then if you want to show something else on the edges you just do that and make sure that all of your important part of the game is between these boundaries and then you're set if the device is it's wider you're gonna see it like this if it's taller you're gonna see some extra things in the bottom so here you can see that this is you can see three and a half and if you go to full hd you only see like two and three quarters this is really straightforward now what do we do if we want to actually take advantage of this extra screen because here is just lying around we are not doing anything with it what if we want to take advantage with our game of that extra screen let's go back to full hd i'm gonna copy this duplicate it sorry let's turn this off let's call this expand so what if we want for example our top to just take up the whole width same with the bottom head and we want to spread this out but let's see how we can actually do that pretty simple let's open our top hug you can delete both of these since we won't need the edges anymore let's just do this inside of the prefab or actually just to make this easier let's just unpack the prefab so we can work here but let's just remove both of these and we want the background instead of being anchored only to the top we want also to expand to the sides so pressing shift and this icon now if we just go to tablets we can see that this takes up the whole width okay so that's good for the background now we need everything inside of it to expand as well so let's first get the map we want actually this to remain on the top right corner so again we go to the anchor we press shift and then we click this one so it's going always going to maintain the same difference to the top and to the right corner so if we go to 3 4 now yeah we can see it stay in there now what happens if we want to actually scale this bar as well so that's pretty easy as well we can we can do most of this with anchors we take the points bar we can actually again press shift make sure it stretches to the side so it's always going to be 100 or actually 91 91 pixels from the left and 185 to the right so if we do this we see that our bar is much bigger now and let's spread this out a little bit as well so another easy trick for this is to actually create let's go to create a horizontal layout we can put all three of this as a child and just add component horizontal layer group we want this to be middle and centered we want this again to take up the whole width so this zero to the left zero to the right and we just position it where we want it so let's just do it there if we want to maintain this line we can actually add some padding to this so let's do it like let's do 35 sorry 35 35 okay so it's contained there now we go to three four you can see that this is going to take much higher width of the screen so let's do something similar with the bottom hub let's open it up we're going to actually change the background since we don't want this anymore we just want the the plain sprite so let's just change it to that okay we're going to do exactly the same as we did to the top gonna select the bottom and stretch we're gonna do zero and zero now the fall the full thing expands the full background we want for this case the settings in the inbox maintain the position on the bottom right we do exactly like we did with the map we do with this you know we change it yeah it maintains that now with the icons we're gonna do something similar that we did with with this uh element we're going to actually create again a horizontal layout add this here we add the three icons as child we select in this case we're going to select lower center we're going to expand it as well but we don't want actually to take up the whole width because we have those these icons here we actually want something like that and here yeah you can just put zero on the right let's do zero on the right and 400 left we just position it where we want it something like that okay and then we can see this behaves on a wider device everything that i'm showing also behaves uh perfectly in iphone x as you can see the bottom and the top we have all three of our solutions working with the top and bottom hud now we need to do the same thing for the content that's fairly easy as well uh let's see just open up contents just to make this easier i'm gonna make a prefab of the row so okay let's do that i'm just gonna duplicate this okay [Music] all right now for the row if we want it to expand we need to do two things first we need the background instead of being a fixed size we need to have it anchored again to the left and to the right and also we need to make sure that the container the parent container is also stretched the left and to the right but now if we go to three four there's something probably here that is not stretching correctly yeah so the row is actually not stretching i messed that up so again stretch make sure when you when you change this you're in full hd because this happens so we wanted to for example to be 22 22 15 or zero zero actually yes that works now we apply these changes here it applies to all of them if we go to three four and see that it's expanding i don't know why this is not taking the change that's weird we can just duplicate it again i don't know what what's happening there but it's very important so now that we have this background adjusting we're going to do the same thing for the elements you already know what we're going to do we're going to create a horizontal layout we're actually going to unpack this so we don't get any warnings add a horizontal layer group i'm just going to center it we're going to make sure it expands we're going to go 0 0 now this is taking too much room so let's just go 20 20. and now if we go to 34 you can see that this takes up the whole screen so that's pretty good iphone x looks good you just duplicate this we can have the full screen again and yeah you can see in all three resolutions that we have a crystal clear ui we have one taking up the whole screen if we want to expand everything then we have one that maintains everything centered what's your call how you want to do this now this has an issue that we can't see in the editor but if you were to build for example on an iphone x you're gonna see that the notch is gonna be heating up our screen and that's not the behavior that we want so since unity 2019.3 you can actually go to window package manager look for device bim make sure you have the preview packages turned on because it's not fully released yet we have the device simulator you can install this okay so once you have this installed you can see that there's a new tab here and it shows game and simulator so if you go to simulator you can actually see a whole list of devices of mobile devices so this is super useful for example if we go to iphone x we see again that the notch it's heating up our screen and the safe area also in the bottom for the notifications uh it's gonna be compromised as well so we need to fix that so the easiest way to fix this is i've attached a script it's called safe area what you actually need to do is go to the canvas create a new child it's called this safe area make sure this is expanded to take up the whole width so let's zero zero zero zero we take that takes up our whole container make sure every everything in your ui is a child of that and attach this script to here just leave it as is uh just remember i'm gonna leave the whole project uh in the description so you can download it and see everything for yourself and get the script and now what happens when you press play you can see that the safe area is taking into account so now your ui takes into consideration both safe areas at the top and at the bottom now to make everything a little bit more pretty in the device one thing you can do is actually take for example this background in the bottom hud just expand it down a bit do the same thing in the top so just grab it and let it expand for a bit now when you press play at least you can keep the same color as your ui showing it's not the best solution but there's nothing there's not much you can do with a safe area so this is the best approach we've found and easiest this is going to be it for this video i hope you found this tutorial helpful to learn how to handle different resolutions inside of unity also let me know in the comments below what topic would you like to see covered next in the upcoming videos thanks for watching see

Channel: Bigfoot Codes

Views: 6,321

Keywords: unity scale ui, unity responsive ui, how to scale ui unity, unity how to make ui scale with resolution, unity notch solution, unity scaling ui, unity scale ui with screen size, unity scale ui elements with screen size, unity scale ui text, unity ui scale aspect ratio, unity ui scale mode, Unity scale game ui to any screen size, unity multiple resolutions, unity device simulator, ui, unity ui, unity responsive, unity mobile ui, unity mobile, unity 2d, unity mobile resolution

Id: mfFQxCeGKMo

Length: 13min 30sec (810 seconds)

Published: Tue Dec 22 2020

Reddit Comments

[u/gaston_bigfoot]

I got asked this question a lot in my last post. How do we handle multiple aspect ratios on mobile with a large variety of devices and resolutions.

Hope this brings some clarity to the topic. If you found the video helpful, please consider leaving a like or subscribing to the channel. It helps me out a lot!

What other type of content would you like to see? Let me know!

[u/mogmogmog13]

Thank you, I really appreciate you creating this. Am on my phone ATM but looking forward to watching later as it's always something I've struggled with or ignored because I'm worried I'm doing it wrong 😅 insta subscribed!

[u/Weerwolf]

Yes! Pretty fast too. I know what I'll be watching when the kids are asleep this afternoon :D.