How Do I Create a Scrolling Text Window in Unity 4.6?

Question

I'm having a lot of trouble trying to understand the documentation for ScrollRects in the new UI system. It looks like any ScrollRect has to be contained in a Panel object for some unknown reason, and like there's some constraint causing the Panel to either be the size of the screen, or (if reduced) to squash the actual ScrollRect to a tiny size. What do I need to do to set up a simple, large scrolling window with a block of text in it?

Answer 1

Answer by GMT · Dec 20, 2014 at 11:24 PM

I just put that in myself from this Brackeys video:

https://www.youtube.com/watch?v=MWOvwegLDl0

If I hadn't seen that video I don't think I'd have ever figured it out!

Add comment · Show 1 · Share

BMRG14 · Oct 15, 2016 at 08:26 PM 0

Share

This video was great! Thanks! :)

Answer 2

Answer by Mmmpies · Dec 20, 2014 at 10:23 PM

You should be able to create a panel with a ScrollRect component and then child your text to it. On the Panel with the ScrollRect put your text as the content.

Doing all this without testing first which normally goes really well!

You can also put a mask on the panel with the ScrollRect and attach whatever scrollBars you want.

Just tried it and it works! If you put a ContentSizeFilter on the panel and drag the text so it's doesn't truncate the text at all. That's the text you're expanding not the panel.

EDIT:

OK now I've finished what I'm doing, ignore all the other bit's just look at the textScrollRect and child Text content...

panel with ScrollRect

That's what the parent panel looks like and it has this as it's additional components

ScrollRect panel Components

And I've reached my attachment limit. I'll add a comment for the screen grab of the Text content.

textscrollrect.png (35.1 kB)

textscrollrect2.png (30.3 kB)

Add comment · Show 2 · Share

Mmmpies · Dec 21, 2014 at 12:05 AM 0

Share

![Text][1]

the scrollbar will then allow you to scroll up and down the text.

As for the resize you need to look at the Anchors, also shown in the images. [1]: /storage/temp/37367-textpanel.png

textpanel.png (34.3 kB)

KrisSchnee · Dec 22, 2014 at 01:32 AM 2

Share

Thanks to the writers above for dealing with my snippily-worded question. (Tough to learn a new feature while sick and rusty on coding.)

It looks like part of my problem was that the Panel's component "Canvas Scaler" had its "UI Scale $$anonymous$$ode" set to "Constant Pixel Size", which baffled me because I kept trying to convey "I want this box to be small" and having it fill half the screen in Game $$anonymous$$ode. Changed that setting to "Scale With Screen Size" and that helped. It might not be the best choice in your program, though.

To recap for others' reference: $$anonymous$$ake a Panel. Resize to taste. Under it (ie. as a child object), make a Text object. (Optionally, put an Image under the Panel ins$$anonymous$$d and the Text under that.) Give the Panel/Image a Scroll Rect component, and set its Content to be the Text. The Text will need to be made larger than the parent object. It should work now as a click-and-drag block of scrolling text, but be visible outside the parent object. That's bad, so give the parent a new $$anonymous$$ask component. (Apparently you can also add an Image to get fine control over the mask shape.) You'll probably want to disable horizontal scrolling, on the Scroll Rect script.

The scrollbar part: $$anonymous$$ake a UI\Scrollbar object. Set to BottomToTop mode. $$anonymous$$ake it a sibling of the Panel/Image, then set that second object's "Horizontal Scrollbar" slot to the new object. You'll likely want to set the rect transform's anchor (using that square bullseye thing in the Inspector) to lock it to a particular side of the parent.

Answer 3

Answer by RJ45 · Aug 08, 2016 at 05:04 PM

link text

I have uploaded a working sample after wasting a few hours on this. The above solution didn't work perfectly.

scrollingtext.zip (9.3 kB)

Add comment · Show 1 · Share

Kabeza · Jun 23, 2017 at 08:18 PM 0

Share

thanks, after mínimum changes I can use it on my game!

How Do I Create a Scrolling Text Window in Unity 4.6?

3 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions