WRPG template does not work correctly with scrolling text

[rakkar]

Repro:
Import Dialogue System for Unity 2.2.12
Drag Dialogue manager into a new scene
Change Dialogue UI to WRPG
Add dialogue system trigger to scene with action start conversation: Dead enemy
Change "This was one of the evil emperor's guards." to a long or very long paragraph, I just paste something in
Press play

With a very long paragraph
For a long time there is no text in the Scroll content panel
The scrollbar does not work / does not do anything even when text starts to appear
Expected: Behavior is the same regardless of the length of the text

With a paragraph just slightly larger than the panel:
The scrollbar is locked at the bottom of the panel. You can't read the initial dialogue as it fills in, and scrolling is effectively not possible until the typewriter effect completes.
Expected: Scrollbar should fit visible text at the time, and automatically scroll as the typewriter effect fills out the screen. If the user scrubs the scrollbar while the typerwriter effect is active, the auto-scroll should stop.

[Tony Li]

Hi,

To keep the prefab simple, it doesn't use auto-scrolling as the typewriter types. Instead, it scrolls down to the bottom position that it will use when the text is done typing. Most people don't fill more than the entire window with a single dialogue entry, so I opted to make the UI simpler to understand and customize instead.

If you need to set up auto-scrolling for text that won't fit in the window, please see: Autoscroll Setup. To set up auto-scrolling, you'll need to create an additional text element (referred to as "sizer text") that mirrors the visible text element. The sizer text grows as the characters are typed, and the scrolling is based on the length of the sizer text.

[rakkar]

I did as you suggested but it scrolls exactly the same as with the OnCharacter Unity Event, meaning the scrollbar is locked to the bottom and the user cannot see all of long text.

Most likely where I went wrong is due to the manual being ambiguous and leaving out steps. To help with this, and also clarify what I did, I rewrote the steps in a more clear and exact way. Feel free to use this to help others once we've identified the problem.

Tick Auto Scroll Enabled.
1. Find "Subtitle Text" and remove the OnCharacter UnityEvent. Also check Auto Scroll Enabled.

Create a copy of the subtitle text without a typewriter effect. Assign it to the typewriter effect's Auto Scroll Settings > Sizer Text. It usually works best to make Subtitle Text a child of Sizer Text and align Subtitle Text to the upper left corner of Sizer Text.
2. Right click on the Text component on "Subtitle Text" and select copy. Create a GameObject child of "Subtitle Text" and call it "Subtitle Text Copy"
3. Paste the Text component as new component of Subtitle Text Copy
4. Change Rect Transform of Subtitle Text Copy to Left, Top, Right, Bottom = 0. Anchors min = 0,0. Anchors max = 1,1. Alternatively, click the anchor presets image and the lower right image while holding down shift and alt.
5. Under Subtitle Text, find Unity UI Typerwriter Effect. Expand Auto Scroll Settings. Click Auto Scroll Enabled. Assign "Subtitle Text Copy" to Sizer Text. Assign the game object named "Scroll Rect" to the fields "Scroll Rect" and "Scrollbar Enabler".

Add a Layout Element to the subtitle text and tick Ignore Layout. This allows the scroll rect's content to size itself based on Sizer Text.
6. On Subtitle Text Copy created in step 2, add Layout Element and tick Ignore Layout

Added a Content Size Fitter with Vertical Fit set to Preferred Size to the scroll rect's content. Added a Vertical Layout Group with both Control Child Size checkboxes ticked and no other checkboxes ticked.
7. Find "Scroll Content" and add Content Size Fitter if it doesn't already exist. Verify Vertical Fit is set to preferred size.
8. Find "Scroll Content" and add Vertical Layout Group, if it doesn't already exist. Both Control Child Size checkboxes should be ticked. All other checkboxes should be unchecked.

[Tony Li]

Hi,

Those details you've added look good. I'll add two more:

- Make sure the Subtitle Text and Sizer Text both have their alignment set to Left Top.

- When using TextMesh Pro, it's much simpler. Just tick Auto Scroll Settings > Enabled. You don't have to deal with sizer text.

Here are some example scenes from the forum:

DS_AutoScrollExamples_2020-10-27.unitypackage

I compiled them into a single package. There's a scene for UI Text and a scene for TMP. (Exported from Unity 2019.3.)

If these instructions work for you, I'll put them together with step by step screenshots. Otherwise, if you have more questions, we can get them sorted out first.

[rakkar]

The forum example you linked doesn't work. The scene wasn't even setup to start a conversation, and even when you do it doesn't work - for example Auto Scroll Enabled was not even checked.

AutoScrollExample.PNG (109.14 KiB) Viewed 1107 times

