Unity UI - Scroll Menu Pt 1: Intro - Fundamentals behind a scroll menu / list.

howdy everyone coupe here I've got another tutorial series for you I've been trying to do a UI or Yui for a game I've been playing around with lately and I came across having to do scroll menus so you know lists of buttons or texts or whatever like an inventory system that kind of thing and had a whole lot of fun trying to get them to work the very fiddly little things if you've ever worked with the unity UI system you'll be familiar with how fussy it can be so I thought I'd do a few tutorials just covering this process because once you actually take a bit of time to understand it and understand the components it's really not that difficult it is quite straightforward so I'm going to cover three main sort of examples this is sort of what I was trying to achieve in a very simplified form but there are three sort of good examples so you can see them on screen at the moment I've got sort of a text log here which you can you know scroll through either by dragging on the menu itself or using the scroll bar and I'll be showing you how to put that together I've got like a list of buttons so these buttons could all be told to do certain things works the same way you can scroll either way and finally we've got sort of like I don't know like an inventory system over here a grid sort of layout at once again with buttons that could all be told to do certain things and I'm going to cover I'll probably have for each menu I'll do two videos the first video is going to cover how to set up the menu so actually laying out the UI elements and all the different components in the second video for each menu I'm going to cover how to fill the menus with content dynamically so when the game is actually running I'm going to show you how to generate all these buttons so you know if you you can do it either way you could lay this out manually in the editor for your game if you want to handcraft each menu if you're only ever going to have a certain amount of elements to it you can do that it's perfectly fine or if you want so for example the inventory you know you you're going to want that that to be filled with all the items the player might have and you don't necessarily know how many there's going to be so I'll show you how how to write the script that will actually fill this menu with with the items in a player inventory for example I'll just jump out of here - so in this video that I'm doing right now I'm going to call this intro video I'm not going to show you how to build these menus just yet we'll save that for the next sort of videos which won't be far away obviously but in this video I just want to show you a couple of the components that we're going to be using because it's really important that you understand these and that said as well if you're not familiar with using the unity UI system and canvases and screen layouts and that sort of thing but you don't have to be an expert on it but you have to have at least used it and to sort of get along in these tutorials like you can probably copy what I've done well and all of that but the UI system is very fussy and it doesn't take a lot to change a setting and break absolutely everything and cost yourself four hours of work so to save yourself a lot of headaches I do recommend just try and build yourself a simple GUI get used to using canvases and all the different settings in there you'll probably have a few frustrations but it'll be worth it and you will sort of get the hang of it so quickly show you what I've got set up I won't worry too much about the stuff down here I've got sort of some sprites that I didn't really end up using the just some basic colors I've saved a prefab of the main GUI canvas that I have here in the scene I'm not really using that prefab at all but what I have found is when you're moving stuff around on the GUI it doesn't always update so sometimes if you hit an apply button to save a change to a prefab it will update which you know ultimately doesn't impact the game at all but it makes your life working in the editor a lot easier so I recommend save your canvas and everything we're going to put on it as a prefab just so you can update it and using the apply button we may have a few little bugs and weirdness too using the UI system I found it always tends to be a bit that way possibly maybe because I don't completely understand some elements but I feel like it tends to be a bit buggy as well so you may find we have to repeat certain actions like applying certain thing a couple of times to get things to work and if so I apologize anyway so we have our main canvas here this is just sort of a main canvas that a UI canvas you know in game objects was game a UI canvas which I've added to the scene the settings on that I've got it sets a screen space camera so it should always be relative to the camera it's got sort of the main default components attached to it only I've got it set to scale with screen size for some reason I don't know I must have done that don't necessarily know if I had a reason for doing that obviously you can see playing with this stuff will will impact on it so I'm just going to leave it as it is your canvas settings will be will be based on have what kind of game you're building so I won't like I won't enforce these you don't have to sort of do it my way if you if you want you can sort of see what's going on there but like these settings may be completely inappropriate for the type of game you're building what's important is build your canvas have a UI on it of some sort and then just test it in a few different mag aspect ratios so you can sort of see if it's going a bit funny or anything like that and then you can sort of adjust things accordingly but I won't cover that at the moment that's that's a whole tutorial series on its own anyway we have a canvas in the canvas I have three sort of things here I've got my three different scroll lists text list the button list and the center and the grid list all three which I hope to show you how to build in each one the three main components you need well now once they three main components I usually split it into three items we'll see that the main components you're going to need what I'm going to cover now to get a scroll menu to work there's a couple of components as well that are optional depending on how you're building this but I'll show you those so in each one the canvas itself you know I just showed you have set that up I've got the first menu here so we are usually start by adding an image which at the moment you can't see I'll just make that visible so we'll focus on the text log so I have an image here that's like the main parent object under that I have a couple of little other images that I've been using is just a border you don't need those are optional I'll turn them off just so you can see it's just so there's two things there I have a scroll bar which I'll cover in a second but under the the main image the parent image the text list I've got another object another image which I'll make visible covers the text vertical hides a text don't worry but this object I've called a viewport because we're going to use it as a viewport it'll cover up sort of how that works in a little bit and finally within that I have another I believe this was an image yes another image object just once again so I could see it the size of this doesn't matter too much it's going to adjust itself according to how much content you fill it with so the important thing is we have a main parent object that's going to hold our viewport and within our viewport we have the content of our scroll list and the content is going to be in this case I have a whole bunch of just text UI objects so that the content is your buttons your your text whatever is going in your scroll list gets child adore to this text list content or the the content parent object I hope that makes sense so importantly we have our main scroll list we have our viewport and we have our content and the content is your content the viewport is going to be sort of the bounds or the boundaries of your of the scrollable content and the main parent object is sort of like your menus sort of the main sizing of the object within each of those and sorry this is taking a little bit guys it is a bit complicated I'll go to the grid one and I'll sort of show you there I'll leave that as this for now what we have attached to the grid list so the list object the parent the main parent this is an important sort of a component is the scroll rect which you can find just add components for there it is scroll rect the scroll rect is what defines how you're scrolling is going to work so in this case the scroll menu Scrolls both horizontally and vertically as we saw so I've attached a scroll rect which points to the content so similar to the one we saw before I've got the ListView pod and the content so this scroll rect as content is obviously the content object I've got it set so that will scroll both horizontally and vertically and the movement type is set to clamped clamped is generally what you'd be using so you've got unrestricted which I don't I'm not sure why you use that honestly but uhm it exists and it would basically let you scroll forever so you could just scroll that menu and scroll that menu and if it runs out of buttons or content or whatever I'll well too bad I suppose you might use it if you were you late generating stuff on the go I don't know but yeah I'm restricted is as it sounds I asked you to scroll either direction in an unrestricted manner you've got elastic which is it will always sort of maintain a center point and when you scroll it I'll sort of see if I can show you when you scroll it it'll snap back so it's elastic like that it sort of retains its main point but yeah it'll it acts in a very different fashion um and finally you've got clamped just but this is pretty similar except clamp doesn't have that that snap it just doesn't let you go any further there you go cool so yeah importantly on your main parent object the list object is having a scroll rect script so you fill it with the content which is the content object you tell it which directions it can scroll and its movement type you can adjust these values if you want I've never had a need to I find the default values quite quite suitable and finally and you've got your scroll bars here but I'll cover them when we when we sort of get into those is a very straightforward and simple I'll cover them in the building of the menu but it also importantly is your viewport so that is the child viewport object so you just set that to be obviously this child object here and the viewport sort of I don't know you you'll sort of see as we move stuff around as we build the menus but the viewport sort of defines the default state so you can sort of see here if I move this around it moves where those buttons are on the menu and that will always be the default state for this for this menu sort of so so to speak they if you scroll this to the very top and the very left that's where those buttons are going to be see viewports that helps you define where your content is going to sit you don't do it by moving the content itself around you do it by moving the viewport and also actually I should just undo that that's better also importantly on the viewport and this might change depending on how you want you menus to look but usually you'll do it this way on your view part or on your viewport now you have a mask a script which you can also add component to search for it mask there it is now the mask you have to have attached to an object that's an image the image needs to be enabled we can't see it at the moment but if I check this you'll see it usually you probably don't want to with the mask it just depends how you're building your object usually that will be invisible what the mask will do which you can sort of see happening down here a little bit is it cuts off anything past that point so it will only display con its its child content will only be displayed if it falls within the mask itself so the mask is sort of important to define where your menu is if we didn't have that mask I think if I disabled the image you'll see so straight away that's the effect you're going to get the mask cuts it off sorry enabler so it uses the image and to be able to define where that mask is and the mask usually will sit on the viewport sometimes we'll have it on the list object itself it just depends what you're trying to do just remember that having a mask on means any of its child objects will only be visible if they fit within the of their parent object so if we attach it to list anything below it needs to fit within the boundaries of list if we attach it to viewport it's the same the viewport boundary is smaller it needs to sit within viewport I hope that makes sense just apply those things don't worry things will jump around when using the UI also okay finally and these two are optional depending on how you're building your menu so if you are hand crafting your menu you probably don't need these you will find them like you'll find them easier to work with especially the grid layout that I'm about to show you just because it will it will automatically layout components on your content object for you and that's sort of good because yeah instead of having to drag and drop stuff around you can just duplicate it which I can probably show you so I'll actually delete all these buttons it's quite a lot of them certainly nine of them look I don't know why that's all the way over there okay got that sorted all right that doesn't matter that setting was I will show you in a second so I'm just going to apply this so have the button sitting there I've deleted all the buttons below the grid list content and you'll see that if i duplicate this button it's going to start laying itself out so it's automatically moving across once it hits the maximum starts moving down buh-buh-buh-buh-buh football that kind of thing and the reason that's happening why that's happening how that's happening is because we have a component attached to it two components attached to it the first one is if I go to the actual content object itself just apply that the first one is the grid layout group so there's different types of layout groups there's vertical layer groups horizontal layout groups and grid layout groups are the main ones that you'd use the horizontal basically does what it says it lays items out horizontally it does it automatically for you so if when you're instantiated objects have run time so if you're filling a menu full of buttons sample you'd probably want one of these layout groups because then the objects will uniformly sort of position themselves in that list like we saw when I was duplicating that object so I'm using a grid layout group which does that says it lays things out in a group and I've defined a few values so the first is the cell size it defines how big each cell is so if I set this to 100 by 100 you see straightaway the buttons are a lot bigger I'm going to set a 50 by 50 whatever doesn't matter it just depends what content you're filling that with I also have spacing so the spacing will actually space the items apart you can see if we drop that to zero we sort of only get the object sitting touching like their boundaries are touching so we could also increase that a lot or you could you know you can sort of see how that works so that doesn't adjust size of the object it just adjusts the space between them when they're laid out on the grid cool we also have the start corner which I'm not 100% sure what that does is sort of just I think it dictates whether your items will spawn also where it sits on it a parent object usually modifying that doesn't have a great deal of effect I suppose it just depends what you're trying to build the start axis is important so you start access is when new items are added will they start moving horizontally or will they move vertically so in this case they move horizontally first and then vertically second and that's because of the start access we start access we've defined the child alignment is similar so it will actually say okay if I spawn new objects and they don't fit in the current sort of in the current constraint that I've defined where are they going to spawn so in this case I've got it set to upper left but what that essentially means is so when it gets the end of this it goes to the upper left of the free space and continues to do its thing you'll sort of see it just depends on the content when we build these menus we'll be playing with that and finally the constraint here the if I've got it set to fixed count but you can sorta see it's got flexible which will basically just take the the width and the height that are defined for the object and fit items within that but these I tend to find a lot more handy sort of column in a row obviously being as being what they are so fixed column count I can say okay do ten columns so do ten horizontally before you move on to the next one same goes we could say fixed row account and do the same thing so move to ten no what would it be be ten down and then move across one ten down I've got it set to column because that's kind of I don't know I just wanted it to go that way it goes across down one across down one but you know playing with that will we'll sort of adjust how how your menu lays itself out so you'll find the values you want for what you're trying to achieve finally the last component is the content size fitter this thing is a blessing and a curse when it when you don't quite understand it it's a massive pain in the butt because it will it can screw with your scroll menus but what's important is to understand that what it will do is adjust the the width and the height of this object the content object or whatever object it's attached to to accommodate all the items that are fit within it so if you didn't have this the items and this is where it gets a bit confusing the items would still be there you'd still see them they'd still populate but this item itself the content object would not adjust its own size so having this means that this object will actually grow to sort of encompass every object or every child object within it and its boundaries in its position and that's important in a scroll menu because when we define the grid list the content here in the scroll rect it is really important that this content menu or this content object is bigger than the viewport object at some point because if you laid all these buttons out but the content object was still smaller than the viewport object it didn't grow too see objects it the scrolling is not going to work because it uses the viewport to know where where the objects are so suppose so the content if the content never gets bigger than the viewport then it assumes that there's nothing to scroll it it basically says no the the view the content object is still within the viewport so therefore I don't need to scroll there's nothing to scroll to because it doesn't care what what items are in this content it doesn't care if you've got buns text whatever it doesn't notice this stuff the content object itself is what is responsible for all these buttons the viewport or the basically the scroll rect it doesn't care what objects are in content it only cares that content is the object that it had it has to scroll so it moves the content object but only if it's actually outside the boundaries of the viewport and that's important because like I said you've got on the content object you've got this content size fitter so that will make the object grow so if your objects if your buttons aren't enough that it would be past the point of view port the menus not going to scroll that's that's the behavior you want otherwise you know you'd be able to move that button around the screen and would just look a bit weird I don't know maybe that's what you want go for goal whatever but normally you wouldn't do it that way you would you would ensure that if these buttons go past the point of the screen so if they go over the mask or the parent object you want them to be able to scroll so that's it's important to understand that because when things go wrong laying out you your QE your UI which they will they will go wrong because the UI system is so fiddly it's important to understand how these things work and why are you're using them so I do apologize for taking so long to explain all that but it is important and like I said save your canvas as a prefab just so you can use that a fly button because things you're going to move stuff around and it's not going to update you're going to wonder why and all of that and occasionally you're just hitting that apply button is what sorts everything out cool thanks guys I'll get into the next set of videos we're going to start covering how to build these menus like I said we'll start with the taxmen you actually know I'll start with the button this menu I think that's that things like an easier one to go with there's going to be a few differences for the buttons you want to go from the top to the bottom the text is going to go from the bottom to the top and there's a few subtle and lovely little differences there plus a few gotchas that I have found so I can hopefully avoid you guys having to make because honestly making these figuring out how to do these well and and get them to work the way I wanted has been an absolute nightmare so I really hope you guys appreciate this tutorials because they have driven me nearly insane you

Channel: c00pala

Views: 42,060

Keywords: unity, unity 3d, tutorial, UI, GUI, scroll, bar, menu, list, inventory

Id: TUSvupeYZv4

Length: 22min 58sec (1378 seconds)

Published: Mon May 15 2017