06.adding-animation-and-audio-to-the-dialogue

In this short lesson, we will add animation and audio to make the dialogue box more appealing.

Animating the text

The text animation works the same way as in the slideshow series. Like the Label node, the RichTextLabel node has a percent_visible property we can use to animate the displayed text.

In the Scene dock, select the DialogueTree node and add a new Tween node as a child of it.

Click the script icon to navigate back to the script editor. In the set_text() function, we call the Tween node’s interpolate_property() function and start the animation.

onready var tween := $Tween

func set_text(new_text: String) -> void:
    # ...
    # We calculate the animation's duration to display 60 characters per second.
    var duration: float = rich_text_label.text.length() / 60.0
    tween.interpolate_property(rich_text_label, "percent_visible", 0.0, 1.0, duration)
    tween.start()

We want a fixed number of characters to appear per second, so we calculate the animation’s duration by dividing the text length by a fixed number.

Notice how we use the RichTextLabel.text property to calculate the animation’s duration. Our new_text value may contain BBCode that will not be visible yet adds to the length.

The RichTextLabel.text property stores a copy of the text with all BBCode tags removed, allowing us to calculate a consistent animation duration.

As a reminder, the tween node interpolate_property() function takes five arguments:

After calling interpolate_property(), we call the tween node’s start() function to start the animation.

Playing a randomized dialogue sound

We can play sounds when characters talk. To play sounds in Godot, we need an extra node.

In the Scene dock, select the DialogueTree node and add a new AudioStreamPlayer node as a child of it.

The AudioStreamPlayer node lets you play audio files with the .wav, .mp3, or .ogg format. To play a sound, you first need to assign it to the Stream slot.

Right-click the [empty] text next to Stream and select Quick Load in the Inspector. In the popup, select the file talking_synth.mp3.

Your Inspector should now show the stream’s audio waveform, a visual representation of the volume over time.

This file is a fifteen-second long stream of random blips resembling speech. It is similar to the speech sounds in Animal Crossing.

We can call the AudioStreamPlayer node’s play() function to play an audio stream.

onready var audio_player := $AudioStreamPlayer

func set_text(new_text: String) -> void:
    # ...
    # We randomize the audio playback's start time to make it sound different
    # every time.
    var sound_start_position: float = randf() * audio_player.stream.get_length()
    audio_player.play(sound_start_position)

We calculate a random start position every time we play the sound to avoid repeating it on every dialogue line.

Otherwise, players will hear the same sound every line, which will break their immersion.

The last thing we must do is stop the audio playback when the text animation ends. Otherwise, the sound will keep playing indefinitely.

We can connect to the Tween node’s tween_all_completed signal to stop the AudioStreamPlayer’s playback.

func _ready() -> void:
    show_line(0)
    # We call the AudioStreamPlayer's stop() function when the text animation
    # completes.
    tween.connect("tween_all_completed", audio_player, "stop")

You learned about creating user interfaces but didn’t stop there. We dove into working with data structures, connecting signals with code, loading and instancing scenes with code, and more.

You’re starting to manipulate more complex types and various objects, even if you don’t realize it yet.

The next series will focus on top-down character movement, collisions, and making a complete mini-game.

The file talking_synth.mp3 is made by tcarisland and available under the CC-By 4.0: https://opengameart.org/content/talking-synthesizer

Adding animation and audio to the dialogue

Animating the text

Playing a randomized dialogue sound