Can you follow the steps I wrote? I set it up specifically for the default package downloaded from the asset store and it only takes a few minutes to do so. This isn't a problem just for me, this is following the instructions on your website, so anyone who needs this feature is going to have the same issue.

[Tony Li]

Hi,

I think something is going wrong in your project. I imported DS_AutoScrollExamples_2020-10-27.unitypackage into a Unity 2019.3 project with DS 2.2.12, and Autoscroll Enabled is definitely ticked:

autoscrollTicked.png (101.32 KiB) Viewed 1106 times

I've combined your steps and mine, and reordered them a little so it needs fewer screenshots:

1. Start with a dialogue UI that uses a scroll rect, such as WRPG Template Standard Dialogue UI, or create a new dialogue UI that uses a scroll rect.

2. Create a copy of the Subtitle Text GameObject.

• Name it "Sizer Text".
• Move it to be the first child of Scroll Content.
• Move Subtitle Text to be a child of Sizer Text.
• Remove Sizer Text's typewriter effect.
• Set the Rect Transform anchor to Left Top. Set the Pivot to X=0, Y=1.
• Set the Text component's Alignment to Left Top.

01_sizerText.png (89.06 KiB) Viewed 1106 times

3. Inspect the Scroll Rect GameObject. Make sure it has a UI Scrollbar Enabler component. Assigning the fields (Scroll Rect, Scroll Content, and Scrollbar) is optional. If they're unassigned, the component will find them at runtime.

4. Inspect Subtitle Text.

• Set the Rect Transform anchor to Horizontal Stretch Top. Set the Pivot to X=0, Y=1. Set Pos Y=0.
• Set the Text component's Alignment to Left Top. The Text settings should be the same as Sizer Text.

02a_subtitleText.png (86.7 KiB) Viewed 1100 times

• Inspect the Unity UI Typerwriter Effect component. Expand Auto Scroll Settings. Tick Auto Scroll Enabled. Assign the Scroll Rect GameObject to the fields Scroll Rect and Scrollbar Enabler. Assign the Sizer Text GameObject to Sizer Text.
• If the OnCharacter() event is assigned ScrollRect.verticalNormalizedPosition, delete it.
• Add a Layout Element and tick Ignore Layout. This allows the scroll rect's content to size itself based on Sizer Text.

02_subtitleText.png (100.98 KiB) Viewed 1106 times

5. Inspect Scroll Content.

• Add a Vertical Layout Group if one doesn't exist. Set Child Alignment to Upper Left. Tick Control Child Size Width & Height and optionally Child Force Expand Width. If you don't tick Child Force Expand Width, make sure the Subtitle Text's width spans across the Scroll Content's full width. Untick the other checkboxes.
• Add a Content Size Fitter if it doesn't exist. Set Vertical Fit to Preferred Size.

03_scrollContent.png (83.02 KiB) Viewed 1100 times

[Tony Li]

Okay, I'm done editing. I added another screenshot to help clarify the steps, and added a couple of optional steps that will make setup simpler.

[rakkar]

Thanks for the support. I got this working now, albeit with difficulty. I wrote down the issues I had

"Set the Rect Transform anchor to Left Top. Set the Pivot to X=0, Y=1." It isn't possible to adjust the anchor because of Vertical Layout Group in Scroll Content

"Add a Layout Element and tick Ignore Layout." should be "Add a Layout Element to Subtitle Text and tick Ignore Layout."

As an extra step, I had to set the Subtitle Text Rect Transform to Left,Top,Right,Bottom = 0, anchors minX = 0, minY=0, maxX=1, maxY=1

"Assigning the fields (Scroll Rect, Scroll Content, and Scrollbar) is optional. If they're unassigned, the component will find them at runtime." It doesn't actually find the scroll bar as the scroll bar is not a child element in the default, and did not work until I assigned it

[Tony Li]

Thanks for your notes.

"Set the Rect Transform anchor to Left Top. Set the Pivot to X=0, Y=1." It isn't possible to adjust the anchor because of Vertical Layout Group in Scroll Content

I'll remove the first sentence. The Pivot should still be 0,1.

"Add a Layout Element and tick Ignore Layout." should be "Add a Layout Element to Subtitle Text and tick Ignore Layout."

I'll make sure that's clear.

As an extra step, I had to set the Subtitle Text Rect Transform to Left,Top,Right,Bottom = 0, anchors minX = 0, minY=0, maxX=1, maxY=1

I just set Pos X=0, Y=0. But it won't hurt to add that step.

"Assigning the fields (Scroll Rect, Scroll Content, and Scrollbar) is optional. If they're unassigned, the component will find them at runtime." It doesn't actually find the scroll bar as the scroll bar is not a child element in the default, and did not work until I assigned it

I'll remove the "optional" and specify in the step that you should assign them.