Unity Layout Groups: What are they, and why are they important?

in this video we're going to be learning about the differences between the layout groups and unity first of all you have three you have the grid layout group the vertical layout group and the horizontal layout group each one of these are UI elements now for this example we're using a game that we've been working on for a composition that we have with Game Dev simplified as it turns out I really need to practice more with 2D games because this is not nearly as far along as it should be and I kind of gave up on making a platformer controller it is going to have a canvas though so that's how it's going to connect to this video so the first thing that we're going to do is create a new UI image which is kind of hard to see given that we're making a 2d game so let's go ahead and look at this through the scene View now in order to use the layout groups you don't actually need to create a new UI object you can actually just create an empty as long as it's under the canvas which will automatically give it a rect transform as opposed to the standard transform we'll go ahead and name ours organizer we're going to want this to be a bit bigger in order to do that we're going to click on this little box thing right here click alt and at the same time click this bottom right hand corner now the first component that we're going to focus on is the grid layout so we'll go ahead and add that in now and then we'll take our image object and drag and drop it under our organizer in the hierarchy now you'll no longer be able to change the size of the image by itself but you can change its size via the grid layout group cell size now let's go ahead and look at the main function of the grid layout Group by duplicating our image a ton of times now if we change the spacing to 20 for both X and Y you can now distinctly see each of the image objects and now it's beginning to look more like an inventory system for some classic games now we're going to resize it a little bit so we can take a look at our start corner and start axing we'll see that as we adjust them that it changes where it starts and ends you can mess with this on your own to get the look that you're looking for now the child alignment is what I consider to be more important as by default it starts in the upper left when most of the time you want it in the middle Center and we'll resize that and Center it so it looks a little better changing the size of these I want to change something else which is changing the constraint type so if we change it to a fixed column count then regardless of the child objects there will only be that many columns same thing with the fixed row count that's essentially all you need to know about the grid layout group and the next one that we're going to take a look at is going to be the vertical layer out group now if we create a new image child object which we probably shouldn't have deleted all of them in the first place go back into our organizer and select control width and height you'll see that it stretches out to fit the entirety of our organizer and we can see this in action if we increase our spacing to something like 15 and duplicate our image object now so long as width is selected even if we change the size of this it'll stretch with it and if we unselect width it'll no longer stretch out the size and for now that's pretty much all we need to know about the vertical layout group let's move on to the horizontal layout group as you can probably imagine this is literally the same exact thing except horizontally last thing I want to talk about is combining the two let's start out with making a Netflix looking thing and then we're going to change the size of our organizer to make it look a little more like what we're going for and then we're going to create a new empty game object under our organizer and we're just going to call it movie and then we'll give it an image child object and change its width and height to make it look more like a film next we're going to create a text mesh protest which if you haven't installed text mesh Pro yet this little pop-up will show up and then you can just install it and then things should work normally once we have our text object I'm just going to name it movie name and then make another text object with a different color and just name it directed by so and so now I could just hope for the best and reorganize it every time I move it around or I can make this object its own vertical group set it up to be lower Center and then we now have a vertical layout group within a horizontal layout group change it around a little bit if we look at it in the game view it looks good now let's go do the same thing making a horizontal layout group in a vertical layout group this time we'll make it look something like Facebook Messenger to do that I'm going to make a new game object with a different size add in another image object and I'm just going to use a picture from dialog system for Unity turn this game object into a horizontal layout group throw in another image object as the background and then I'm going to add in some more text mesh Pro elements for the name and text message you can go ahead and mess with some of the settings on text mesh Pro but once you got its where you like you'll see that if we duplicate the object it now Stacks in a nice vertical list if you're wondering what the difference was between the vertical horizontal and grid layout groups there you have it thank you so much for watching consider subscribing and we'll see you next time also a huge Black Friday sale if you want to go check it out use our affiliate link below

Channel: JTAGames

Views: 6,345

Keywords: black friday, game dev, game development, game development for beginners, game development unity, how to make video games, unity, unity 3d, unity assets, unity black friday, unity game development, unity3d, unity3d tutorial

Id: UzTJfaSAclQ

Length: 4min 8sec (248 seconds)

Published: Thu Nov 17 2022