How To Build A Scalable HUD: Introduction To Unity UI And Anchors

hey how's it going everyone this is iam error and i'm back with another tutorial on unity which will be an in-depth focus on the ui system for beginners i normally like my youtube videos to be modular and have one video contain everything you'll need to know on that topic but ui typically has a lot of moving parts which on the surface are easy to set up but as you expand on it or try to tailor it for your game it can be difficult to manage especially if you have different display screen sizes that you would need to make ui for so i'm going to make a few different videos covering all the bases for ui this is going to be the first video in that series and with each video we'll go over more complicated topics as well as build different types of ui prefabs that you could easily plug into different game objects to use in your game in this first video what i want to focus on is the most basic components of the ui system we'll discuss how you can use the canvas image panel and text components to start building the foundations of ui and we'll also talk about how ui anchors work and how you can have everything in your ui system scale depending on different display screen sizes i'm also going to put together a playlist that contains all these videos so if you need to jump ahead to a video that goes over the topics you're trying to learn about you can go ahead and find all my ui videos in that playlist a link to that playlist is located in the description without any further delays let's go ahead and get started on this video as you can see right now i have an empty scene that contains nothing but a main camera and of course you can create ui in any scene that you want but to get started on creating ui the first thing you're seeing is going to need is a canvas so let's right-click in the hierarchy window hover over ui and then select canvas when you select canvas if you have no other ui or event system within your scene the canvas will first create a canvas game object as well as an event system if you don't have any other ui in your scene right now go ahead and ignore the event system but we do need it for the ui so don't delete it or disable it instead let's select the canvas in the hierarchy window and then take a look at the inspector window the first thing i want to quickly touch base on is the rec transform component all game objects within a ui system have a rec transform instead of a regular transform component i don't want to go down the rabbit hole to explain the differences between a rec transform and a regular transform component quite yet but the key difference between the two is that the regular transform component works with local and world space where a rec transform works within the space defined by the canvas right now my canvas width and height is set to 1920x10 as you can see these values are grayed out so i can't change them and that's because if we look down at the game window i have the display screen size set to a standalone 1920x1080 scale so if i go to this dropdown for the standalone 1920x1080 and then select free aspect you should notice that the width height changes to whatever your current game display screen size is and the reason the canvas is width and height is being changed by the display screen size is because we have the canvas's render mode set to a screen space so let's go ahead and expand the canvas component and take a look at that if we click on the drop down for render mode you should notice two options for screen space and one for world space just to quickly touch base on the three different options screen space overlay will render the ui over the screen entirely and this is going to be regardless of what camera is actually acting as the active camera screen space camera does basically the same thing but will only display to a specific camera a good example of the second option within video games would be some sort of mini map system where you have a camera that looks at the mini map and displays only what that mini map camera can show and then of course we have world space and this will render ui in the game world itself and unlike traditional ui that displays on the screen this type of ui will display in the game world only so if your camera or your character is not looking at this ui element while it's active the ui simply won't display on the screen regardless a good example of this third option is what you'll typically see in rpgs where you have a quest giver that'll have an explanation point or some sort of indicator above their head letting you know that you need to talk to them for this first video i want to build a heads-up display system or a hud for short which will display some basic information about the character that'll go ahead and be displayed regardless of what camera is looking at the player or where in the game where the player is actually standing or looking so let's go ahead and choose render mode screen space overlay let's also change the canvas game object name to canvas hud and now let's go ahead and start building a basic hud let's focus on the canvas by selecting it in the hierarchy window and pressing shift f and regardless if you're working on a 3d or 2d game let's go ahead and set the scene view to 2d if it's not already set to 2d by selecting this 2d button at the top of the scene window if it's not already highlighted let's now right click on the canvas game object hover over ui and then select panel this time and then let's change the panel game object name to hud parent a panel is simply a game object that contains an image component that stretches the image over the entire scale of the parent game object for this panel the parent game object is the canvas so it's stretching the panel image across the entire canvas game object now on my screen the panel image is kind of hard to see because it matches the background so let me expand the image component and then let me change the color and alpha to make it more visible just for this example i'm going to choose a dark blue color and then turn the alpha all the way up now that the image is more visible let's go ahead and talk about anchors let's pretend we didn't want this image to stretch across the entire display screen and we only wanted this image to display in the top left corner of the screen so working within the scene view i'm going to select the rec tool and you can quickly select the rec tool by pressing t on your keyboard while working in the scene view so i'll grab the bottom right corner and bring it to the top left and try to make sure this image covers a quarter of the screen now if i change the size of the game window and move it inwards in all directions the image becomes much smaller than a quarter of the screen size very quickly before we start building our ui and making a complete system it's a really good idea to make sure your anchors are set up properly from the get-go because if the game window or display screen change in their size it'll go ahead and automatically reflect those changes in the scene window as well and can throw off all the organization that you may have put into building your ui i'm going to go ahead and change the game window back to the size i had before and then resize the image within the scene window again now i'm going to change the position of the anchors to make sure that when this canvas scales in size the image keeps the proportional size that it has right now within the canvas if you take a look at these four triangles at the corner of the ui these are going to be the anchors for the hud parent game object if we make sure that these anchors cover the corners of the image itself instead of the canvas and we can move them by simply selecting them in the scene window and then dragging them where you want them to go let's go ahead and make sure the anchor corners surround this image once you have the anchors around the image itself if you change the size of the game window now the image will go ahead and keep the same proportions and basically take up a quarter of the screen now that we've touched based on anchors let's go ahead and start designing a hud depending on what type of hud you want whether it be a very minimal hud or a more artistic and designed heavy hud the hud parent game object may or may not need to have an image at all for the example i'm gonna provide we're gonna have a border image around the parent game object so within the hud parent game object let's go ahead and take a look at the image component let's take a look at the source image and then from here we would change the background image to whatever border image that we would want now i made a very quick border within photoshop and i've already imported it into unity so if you have your own background border sprite that you would want to use go ahead and import it now and pause the video here but assuming you have your own border image that you want to use and you've already imported it into your project go ahead and click on the little bullseye for source image and then choose the sprite from your list of assets there now i'm going to go ahead and scale this border so it covers the entire screen instead of just a quarter of it and now i'm going to have the anchors cover the entire canvas again and then i'm going to change the color from blue back to white one quick thing i want to mention for those of you who are using a border sprite you might want to have the border image remain a certain proportional size and not actually stretch the part of the sprite that makes up the border itself we can easily set that up within unity right now and i'm going to quickly show you how we can set that up to quickly find the border sprite image within my assets folder i can click on it within the source image and it will go ahead and jump to that part of the assets folder what we need to do is click on the parent game object of the sprite and then take a look at the inspector window about halfway down you should see an option for sprite editor go ahead and click on that and a new window should open up and of course this is going to be our sprite border image now what we want to do is move these green squares inside of the sprite border image itself you can also more precisely change these values in this window that says sprite at the bottom right and adjusting the border values in there by manually adjusting the sprites border we can make sure that when this image scales in size the parts outside of these green lines won't be affected by the scaling which will ensure that the skinny part of the border image remains constant and depending on how you want your ui to look it's probably a look that you're going for so it's really not necessary but it'll definitely make your ui look a lot cleaner and more professional so i'm going to go ahead and do it to my border image and once i have the border set up for my sprite i need to save these changes by hitting the apply button at the top of the window and then closing the window out if you made changes to the border sprite and it's already in the scene of your project you'll need to quickly delete it from your source image and then reselect it to have those changes applied to your scene now if you don't want to have any kind of border image for your hud parent you can simply remove the image component from the hud parrot but make sure you have the anchor stretched out around the canvas now we want to go ahead and set up an empty game object that'll act as a parent for the next object that we're going to add to the ui so let's right click on the hud parent game object and then select create empty let's go ahead and rename this empty game object to player icon parent and for a lot of video games the player icon is located at the top left of the hud so let's move this game object from the middle of the canvas to the top left of the canvas and then let's change the game window size like we did before you should notice the outline in the scene window for the player icon parent moves outside of the canvas altogether and that's because we have the anchor set up to the middle center of the canvas if we want to have this empty game object anchored to the top left of the ui all we have to do is click on the anchor box which is this box located in the rec transform component that says middle center right now and then let's change the value from middle center to top left now the reason we want to have this empty game object act as a parent is this will allow us to manage the ui a lot better and help manage the scale and size of whatever image would be a child of this player icon parent game object so let's go ahead and right click on the player icon parent game object hover over ui and this time let's select image you'll notice the white square will fill up the empty game object space that we had but unlike a panel an image size is independent of its parent game object and will make a standard 100 by 100 square by default it'll also automatically set the anchors to the middle center of whatever the parent game object of that image is but if we wanted this image to fill up the entire parent game object size and not be a standard 100x100 square which is currently the same size as the player icon parent then it would make more sense to choose a panel instead of an image but i definitely want to show you an example of how an image is used in ui and part of the reason why i'm choosing an image here let's first rename the image game object from image to player icon border image and just like my hud border image i made a player icon border image so i'm going to be using the player icon border image as my reference image but just like the hud border image i need to make sure i adjust the sprite's border values so that the outside image of the sprite doesn't change in size when it gets scaled so i'm going to quickly do that right now after i change the sprite's border values i'm going to go ahead and select it as a source image for the player icon border image and then i want to change the position of the player icon border image so that the outer top left corner of the player icon border image is touching the inner corner of the hud parent border image and the easiest way to move the position of the player icon border image is to select the player icon parent and then move the position that way with the corners now touching let's change the scale value for the player icon parent from 1 and the x and y to 0.75 and this will go ahead and anchor the player icon border image in a nice spot in the top left of the hud while making sure there's an equal distribution of space in between the different corners now let's go ahead and right click on the player icon border image hover over ui and then select image let's change the image game object name to player head image using the rec tool let's change the size of this white square so it fits inside the player icon border image and i already have an image of my player head that i plan to use for the ui so for the source image i'm going to click on that and then choose my head and now the player head image fits nicely within the border this entire process that we just did to make the player head icon fit within the ui and anchored at the top left of the screen is very similar to how we would handle all the other elements within the ui as well next i want to go over how we can handle adding text to ui a lot of older platformer games have some sort of timer or score system at the top right of the ui just to show you how we can add and design text elements to ui i'm going to go ahead and set up a timer system that'll count up as the scene starts and we'll be using the ui text component to display how much time has passed since the scene started so just like we did for player icon parent let's first create an empty parent game object which will essentially act as a container for the timer so let's right click on the hud parent game object and then select create empty let's rename this empty game object to text timer icon parent let's move the text timer icon parent game object to the top right of the canvas and then using the rect tool i'm going to stretch it out horizontally let's also change the anchors from middle center to top right next let's right click on text timer icon parent hover over ui and then select panel and as i mentioned the only difference between an image and a panel is how the anchors are set up and how the image is stretched out and because we have an empty game object that's already acting as a parent with anchor set up the anchors can either be set to stretch or center so we don't need to worry about changing the anchors but because the text timer icon parent is no longer a perfect square the panel will more quickly stretch out the image exactly like we need it to let's quickly rename this panel game object to text timer icon border image i'm also going to change the source image to the same sprite that i used for the player icon border and by default panels have their alpha value set to about half so let's turn the alpha value all the way up then let's right click on the text border image game object hover over ui and then select text this time let's change the text game object name from text to time text and then using the rec tool let's change the size of the time text game object so that it fits inside the border of the image now let's take a look at the inspector window for the time text game object let's first go ahead and change the text value from new text to something like time colon 9999 this value is just going to be a placeholder for the text we're actually going to control this text value through code but we put in a placeholder value to see how it looks while we're designing it we're also probably going to want to change the alignment for the text so that horizontally it's aligned to the left and vertically it's center aligned so for the alignment let's go ahead and choose left and center further down in the text component you should see this box for best fit i'm going to go ahead and select the box for best fit this will go ahead and auto size the text so that the text fills the space as much as it can but even with the best fit box selected you'll probably still have a lot of empty space between the text itself and the border image so what i'm going to do now is change the size vertically and make this box a little bit smaller so that the text builds up all the space allowed and to achieve the best results when doing this go ahead and adjust the width and height of the text timer icon parent as well as adjust the width and the height of the time text so it fits inside the border image there's one last hud element i want to go over before we wrap up this video and i want to show you how we can easily make a health bar within unity using the ui components so just like all of our other ui elements let's right click on the hud parent game object let's create an empty game object and let's name this game object health bar parent i actually want the health bar to be positioned above the player icon within the canvas so i'm going to move the player icon down a little bit by selecting the player icon parent and then moving it down position the health bar parent above the player icon change the anchor for the health bar parent to top left and i'll shape it out horizontally long and skinny just to get a standard health bar shape because this health bar is going to be filling up from left to right we don't want the image of the health bar to move further to the left if the max value for player health increases in the game so we also need to change the pivot x value from 0.5 to 0 so that if the max value of player health increases in the game and we need to redraw the size of the health bar it doesn't draw any further to the left next let's add a slider component to the health bar parent let's uncheck the box for interactable on the slider component and then set transition and navigation both to none we'll come back to the slider here in a little bit let's go ahead and right click on the health bar parent game object let's go ahead and select panel let's change the panel game object name to health bar border image i'm going to change the source image to the icon sprite that i've been using for border icons i'll also turn up the alpha all the way on the color let's right click on the health bar border image hover over ui and then select panel again let's rename this game object to health bar background image let's change the image size as well as the anchor so they fit within the health bar border image for the source image we can actually go ahead and choose none or you can keep the standard background image unity selects for you if you want it's up to you but let's go ahead and turn the alpha all the way up let's go ahead and duplicate the health bar background image let's change the new game object name to health bar filled image let's go ahead and make it a child of health bar background image and then let's change the color of the image from white to red we next want to make sure that health bar filled image has the same image size and anchor positions as health bar background image so if you need to make any adjustments go ahead and make those adjustments but if it looks like everything is set up go ahead and select the health bar parent game object in the hierarchy window take a look at the slider component in the inspector window and then go ahead and drag health bar filled image into the slot for fill rect when you give the fill rect a value it'll give you a couple more options for the slider component let's go ahead and set the max value to something like 100 and then let's also check off this box for whole numbers and now if we change the value of value the health bar will go ahead and fill up from left to right with the zero value being all the way to the left and a 100 value being all the way to the right that's going to go ahead and wrap it up for this video in the next video i make i'll show you how we can set up all the values for the ui through code and so depending on what character is playing their character head will display in that box there the time value will be an accurate representation of how long the scene has been playing and the health bar slider value will be the current health value on the player if you found this tutorial helpful or i was able to teach you something new please consider liking the video and subscribing to the channel if you're not already subscribed one last thing before i go if you're using the information in this tutorial to make a metroidvania consider taking a look at my course on udemy metroidvania toolkit it goes over all the mechanics that you need to know to make a metroidvania and can definitely save you a lot of time if you're looking for a quick start regardless i do appreciate you watching my video and hope to see you in a future one have a great rest of your day and take care y'all

Channel: I_Am_Err00r

Views: 1,062

Keywords: Unity, Game Design, Game Dev, C#, Indie Game Dev, 2D Game Dev, 2D Game Design, Unity 2D, UI, User Interface, Anchors, HUD, Heads Up Display, Unity UI, Building UI, How To Manage UI

Id: 8uL4PZUeTJA

Length: 20min 26sec (1226 seconds)

Published: Mon Mar 29 2021

Reddit Comments

[u/I_Am_Err00r]

This is part 1 of a series I plan to make going over everything related to UI with Unity. Each video I plan to discuss more complicated topics and build more difficult UI elements.

If you enjoy the video or find the information useful, a like and subscribe really goes a long way, here is a link to this video: https://www.youtube.com/watch?v=8uL4PZUeTJA

Thanks for taking a look!

[u/void1gaming]

Well, this was required. Thanks for sharing.