Aug 02 2016

Unity3D (5.x): How to make a quick scrolling text field

Filed under How-To

Setup a scrolling text field in 3 quick steps.

1) Right click in Hierarchy to create a UI > Scroll View
(if you don’t have a Canvas yet, it will make one. if you do – make sure you are adding this to the existing canvas)
2) Expand the Scroll View, and expand the Viewport child (tip: hold alt when expanding to quickly expand all its children).
Place your own thing under the Viewport (an image or Text element – “TextRant” in this case), and delete the place holding “Content” child. The pivot and position anchors for this new child object don’t matter (ignored by scrolling magic). But if it’s a text item, set “Vertical Overflow: Overflow” (not the default “Truncate” which will cut it off at the height of the item’s Rect Transform)
* The ScrollView controls the scroll bars (hiding them if not needed). The Viewport controls the masking (using an image that fills the Scroll View’s entire Rect Transform). The Content must be bigger than the ScrollView in horizontal or vertical dimensions in order for any scrollbar(s) to appear

I’d suggest setting Scroll View’s Scroll Rect (Script) “Movement Tyoe: clamped” so it won’t bounce past it’s limits, and unchecking “Horizontal” so there won’t be any sideways scrollbar.

Viewport2_inspector+ Tip: You can temporarily disable “Mask (script)” in the viewport if you want to see your entire Content object. (i do this to see entire tall text field. so i can drag it’s blue dot edges to be just longer than the text, and less wide for scrollbar)

+Tip: You can’t delete the horizontal scrollbar completely (because ScrollView is constantly deciding whether or not to hide it), but you can expand the vertical scroll bar and the Viewport to fill down to the bottom of the ScrollView.

Text_Inspector2b) If your Content is text and you plan to change it during runtime, add a component : Layout : Content Size Fitter (Script), then set “Vertical Fit: Preferred Size.” This will make it auto size the Rect Trasform to fit the text (so you’ll avoid excessdead space at end of short texts, or cutting off mid scroll because you put a lot more text in).

3) You can auto-arrange a bunch of items inside this scrolling field. Set your new Content to be a panel with a certain size, then add the component : Layout > Vertical Layout Group (or Grid Layout, etc.). Now you can add multiple children to this panel and they will be auto-sized and spread out (they can be of any type: toggle, button, etc. Usually you make one, duplicate it, and go back to tweak each instance)

* Note: for some reason my text keeps getting slightly cut off slightly at left. If I indent Content or Viewport using it’s Rect Transform (PosX:1) the change just gets overwritten back to zero after I press play. huh. bug?

Final thought:
As of August 1, 2016 this is a strangely obscure trick in Unity (or maybe Google just isn’t showing me relevant results when i search “Unity ScrollView.” Seems like there are no tutorials or explanations or manual entries on this object, or they’re ridiculously overlong)
Thanks to this youtube video for help:

Print Friendly, PDF & Email

One response so far

One Response to “Unity3D (5.x): How to make a quick scrolling text field”

  1.   tenukion 31 Jan 2017 at 9:21 pm     Reply1

    For autoscroll to bottom you may need to use a coroutine to wait a few frames before calling scrollView.verticalNormalizedPosition = 0f; Mine wouldn’t go all the way to the bottom until I did that.

Trackback URI | Comments RSS

Leave a Reply