TextMesh Pro with ScrollRect

I initially created a ScrollView (scroll rect) using Unity UI, and replaced the Content child object inside the ViewPort with my TextMesh Pro UGUI Text object and got it to work. Afterwards I looked at the TMP examples just to see how it was accomplished by the creator out of curiosity, and saw a 2D Rect Mask was used directly on the object using the scroll rect script (I believe in lieu of the Viewport object, which is used as a mask).

  1. Is this a cleaner/more efficient way to use Scroll Rects with TMP? Are there any drawbacks to using the Viewport object as my mask (doesn’t use 2D Rect Mask)? This is for a 2D game by the way.

  2. Is there a way to make the Rect Transform of the TMP UGUI Text object auto scale to fit all text inside the object? I noticed with my original setup using Unity’s Scroll View, if I manually made the Rect Transform larger than the text that was being displayed, then the user could still scroll and just see nothingness. I want to prevent that by having the box scale with the text - if there’s only a little bit of text, then the box won’t go past the viewport and scrolling will be disabled. However if there’s a lot of text, it will go past the viewport and scrolling will be allowed. I looked at the examples of word wrapping but none seemed to do it.

  1. I mostly use a simple Rect Mask 2D in the viewport object (parent of Content). This way I can easily control how much is visible from the scroll rect and it is not using any stencil magic and therefore is more performant than a mask component.
  2. Use a content size fitter with preferred size for vertical fit:
    3277802--253485--upload_2017-11-6_9-1-13.png
2 Likes

Is the difference in performance between the 2 methods significant at all, mobile or otherwise?

The 2D RectMask does offer better performance over the Stencil mask.

1 Like

So I replaced the Mask on my Viewport with the RectMask2d and it works. However I have an issue with the content size fitter.

So using preferred size for vertical height does indeed get the rect transform and the yellow margin borders to exactly fit the text in the TMP UGUI object. However it doesn’t keep its position relative to the viewport, it always resets itself to 0X, 0Y. I want to keep the top border of the TMP object lined up with the Viewport while using a content size fitter.

Changing the anchor presets from stretch, to center middle, center top, etc etc doesn’t change the issue of it resetting its position every play.

EDIT: Well, learned about pivots. For anyone else experiencing this, when you click the anchor preset icon, holding shift allows you to set a new pivot for the object. I set the pivot to the upper left corner, so now when it’s reset to (0,0) it treats the origin as upper left instead of middle, and stays put. Still researching whether the constant position resets to the origin should even be happening or not, though.

How do you get this to work with dynamic text that you add via script?

The content size fitter can also handle changes. So basically the same way.

1 Like

Hey Zymes, I can confirm Johannski’s answer. That was actually my reason for trying to find this functionality - I have text added dynamically and I needed the rect transform to always fit the text exactly even when changed.

Would one of you guys mind uploading a screenshot of the setup please? Im having a little trouble getting TMP working with scrollview.
Cheers!

@Johannski Thank you! This had been bothering me with not only Text, but other stuff!

Here’s a screenshot. I “Stretch/Stretch” the content holder to fit the parent. Then “Bottom Stretch/Stretch” the content holder to Fix to bottom.

No layout stuff are attached to TMP text -just a plain old TMP text.

3375983--264814--Capture.PNG

2 Likes

Thank you this soved my problem

1 Like

Thanks, I had the Content Fitter but not eh Horizontal Layout group. Much appreciated