web analytics

Unity Scrollview : Scrolling Text

Hi, in this tutorial we are going to show you, how to make a Unity Scrollview.

Scroll Views let you make a smaller area on-screen look ‘into’ a much larger area, using Scroll bars placed on the sides of the Scroll View.unity scrollview 2

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

  1. First create a Canvas.

unity scrollview 3

  1. Right click on your Canvas and create a Panel also remove ‘Image’ Component from your Panel that your just created.

unity scrollview 4

  1. Now create an empty gameObject inside your Panel, name it ScrollView, give it width and height according to your need.

unity scrollview 5

  1. Add these components to it – Image, RectScroll and Mask.

unity scrollview 6

 

Variables in Scroll Rect
Content : Content is the reference to the ‘Rect Transform’ on the UI element being control by the ScrollRect. It should be a child of the gameObject with ScrollRect on it.
Horizontal : Enable it if you want horizontal scrolling.
Vertical : Enable it if you want vertical scrolling.
HorizontalScrollbar : Optional Scrollbar object linked to the horizontal scrolling of the ScrollRect.
VerticalScrollbar : Optional Scrollbar object linked to the vertical scrolling of the ScrollRect.
  1. 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.
  2. 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.

unity scrollview 7

 

  1. Now drag the TextField to the Content slot in the ScrollRect Component of your ScrollView.

unity scrollview 8

  1. Now press the Play Button and test your ScrollView, Hurray!

Wait! Wait! Wait! Party is not over yet.

 Lets add Scrollbar to our ScrollView.

 

  1. Create Scrollbar inside your Panel.

unity scrollview 9

  1. Set Direction variable of Scrollbar component to Bottom-Top.

unity scrollview 10

  1. Adjust Scrollbar height and place it beside your ScrollView.

unity scrollview 11

  1. Drag your Scrollbar to the ScrollRect component of ScrollView gameObject in the ‘Vertical Scrollbar’ slot.

unity scrollview 12

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *