Scaling Scroll Rect UI Setup in Unity

hey everyone today I want to go through how to make a nice-looking scroll rect for your UI this can be used as an inventory system settings you know anywhere where you have to scroll where the content takes up more than can fit on the screen pretty simple there's a couple things that well they catch me often even though I've done this a thousand times and they have caught me many times when I started and I know a lot of people get confused by some of the UI stuff in unity so I'm gonna go through how to set up a simple scroll rect and it should work and you know within any kind of screen and it will scale dynamically and the scroll bar will appear if it needs to and will you know sizes it needs to as well so yeah let's get started alright so let's open unity into a brand new scene I just called my seen you I scroll call whatever you want I'm also going to pull the game view over whenever I'm doing UI work I like to have a split view I like to see the game I like to see the scene and the reason for that is you know when you change the aspect of the screen you are also going to get a change in the in the canvas and for that reason I like to turn I like to change from free aspect and I'd like to go to 16 by 9 or 16 by 10 you know whatever you're more comfortable working in so if I go 16 by 9 and then we make our canvas so go to UI canvas and we've got our canvas you can see that that canvas never actually changes and that's good and then we can see whatever we put in the canvas we can see reflected on-screen in the actual game view and we can kind of see what it looks like and keep tabs on it that's my preference for doing that so first thing we're gonna do in this canvas is we're going to create a empty game object and we're gonna call this inventory yeah overlay inventory overlay Amber's gonna add an image to this image and we're going to make it stretch the entire size so zero zero zero zero zero okay and then what we're gonna do is we're going to make it black and go about I don't know two thirty for the alpha or so next rates kind of like an overlay effect right I can still see the game behind it but it's not it the game won't interfere with the UI actually lighten that up just a little bit to ten so that's first thing we're gonna do second thing we're gonna do is inside that unity or sorry inside that inventory overlay we're gonna right-click again we're gonna hit UI and we're gonna go to scroll view so that's gonna create this nice little scroll view here it looks a little large but we'll get to that in a sec actually let's solve that right now so go to go to your canvas and since we're designing this for a sixteen by nine ratio you can kind of use that as your base so instead of constant pixel size let's go scale with screen size let's go 1920 by 1080 that's a good sixteen by nine ratio kind of kind of a standard for gaming you know it probably won't be for long but it is right now and match with our height I I don't know it depends on what you do with the UI I'm gonna leave it on width for now but height can also be good and you can leave it in the middle of here I'm sure you know you just play with it that's not right but really what we're here to learn right now so you know you do you and yeah if it doesn't work try something different so we've got this canvas we got this overlay and we've got this scroll view so the scroll view is what we're focused on I think the first thing we're gonna do is we're gonna make a little bigger because you know we want to be able to see these examples a little better and it's gonna make this a little smaller so let's make it let's make it 800 by 600 how about okay and the next thing we're gonna do is we don't want to be able to scroll horizontally so I'm just gonna turn that off horizontal scrolling off and what I usually do if I know for sure that I'm not going to be using horizontal scrolling I just go in head and just delete that bar the scroll bar and that then that vertical scroll bar what we want to do here no that's fine perfect so we've got our scroll view now I'm gonna show you what I think is a problem that unity doesn't really fix for you right off the bat with the scroll view which i think is fine but it took me a while to figure it out it took me a lot of tries to figure it out and it took me a lot of doing it correctly to learn how to do a correct leave without really having to think about it so I feel like that's something people would like to learn so what we want to do is we want to create a couple sections in our scroll view let's pretend this is an inventory and let's pretend we have a backpack and we have I don't know stuff in our base and we have stuff that's out in the wild let's let's go with that I'm in print playing a lot of rimworld lately and I don't know for some reason that just kind of reminded me of a way to do this so let's make our three sections so you're gonna do that under the content of the scroll view let's go back pack duplicate that and let's make our what was it home and world how about that backpack home where else the stuff you're carrying stuff that's in your house and the stuff that's in the world so we want each of these to be a section of items so they're gonna it's just going to be like a square grid sorry a grid of squares and they're just going to be wrap so as soon as you have like six it's gonna wrap you know a new row and so forth and the whole point of this is that the content is going to grow with however many items you have it's not gonna matter you can put a thousand in there and you should be able to scroll it and see all of them that's kind of what we're trying to accomplish so a good way to do this might be to actually get rid of the second two and focus on just one until we have it built correctly and then you can duplicate it so we have a backpack we want a title of this section which is going to be called backpack but let's just call the actual item title and let's add a text component and let's call it backpack so now we've got our backpack title right there it's very out of place but that's okay we'll fix that in a sec now under the backpack we're also going to want a grid of items so let's call this item grid and let's not add a component to that yet first let's go and create a item okay and the item in this case is just going to be an image actually let's let's set this up as if you were actually gonna use it so what I actually want to set up is a button because you want to be able to click it and it have it do something right so we're gonna add a button and an image okay perfect we're not actually gonna code this and set up the buttons and all that that's you know that's that's for you to do and in your own project maybe I'll make a tutorial all that later it's it's fairly simple so item grid item and let's duplicate the sight of a bunch let's say there's I don't know like there's 16 items in your backpack so right now they're all on top of each other you only really see one they're all there but you only see one so we're going to go to this item grid which is the parent of all the items we're gonna add a grid layout group we're going to make the cell sizes yeah 100 by 100 is fine that means each image will be 100 units 500 units that's fine let's put some spacing in here so let's get 4 on X and 4 on Y that means there'll be a space of 4 between each object and a space of 4 like this between each row and as you can see it's just one big column right now and that's because our item grid is so tiny and that's because the backpack is tiny and that's because the content is tiny sorry the content isn't really tiny but the backpack is so here's where things get a little confusing let's see if I can explain this correctly so the content is gonna have three sections backpack home world we want those to be listed vertically so in order to do that very simple we add a vertical layout group so what that does is it takes whatever images or sorry whatever items are in the hierarchy and it sorts them from top to bottom using the actual order of the hierarchy so we are going to also say that it controls the width but not the height actually sorry we don't want to control the width we just want to expand anything that's under it to expand the entire width of the content so backpack for example is now 783 units wide and actually let's turn this back on this content controls or a child control size so now if you can see if you go back to the backpack we can't actually control the width it's just automatically expanded to the size of the content and I think that's preferable for this situation so the height is a hundred but we actually want to make that we want to make the height be variable depending on how many items are in the backpack so easiest way to do that is well the first thing we want to do is we want to add a vertical layout group to the backpack what that does is it takes the title and the item grid and it stacks those one on top of each of another so title will be first item grid will be second okay pretty easy and we also want the backpack to control the width of the title and the with of the item grid it'll just expand them to the size the backpack perfect so we are doing good so you can see I can add as many of these as I want these items and they'll just wrap right so that's fine let's leave it at 20 watts 25 because it doesn't count this one in the numbering here but so we got 25 items in the backpack we have an item grid now here's one of the issues with the item grid it's only a hundred units tall which it can't be because we have four rows of items going which means it has to be at least 400 tall not not to mention the padding in between so in order to get this to be the height that it needs to be we need to add a content size fitter and we need to set vertical fit to preferred and sometimes you have to hit save to have it refresh so you can see as soon as they did that it's now four hundred and twelve units high perfect we're golden let's do one more thing yay let's make this title smaller let's make it like 30 okay so you can see now we have a backpack and we have all these items in the backpack and it's the correct size so the backpack altogether sorry the backpack altogether is not the correct size but the item grid is so we have to add another content size fitter here to the actual backpack and again say preferred size hit save and now it's 442 units high which is perfect because we know that the item grid is 412 and the title is as high as we want it to be that's set by us and it's 30 right now so altogether that makes for 42 we are golden so the next thing would be to add another backpack and we're not really going to call it backpack it's gonna be called home what I meant was another section and let's take that title and let's call it home we don't want to enter after that and let's do this one more time for our world items and let's grab the title let's call it world I can spell correctly and we're golden that's it we're done right but we're not because watch when I push play what happens is I can't scroll and there's very easy reason as to why this is so what's happening here is the content itself is only 300 units high right so this this two here so top to the bottom 300 units again we have to add a content size fitter so if we add a content size fitter to this and we say vertical fit preferred hey look all of a sudden a scroll bar appears and now we can scroll so that's really the whole trick and wow the scrolling is super slow so we can go back to our scroll view and we can say scroll sensitivity I don't know like 30 and we can click on here much better pretty cool hey and you know for for mobile games elasticity is fine on the scrolling but I think we want it too clamped for this purpose then it just stops instead of boring boring boring that's doesn't make any sense if you're scrolling with a mouse wheel so yeah that's it we're good of course we have to push play again and we have to actually go and do that to our game objects one more time because it doesn't save during play mode which is completely fine and then one more thing we're gonna do here is this scroll bar vertical it used to have another scroll bar down here the horizontal one so this bottom padding is set to 17 to make room for that scroll bar we just hit zero and now to bring it right down to the edge and that looks way better and you can see it you can see a little close-up here much better and yeah that's it I mean the rest is all basically design and coding but the UI layout works and what I usually like to do is I like to make the items sorry I'd like to make well an item itself I like to make a prefab and then I can extend she ate instantiate as many of them as I want I like to make the sections a prefab because then what I do in code is I instantiate section section section then for each section I instantiate whatever items I want and yeah it just it's really easy way to do it for you as soon as you instantiate into that it'll automatically everything out for you it's it's great and I don't think there's anything left to explain I think we're good so yeah there you go now we've got so let's maximize this here now we've got a nice little scroll bar with a bunch of horribly padded sections but that stuff's all really easy to change so Oh ed inertia is still there or sorry elastic scrolling but yeah there you go so yeah until next time I'll see you later and keep learning

Channel: BitCutter Taylor

Views: 4,726

Keywords: Unity, UI, Scroll Rect, Scaling, Game Design, UI Design

Id: 3mNdl9He1Ic

Length: 16min 26sec (986 seconds)

Published: Sun May 24 2020