How to Use UI Anchors in Unity [Unity Tutorial]

hi guys it's mike here from comf3 interactive welcome back to the channel today i'm going to be talking about something that plagues a lot of new unity developers and that is how to anchor ui elements to different areas of your screen so this may be quite basic for some of you but i know for a fact this is going to help a lot of new developers and if you've clicked on this video i'm going to assume you need some help with this so in this video we're going to be going through the basics of how to anchor different ui elements to different corners or the center of your screen so it appears in the same position on different screen resolutions so before we get started with that i just want to thank gigatank 3000 for sponsoring this video i've got his links down in the description below go check him out on twitter go check out his website and keep up to date with what he's doing and i also just want to thank everybody supporting me over on patreon so that's brandon zill steve uk matt parking and raf you guys are fantastic i love you so i've quickly set up a little bit of a ui system not really a system more of a design and it's not even that much of a design but this is kind of like what you'd usually see in your own games so we can see i've had my game view set to this size on a 16x9 landscape orientation but now if i change the screen size nothing happens the ui doesn't scale and that's extremely annoying but to fix that all we need to do is go to a canvas object that's rendering these ui elements we'll change our canvas scalar and the ui scale mode won't be constant pixel size it'll be scale with screen size and we're going to notice a bit of a difference here and as you notice everything's got a little bit small but that's just the way that the canvas is now rendering these objects so if we go in and select all of these objects and scale them back up you're obviously going to be a lot more precise than this but we can scale those back up and now all the ui elements scale with uh object so that's fixed one problem but this will only be good looking ui on any device that's running at a 16 by nine orientation because that's what we've set it up as if we were to go up here in our game view and change this to an 18 by nine we can see that it hasn't scaled like we expect we're cutting off the top and the bottom of our panel and this is where the actual hierarchy comes into play so we know that this background green object is a actual background and all of these are child objects of this background and currently the background object is set with an anchor point to just be in the direct center it won't resize to fit the orientation it's going to keep its actual size and it's just going to plonk itself right in the very center of the screen and we don't want that we want this background to stretch with our screen orientation our screen size so we can click on our anchor options up here and we get a whole host of anchor presets now each one of these is good in their own right and the one that you need is going to depend on how your ui looks so i'll just give you a brief overview of what all of these do so the ones along the left side and the top side are basically just your masters it's the ones inside that you're actually interested in and as you can probably tell by the red lines around it it's going to change the anchor position of that object to be whatever you like so if we were to change the background layer's anchor position to the top and then we changed our orientation to or the resolution to 18 by nine again we see it's anchored to the top so we don't cut off the top but we do cut off the bottom why do i keep selecting portraits because i'm used to doing mobile games but center is the one that we want for this but as you can see on the outside around here we have stretching options and what these are going to do these are going to stretch along the side of the screen where the red line is so this one will stretch along the top edge of your screen this one horizontally along the center horizontally along the bottom and then you've got your verticals down at the bottom and then this one right in the bottom right hand corner is just to stretch it completely to match the screen size so if we go ahead and select that one for our background layer so this will now stretch completely depending on the resolution of our screen we change that back to 18 by nine we can see that our background layer is perfectly fitting inside of our screen regardless of the resolution or orientation which again is perfect but you may have noticed that the other icons are following suit and again this is where we come back into the hierarchy so now we have our background object stretching we can select all of our icons and drag and drop them as a child of the background object now that won't fix our problem but the way that the rec transform anchors work is this is based on the parent object the actual anchor position is based on the parent object so if we just take a quick look at a red icon up here we can see that we're still set to be centered so now whenever we change resolution or orientation this red icon is going to try and stick towards the center point of the parent object which is this green background and we don't want that we want that to stay up in this top right corner and again we do that through our anchors now this time we're going to select the top right anchor right here if we select that no whenever we resize this is going to look like it's in the same position as it is now if we go back to 18 by nine we see it drops down and it stays within that confine so we can go ahead and do that for the rest of our icons we'll select the gray one this one's going to stay in the top right the blue one we'll select bottom left and then the green one will select bottom right and the orange one needs to be in the center so now if we resize again everything drops in and it looks like it's intended and we can also swap to a portrait view and we'll see they still snap to their actual respective corners and the center now that is just the basics of positioning your ui there are there's a lot more to go into when it comes to these anchors so if you do want to learn more about this just let me know in the comments below and i can start covering all the other aspects like the pivot points the scaling the stretching anything like that i just wanted this to be an introduction to getting your ui looking as good as you possibly can at an early stage so i hope this has been useful for you and i hope you're going to subscribe if you like the content please subscribe and if you do i'll see you again next week thanks for watching guys if you like the content remember to subscribe to the channel for weekly unity tutorials

Channel: Comp-3 Interactive

Views: 2,403

Keywords: comp3, comp3interactive, unity, unity5, unity3d, unity2d, tutorial, game, development, dev, introduction, program, programming, code, coding, csharp, c sharp, c#, games, develop, 3d, 2d, artist, programmer, editor, extension, easy, beginner, advanced, professional, multiplayer, how to make a game, how to make games, game development, how to use unity, brackeys, comp-3 interactive, unity 2d, unity 3d, how to make, game developer, game dev, make money with games, ui, anchor, position, fixed, ui moving, pivot

Id: w3sMD-3OJro

Length: 7min 22sec (442 seconds)

Published: Fri Mar 12 2021