Unity3D – Tutorials – UI – Scroll Rect – Text

Inside a Scrool Rect you can scroll a text greater than the Scroll Rect Area.

Scrool Rect – Yes ScroolBars

0. MAIN TOP MENU> GameObject> UI> Canvas

1. MAIN TOP MENU> GameObject> UI> Text

2. MAIN TOP MENU> GameObject> Empty Object, rename it ScrollRectObj

3. Hierarchy> select ScrollRectObj> Inspector> ‘Add Component’
> Scroll Rect (Transform component will be authomatic removed)
> Image
> Mask

4. Parent as show below:

– Canvas
-> ScrollRectObj (child of Canvas)
->> Text (child of ScrollRectObj)

5. Setup size and position:

– Inspector> ScrollRectObj: Width= 100 Height= 100 Pos XYZ= 0,0,0

– Inspector> Text: Width= 100 Height= 400 Pos XYZ= 0,0,0

The Text is greater than ScrollRectObj and it will scroll from top to bottom

6. Setup ScrollRectObj

– Inspector> ScrollRectObj> Scroll Rect (Script)> Content, DRAG AND DROP from ‘Hierachy> Text’ here

7. Vertical Scroll Bar

a. Hierarchy> RMB over Canvas> UI> Scrollbar

– Canvas
-> ScrollRectObj (child of Canvas)
->> Text (child of ScrollRectObj)
-> Scrollbar (MUST BE CHILD OF CANVAS)

b. Hierarchy> select Scrollbar DRAG AND DROP Inspector> ScrollRectObj> Scroll Rect (Script)> Vertical Scrollbar

c. Inspector> ScrollBar> Rect Transform> Rotation Z=90
OR
c. Inspector> ScrollBar> Scrollbar (Script)> Direction> Top To Bottom

3. Play and enjoy!