Typewriter effect and Size fitter

Announcements, support questions, and discussion for the Dialogue System.
User avatar
Shinos
Posts: 59
Joined: Tue Jan 17, 2023 10:51 am

Typewriter effect and Size fitter

Post by Shinos »

Hi, so i am using a bubble speech type of dialogues as described on the forum
([HOWTO] How To: Show Overhead Conversation Bubble Text) , with the typewriter effect (and textmeshpro), but there is a problem:
when there is the typewriter effect enabled, the panel gets to the full size of the phrase even if we are at the beginning of it, is there a way to make it dynamically size as the words get typed by the typewriter?

i'll show you what i mean :
This is what happens now
Senza titolo.png
Senza titolo.png (96.26 KiB) Viewed 1031 times
This is what i want to achieve (i simulated it by just typing in the editor, it's not in game)
Senza titolo1.png
Senza titolo1.png (97.65 KiB) Viewed 1031 times
User avatar
Tony Li
Posts: 22119
Joined: Thu Jul 18, 2013 1:27 pm

Re: Typewriter effect and Size fitter

Post by Tony Li »

Hi,

You can make your own subclass of AbstractTypewriterEffect to do that. then use your subclass on your subtitle text instead of TextMeshProTypewriterEffect.

The Dialogue System's built-in typewriter effects reserve the complete space at the beginning because it generally looks more polished, especially when the text is center-aligned. Otherwise, for example if the text is center-aligned, the characters will appear to grow out of the center instead of appearing in their correct positions.
User avatar
Shinos
Posts: 59
Joined: Tue Jan 17, 2023 10:51 am

Re: Typewriter effect and Size fitter

Post by Shinos »

I understand but i'd prefer to have it that way for the use case of this project, for the common dialogue manager usage it is cool to have it the default way , but in bubbles like in the pics i shared i find it to be too "static" , i really need to change that and i hoped there was something to get it a lil easier but that's ok; i was also already looking at UnityUITypewriterEffect script but i'll be honest i'm kinda missing where i should do the change for getting the desired behaviour please could you help me.
User avatar
Tony Li
Posts: 22119
Joined: Thu Jul 18, 2013 1:27 pm

Re: Typewriter effect and Size fitter

Post by Tony Li »

TextMesh Pro has issues with changing the text content quickly, although you can change the maxVisibleCharacters property like TextMeshProTypewriterEffect does. You can, however, change UI Text's text content quickly, so you can use this simpler typewriter effect with UI Text:

CustomTextTypewriter.cs

Code: Select all

using System.Collections;
using UnityEngine;
using PixelCrushers.DialogueSystem;
using UnityEngine.UI;

public class CustomTextTypewriter : AbstractTypewriterEffect
{
    public override bool isPlaying => m_isPlaying;

    private Text m_text;
    private string m_fullText;
    private bool m_isPlaying = false;

    public override void Awake()
    {
        m_text = GetComponent<Text>();
        base.Awake();
    }

    public override void Start() {}

    public override void StartTyping(string text, int fromIndex = 0)
    {
        m_text.text = text;
        StartCoroutine(TypewriterCoroutine(text, fromIndex));
    }

    private IEnumerator TypewriterCoroutine(string text, int fromIndex)
    {
        m_fullText = m_text.text;
        int length = fromIndex;
        var delay = new WaitForSeconds(1 / charactersPerSecond); // Simple method; can't go faster than 1 char/frame.
        while (length < m_fullText.Length)
        {
            length++;
            m_text.text = m_fullText.Substring(0, length);
            yield return delay;
        }
        Stop();
    }

    public override void Stop()
    {
        m_text.text = m_fullText;
    }

    public override void StopTyping()
    {
        Stop();
    }
}
User avatar
Shinos
Posts: 59
Joined: Tue Jan 17, 2023 10:51 am

Re: Typewriter effect and Size fitter

Post by Shinos »

Hi, first of all thank you,
I'm trying to use the new script but I can't get it to work, also so this would supposedly only work with non-textmeshpro? what are the problems for textmeshpro? I didn't understand if there is a way to get it to work also for TMP, because i'm strictly using only that for my games since getting nice text with the default unity text is really a pain.

(PS: ok I got it to work with the standard UI, but the question for TMP is still valid,
Also i was trying to speed it up but i noticed the "// Simple method; can't go faster than 1 char/frame." i just changed the characters per seconds and it worked, so what does this refers to :?: it is done in a different way in the standard script ?
Basically since i am replacing the standard typewriter script i am trying to understand if i am actually missing features from the standard script, if yes what are those? )
User avatar
Tony Li
Posts: 22119
Joined: Thu Jul 18, 2013 1:27 pm

Re: Typewriter effect and Size fitter

Post by Tony Li »

Hi,

TMPro uses caching, and it gets stuck if you try to change the text property too fast, even if you call ForceMeshUpdate() and similar methods. It eventually catches up, but you'll see blank spaces until it finishes rendering.

The note about "//Simple method" is because it will wait a minimum of one frame between characters. So if you're playing at 60 fps, Characters Per Second will be capped at 60. The typewriter effects that ship with the Dialogue System use a more sophisticated technique that can print multiple characters per frame if necessary to support higher Characters Per Second values. They also process rich text codes, which the example I provided above doesn't do since it was just a simple example of how to write and use a custom typewriter effect.
User avatar
Shinos
Posts: 59
Joined: Tue Jan 17, 2023 10:51 am

Re: Typewriter effect and Size fitter

Post by Shinos »

Hi,
Ok so basically if i want to achieve my goal either do i use Unity basic ui or I give up, that's kinda sad but ok i guess.
If i can ask for one last help, how can i merge the new script that you sent in the typewriter efffects script that ships in the dialogue system? i am trying to tinker with the code since yesterday but i am not getting good results, and i don't wanna mess your code too much/miss functionalities of the system. I'm pretty sure that if'll just use just the simple code i'll get trouble later when i'll try to introduce/try other things.
User avatar
Tony Li
Posts: 22119
Joined: Thu Jul 18, 2013 1:27 pm

Re: Typewriter effect and Size fitter

Post by Tony Li »

Hi,

Tip: Don't directly modify UnityUITypewriterEffect or TextMeshProTypewriterEffect. Make subclasses. This way you won't lose your modifications when you update the Dialogue System.

I haven't checked whether Text Animator for Unity can do the typewriter style you're looking for. If so, you could consider using that. It has Dialogue System integration.
User avatar
Shinos
Posts: 59
Joined: Tue Jan 17, 2023 10:51 am

Re: Typewriter effect and Size fitter

Post by Shinos »

hi,
thanks i'll look for text animator and maybe when it will be a lil discounted i will take it, but for now i would like to fix this with what i have ç_ç could you give me a tip to which section to look in your code to enable the resizing, i'll try doing subclasses but rewriting the entire code to re-implement every functionality you did, like the rich text, would take an abnormous amount of time to me currently, i'm just trying to see if i can just "merge" the two logic.
User avatar
Tony Li
Posts: 22119
Joined: Thu Jul 18, 2013 1:27 pm

Re: Typewriter effect and Size fitter

Post by Tony Li »

Try this:

Add this subclass to your TextMesh Pro subtitle text:

CustomTMProTypewriter.cs

Code: Select all

using PixelCrushers.DialogueSystem;
public class CustomTMProTypewriter : TextMeshProTypewriterEffect
{
    private void Update()
    {
        if (isPlaying)
        {
            var bounds = textComponent.textBounds;
            layoutElement.preferredWidth = bounds.size.x;
            layoutElement.preferredHeight = bounds.size.y;
        }
    }
}
Also add a Layout Element component the subtitle text. Tick Min Width and set a width such as 256. Tick Preferred Height. Ignore the Preferred Height value; the subclass will set it at runtime.
Post Reply