Using UI Layout Element - Inventory System in Unity P3

in this video we are going to start creating our ui element to store our inventory we are going to create this panel in the center of our screen and we are going to divide it into the content and the description part that we are going to later on split into smaller parts okay let's get going okay so first thing that we are going to create is the base for our ui so in our project we already have a canvas with index one we can of course remove this and this canvas contains our health bar now we want to add another window here that will be our ui for our inventory we are not going to bother creating anything more advanced than a simple page that displays our inventory so let's right click on our canvas in the heart key and let's select the ui and let's select the panel and our panel will be created to fill in the whole screen let's change its name to be in-game menu okay and we are going to disable the image here so this is transparent now beside this we are going to add here to this component so let me minimize direct transform and the image we are going to add the horizontal layout group so type horizontal and add it to our component now inside this component we are going to create another panel so let's right click on the in-game menu right click ui and select panel and this will be our inventory now when you have created it direct transform will show that its size is zero and zero and this is because our horizontal layout group inside the in-game menu so in the top the parent object of our inventory what we want to do is inside the horizontal layout group inside our in-game menu we want to set the control child size width and height and it will expand our inventory to take the full screen of our game we do not obviously want that so let's select the padding and let's set the left padding to be hundred right padding to be hundred maybe top padding to be 200 so this is a bit lower than our ui for the health and the bottom padding to be hundred as well now this will be our inventory page let's select some graphic for it now inside your assets you will find underscore graphics and there will be some cc0 assets i will post links to those in the description of the video what we want to do is select the inventory in our heart key expand the image and we are going to select our source image let's click it let's type gui and we should have gui underscore and we are going to select underscore 2. so this will be this bluish panel let's select the color here and let's extend the alpha so this is a fully opaque panel now if we select this panel you will see that this is inside the cryo mini gui and gui folder and inside here here we have gui underscore 1x and if we open the sprite editor you will see that this is sliced using the nine slice technique so basically you have those green lines and those green lines depict the borders of our panel the corners will never scale and those parts will scale those vertical parts will scale up and down and will never be scaled on in the horizontal axis while the top and bottom parts will be scaled on the horizontal axis but never be scaled on the vertical one and this is how we can create this and in our image let's not save this the image itself of the inventory is set to be sliced because this way we can change the pixel per unit multiplier and if we increase it you will see that in your screen view you have this border becoming bigger let's keep it at one because we do not exactly want this border to be that big okay so i know that i want to split my ui into two parts the main part of the inventory and the second part which will be the description we basically want to add another horizontal layout group into the inventory itself so let's add to it a horizontal layout group and let's create two panels inside the inventory so right click on the inventory ui and let's select panel and let's call this panel inventory content and we are going to use ctrl d to duplicate it and let's call it inventory description okay now again we need to select the inventory parent object and set the control child size width and height and we are going to see white panels appearing side by side one thing that i want to set is child alignment in the horizontal layout group for the inventory to be middle center and i want to extend the padding to be 20 on each side so left right top and bottom and we can set it on the spacing for this facing value as well so there will be some spacing between those two objects now i know that i do not want them to be to take equal space in our uh inventory window i want the content to be much bigger than the description part since the content is more important so let's select the inventory content panel let's select the add component and we are going to type layout and we should find the layout element component here in our add component menu now i will set the mean with so i want this component to be mean with to be 1100 and as you can see the width of this component has increased now i will want to do the same basically with my description since i want to the description to also take some part of our inventory panel so i will select the inventory description add a layout element mean with set to be 500 makes it pretty much what i want to have in my inventory now of course we could set the content uh inventory content to be not mean with but rather prefer flexible width and we should we could set some high value here so this will basically make the content take as much space as it can and leave the description at 500. if we take a look at the documentation of the layout element it will tell us that flexible width the relative amount of additional available width this layout element should fill out relative to its siblings while the mean width the minimum with this layout element should have so basically this should play nicely but sometimes we may want to only set the width value okay so let's just select the images for those now the inventory content will select we will select the um image and let's type gui the underscore 0 and this one also is sliced we are going to change the color to be full alpha and now this will be our image we can also select this and increase the pixel per unit value to decrease the border and basically about 2 is ok and for the inventory description actually we are going to disable the image because this will be simply a container to add an image as well as the description field here to this container okay in the next video we are going to start adding the details here so that we can finish this main part and next we are going to start coding the logic behind this ui see you in the next video

Channel: Sunny Valley Studio

Views: 17,220

Keywords: unity layout element, unity how to layout element, Using UI Layout Element, unity horizontal layout group, unity horizontallayoutgroup, unity ui layout

Id: awUe44Rr4TU

Length: 7min 41sec (461 seconds)

Published: Fri Feb 04 2022