How to make read-along children's game

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By pixeljp

Hi, I’m trying to figure out how to make a game where the text (label) highlights as it is being read (AudioStreamPlayer2D), similar to a read-along story. How would I do that?

kinda like this

What part are you asking about? How to highlight? How to synchronize the highlighting with the spoken audio? Something else?

If you ask more specific questions, you’re more likely to get a useful answer.

stormreaver | 2023-06-15 20:50

Oops! I’m wondering how to synchronize the the the text highlighting with the spoken audio, so the text highlights as it is read (word-by-word).

pixeljp | 2023-06-15 20:56

:bust_in_silhouette: Reply From: stormreaver

One possible way would be to create a tagging system for your text. You could embed a timestamp before each word that says at which time that word is highlighted, then use a timer that gets fired off at that timestamp. You would maintain a pointer to the next word to be highlighted that gets used by your time handler.

Another related way would be to create an array of timestamps that serve the same purpose, except you wouldn’t use a tagging system.

Or you can have a 2-D array of words and timestamps. Or a vector array (multidimensional array) of timestamps + words + other attributes.

Thanks. I am trying to implement your first suggestion. is it something like this? I have an audio and an animation player

func yellowText(LabelName):
  get_node(LabelName).add_color_override("font_color", Color(0.886275, 0.862745, 0.258824))

func _ready():
  $audio.play()
  yield(get_tree().create_timer(0.42), "timeout")
  $Label.text = "This"
  yellowText("Label")

pixeljp | 2023-06-24 03:44

Your text would look something like this:

<<0.15>>This<<0.14>>is<<0.10>>Your<<0.20>>Text

You can use whatever tagging system you want, including using multiple keywords in the tags to indicate different functionality for the word that follows:

<<time 0.15; male;#FFFF00>>This<<time 0.14; female;$FFFF00>>is

Then you would parse out the text to create your basic data structure, that could look something like:

  [
    [0.15,"male","This","FFFF00"],
    [0.14,"female","is","FFFF00"],
  ]

Then you would iterate through the resulting array, setting your timer to timeout at each word along the way and setting the word to the color in the array and playing the word using the indicate voice (if you have configurable voices).

stormreaver | 2023-06-24 12:23