Uniy3D: How to implement scrolled UI with texts

20 Dec

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

image  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:

image  image 

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.

image image

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

image image

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:

 image image


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!

image image

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

image image image

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


Now run the app, drag the scroll bar, everything should be fine!

1 Comment

Posted by on December 20, 2014 in Programming, Unity 3d


Tags: , , , , , , , , , , ,

One response to “Uniy3D: How to implement scrolled UI with texts

  1. thekorracorp

    September 7, 2015 at 4:03 am

    Thank you so much! I got this working in my project.😀


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: