Blinking cursor when the text is finished

[AoF]

Hello,

I have two images of a cursor, and I'd like to show it blinking when the text has been fully written out. Some important context is that I already have the continue button spanning the whole screen, because I want the player to be able to click anywhere to continue text. But, I want this blinking cursor to be on the right side of the dialogue text.

Thanks

[Tony Li]

It's easier since you're using TextMesh Pro. But you'll still need to write a little script. It's possible that TMP's Extras contains a script to do this already; I don't remember.

First, add the cursor as a final character. You'll need to find a character in your font that looks like a cursor. You can add a script with an OnConversationLine method that adds the character:

Code: Select all

void OnConversationLine(Subtitle subtitle) {
    subtitle.formattedText.text += "|"; // EXAMPLE.
}

From there, you can animate the last character in two ways:

1. You can change the last character's color between its normal color and a color with zero alpha (invisible) by adapting TMP's VertexColorCyler.cs script.

2. Or you can write a coroutine that alternates the TextMeshProUGUI's maxVisibleCharacters property between the full text length (including the cursor character) and one minus that length. Kick off this coroutine in the typewriter effect's OnEnd() event.

[AoF]

Well, I have an image, but I already know how to use images in text with TMP, so I think your advice still applies.

Since it's an image and I want to toggle between two versions of that, can I just write some code in that OnEnd that's like this:

Code: Select all

if last character is a cursor
  if last character is cursor1
    change it to cursor2
  else
    change it to cursor1
else
  add cursor1 to the end of text

[Tony Li]

Yes. It's probably easiest to have a coroutine that has two versions of the entire text string (one with the visible cursor, one without) and swap between them every 0.5 second or so after the typewriter has run its OnEnd() event.

[AoF]

OK, I think that means it's the OnEnd that should start the coroutine?

[Tony Li]

Yes. You can't assign a coroutine directly to OnEnd(). But you can assign a method that starts the coroutine.

[AoF]

Yes. You can't assign a coroutine directly to OnEnd(). But you can assign a method that starts the coroutine.

Makes sense, thanks!

[AoF]

As far as I can tell, this event receives no parameters. How do I get the text inside the that OnEnd()? I know I could pass the text in as a field, but I have a feeling that would be the incorrect way to do things.

[AoF]

Yeah, as I suspected, this is having no effect on the text I see on the screen:

Code: Select all

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;
using System;

public class BlinkingCursorOnEnd : MonoBehaviour
{

    public TextMeshProUGUI text;
    private bool blink = false;

    public void OnEnd()
    {
        blink = true;
        StartCoroutine(BlinkCursor());
    }

    private IEnumerator BlinkCursor()
    {
        while (blink)
        {
            yield return new WaitForSeconds(.5f);
            text.text += " ^";
            Debug.Log("Add cursor.  Text is now=" + text.text);
            yield return new WaitForSeconds(.5f);
            text.text = text.text.Remove(text.text.Length - 2, 2);
            Debug.Log("Remove cursor.  Text is now=" + text.text);
            yield return new WaitForSeconds(.5f);
        }
    }
}

[AoF]

Here's a gif of it: https://cdn.discordapp.com/attachments/ ... 71/gif.gif

It's modifying this text object: