Uniy3D: How to implement scrolled UI with texts

Unity3D 4.6+ comes with the new UI system that makes implementation of scrolled texts a piece of cake. This article explains, step-by-step, how to make such scrolled effects.

Add an UI Image by clicking the menu item: GameObject > UI > Image

Add a ScrollRect component to the UI object just renamed (i.e. ScrollView)

Right click the ScrollView object, and a child Text UI object:

Set a very long string for the text in the inspector and adjust the font size

Select the ScrollView game object, and in the inspector, set the “Content” to be the text UI object just created. This notifies Unity3D that the ScrollRect will take the text as the content to scroll.

Now that you can see the long text “overflows” the rectangle of the ScrollView.

To make the overflown text to be clipped right within the rectangle region of the ScrollView, we need to use

Now, the long text is properly clipped!

Next, Uncheck the “Show Mask Graphic” option in the inspector, and change the text color to white. This will make the ScrollView look transparent:

Select the ScrollView, and in the inspector, uncheck “Horizontal” option, and make the scroll to happen only vertically. Run the App, and drag the text in the game view, you will clearly see the scroll effect!

The last step is optional: if you would like to have the scrollbar on the right side, you can proceed! Add a scrollbar UI below the canvas UI object by right click the Canvas > UI > Scrollbar

Select the ScrollView UI object, and in the inspector, set the “Vertical ScrollBar” object to be the just created scroll bar.