Scrolling and scrollbars in Unity - Unity UI tutorial

scrolling may be useful in many elements of your game for example inventory screen or leaderboard in this episode i'll show you how to create a simple scrollable list and also how to create netflix-like horizontal list with scrollbar here i have a simple text list with some badly organized nics don't worry i'll work on that later as you can see when i run the game the list does not scroll even though i have some more lines outside of the screen let's fix that the first thing we need to do is to put all of this text elements into one parent game object right click on the canvas in here here and select create empty game object let's call it content then resize it to fill the entire white space and select all text elements to drag them into the newly created object great now let's organize them a bit in the content object click add component and add vertical layout group that immediately fix some of the styling issues but we can still do even better to give our text some space in padding options i'll type 24 from all sides we also can have a bigger spaces between each row using this spotting field in my case i'll type 16 then add content size fitter and set vertical fit as the preferred size that way our content game object will resize to cover all texts finally very important step set content object as a scroll area child in the hierarchy great we can now finally create a scrolling script in scroll area click add component and add scroll rect here assign our content object and make sure that scrolling is only vertical not horizontal that's it press play and try to scroll like in the mobile device press and drag the mouse cursor on the screen you can also use mouse scroll but you might find it a bit too slow to fix that change the scroll sensitivity to something like 20 much better you might have already noticed one issue though our text overflows the white box here at the top if you watched my previous video about unity wire masking you might already know how to fix that stop the game and add the rectangle mask 2d component to our scroll area it will mask out everything outside it additionally for optimization purposes it's a good practice to set the same object with the mask as a viewport now when i press play and scroll you can see our perfectly masked out ui the next example will be this netflix-like ui i have listed here different episodes from my coco code channel and i like to have it nicely done with the scroll bar like in the list at the bottom i've already prepared scroll area and content game objects let's add all necessary components in content add horizontal layout group change left and right padding to 22 this time and change its spacing to 16. then add content size fitter and this time set horizontal fit to preferred size you may need to change the content position after that change finally in the scroll area add scroll rect assign content uncheck vertical scroll change sensitivity to 20 and set our scroll area as a viewport great we can now run the game and test our scrolling everything works fine except one thing when i try to start scrolling between images nothing happens we can easily fix that simply stop the game and add image component to our content object that way every gap will also be treated as a scrollable area don't forget to change its color to transparent or in my case just to black now let's add the scroll bar right click on the scroll area in hierarchy and select ui scroll bar change its position and size to fill almost the entire width of the screen then change its color to very transparent white that way it will be much easier to distinguish the handle from the background finally to make it work click on the scroll area object and drag in the newly created scroll bar here into the horizontal scroll bar field you can see that our scroll bar has immediately changed its size and when i run the game it works as intended that's it for this video be sure to subscribe if you like to be notified about any future unity ui videos and don't forget to like it to see more such tutorials see you in the next one you

Channel: Coco Code

Views: 91,321

Keywords: unity, cococode, bionicl code, bionicl, unity3d, Maciej maj, tutorial, guide, playfab, coco code, unity gui, graphical user interface, Unity scrolling, unity list, unity list scroll, unity list scrolling, unity scroll rect, horizontal layout group, vertical layout group, Netflix scrolling, leaderboard in Unity, simple unity scrolling

Id: rAqyi85IAJ0

Length: 5min 42sec (342 seconds)

Published: Sun Nov 29 2020