Hi, in this tutorial we are going to show you, how to make a Unity Scrollview.
unity scrollview, unity scrollbar ,unity scrolling text
What are Scroll bars for?
Scroll bars can be used to control scroll rects to navigate content in your UI. With new version of Unity UI, you don’t need Scroll bars though, but its your choice if you want to keep it or not, usually we keep it to track how much content is below or above the mask.
What’s ScrollRect ?
The Scroll Rect is a rect that can be scrolled horizontally or vertically. ScrollRect will not do any clipping on its own. Combined with a Mask component, It can turn into a scroll view.With Unity UI, we can use ScrollRect to create Scroll Views.
What’s Mask ?
Masks are used to hide part of a UI Image element. They can be used to define an area to animate images into, or in conjunction with the Scroll Rect component to achieve a scrollable space. To know more about image masking refer here.
Lets create our Unity Scroll View
- First create a Canvas.
- Right click on your Canvas and create a Panel also remove ‘Image’ Component from your Panel that your just created.
- Now create an empty gameObject inside your Panel, name it ScrollView, give it width and height according to your need.
- Add these components to it – Image, RectScroll and Mask.
- Now we know about these important variables of the ScrollRect, Lets make a TextField with a lots of text in it, which will be scrollable.
- Right click on the ScrollView gameObject that you created, and create a TextField inside it, paste some dummy text in your TextField, Set the parameters as shown in the image.
- Now drag the TextField to the Content slot in the ScrollRect Component of your ScrollView.
- Now press the Play Button and test your ScrollView, Hurray!
Wait! Wait! Wait! Party is not over yet.
Lets add Scrollbar to our ScrollView.
- Create Scrollbar inside your Panel.
- Set Direction variable of Scrollbar component to Bottom-Top.
- Adjust Scrollbar height and place it beside your ScrollView.
- Drag your Scrollbar to the ScrollRect component of ScrollView gameObject in the ‘Vertical Scrollbar’ slot.
Now you can scroll your content with both ScrollRect and Scrollbar, With this we will be ending our unity scrollview tutorial here, Stay tuned for more tutorials on Scrollviews.