DEV Community: Alex Pech

Building a Retro Dialogue plugin for Godot, Part 3

Alex Pech — Sat, 28 Jan 2023 11:22:00 +0000

Part 1/2 Recap
Introduction
Triggering conversation events and scrolling text
Conclusion

Part 1/2 Recap

In Part 1, we set up our project and scripted a basic conversation with branching options.

In Part 2, we added character swapping, text formatting using BBCode, and handling variables within the conversation.

Introduction

This part is going to focus on extending our script with a couple of extra enhancements: triggering arbitrary events during the conversation, and also handling longer sections of dialogue by scrolling the text.

Afterwards, we're also going to look at how to integrate our conversation node into a larger game scene.

Triggering conversation events and scrolling text

There are two features we're going to implement in this section:

The ability to call arbitrary functions at any point during a conversation.
Allow longer sections of text, and scroll the dialogue box when overflow occurs.

What I mean by the first point is something like this:

"dialogue": "Hi. Um...<pause 2.0> who are you?"

The section between the angle brackets <> is a function call. It won't print out, but it will call a pause function that stops text printing for 2.0 seconds.

You could use the same concept to, for example, trigger an animation. Something like this:

"dialogue": "Let's go!<move player left 10.0>"

The second point, scrolling the dialogue, may sound trivial, but it's deceptively complex. The RichTextLabel node doesn't give us good information about whether or not line-wrapping is occurring, how many lines our text actually uses, whether overflow is occurring, etc.

To give a brief overview of a couple of useful functions the RichTextLabel node does give us:

get_total_character_count() - Gives us the total number of characters in the text. Does not include BBCodes.
scroll_to_line(int line) - Allows us to scroll the top of the window to match line. Wrapped text counts as one line.

In a nutshell, our strategy for correctly scrolling our text is going to be:

Define a constant characters_per_line variable. For me, this is 21. This only works if you're using a monospaced font (which we are). Otherwise, your characters per line will be variable and you won't be able to use this method.
Define a constant max_visible_lines variable. For me, this is two. If we go over this, it means we need to start scrolling.
Detect where in the dialogue a word will take a line over characters_per_line and then insert a newline (\n) appropriately (ensuring scroll_to_line will work for us)
Using the same principle as the inline function calls, insert a <scroll> after these newlines where vertical overflow will occur. Our scroll method will use scroll_to_line to increment the scroll position by one.

So, both of these are going to depend on us being able to call functions during a piece of dialogue. Let's modify our first piece of dialogue in the conversation so that it uses both of these features.

"dialogue": "Hi, I'm ALEX. <pause 0.5>.<pause 0.5>.<pause 0.5>. [color=yellow]It's nice to meet you![/color] Uh...<pause 2.0> How should I refer to you?",

You can see that I've included several calls to a pause function which we'll need to define. I've also included a bbcode tag to ensure the combination doesn't interfere. I've also made the line longer so that it will need to wrap and scroll.

First, let's figure out how we can interpret these inline function call tags within the <> brackets.

For the string parsing, we're going to use a Regular Expression (GDScript class RegEx).

Define a new variable,

var inline_function_regex = RegEx.new()

and in _ready,

inline_function_regex.compile("<(?<function_call>.+?)>")

Our regex string, <(?<function_call>.+?)>, uses a Named Capture Group to extract everything between <> brackets. You'll see how we'll use it in a moment.

Note: there's no real reason why you can't use something other than <> as an identifier - it's just convenient because it doesn't clash with the format brackets {} or the bbcode brackets [].

Tip: https://regex101.com/ is a great tool for learning how a particular expression works. I'm by no means an expert at RegEx and I used this tool to come up with the expression used here.

The idea is that we'll pre-process our string, save the function calls we need to make, remembering the index we need to call them at, and then remove them from the string.

To store the function calls, let's define a variable.

var dialogue_calls = {}

Define a helper function which we'll use for adding function calls to our dictionary in the required format.

func add_dialogue_call(index, dialogue_call):
  var dialogue_calls_at_index = dialogue_calls.get(index, [])
  dialogue_calls_at_index.push_back(dialogue_call) 
  dialogue_calls[index] = dialogue_calls_at_index

We store the functions by their index for easy lookup when we're printing out the text. It's possible to have multiple function calls at the same location, so each value is actually an array of function calls that we'll need to iterate through.

We expect dialogue_call to be an array of strings containing each argument between the <> brackets (you'll see why in a minute).

For example, if we had dialogue like this,

"Hi <pause 2.0><animate player talk>, <animate player wave>"

we'd expect this in our dialogue_calls dictionary,

{
  3: [
    ["pause", "2.0"],
    ["animate", "player", "talk"]
  ],
  5: [
    ["animate", "player", "wave"]
  ]
}

Next, define a new function, process_dialogue_inline_functions,

func process_dialogue_inline_functions(dialogue):
  # Clear our existing function call list
  dialogue_calls = {}

  var visible_character_count = 0
  var in_bbcode = false

  var i = -1
  while i + 1 < dialogue.length():
    i += 1

    var character = dialogue[i]

    # Ignore bbcode tag sections
    if character == '[':
      in_bbcode = true
      continue
    elif character == ']':
      in_bbcode = false
      continue
    elif in_bbcode:
      continue

    # If this is the start of an inline function call, process it and strip it from the dialogue
    if character == '<':
      var result = inline_function_regex.search(dialogue, i)
      if result:
        add_dialogue_call(visible_character_count, result.get_string("function_call").split(" "))
        dialogue.erase(result.get_start(), result.get_end() - result.get_start())
        i -= 1
    else:
      visible_character_count += 1

  return dialogue

Now, this function might look a little complex, but there's really only a couple of things it's doing.

It iterates through our dialogue string, character by character, ignoring any bbcode tags, and checks for our special character '<'.

When it finds a '<' it uses the regex to search from the current position, extracts the function_call capture group, splits it into an array, and then passes it to add_dialogue_call. Having saved that function, it then erases it from the dialogue string.

While iterating through the dialogue, we keep track of the number of visible characters since that's what we iterate through when printing. It gives us the correct index at which to perform the function.

Finally, we return the modified dialogue with the function calls removed.

Also note that we use a while loop instead of a for loop. This is because the length of the dialogue can change during the loop (from the call to erase) and also we need to modify i when erasing a function call. It's therefore simpler to use a while loop and manage the iterator variable i ourselves.

Finally, we need to call this function at the start of print_dialogue. We want to do it after we've formatted the dialogue, but before we assign it to bbcode_text.

In print_dialogue, replace the line where we assign bbcode_text with this:

var formatted_dialogue = dialogue.format({ "title": title })
dialogue_node.bbcode_text = process_dialogue_inline_functions(formatted_dialogue)

Our inline functions won't be getting called yet, but you can still test this out from here.

If you run the scene and start the conversation, you should see that the function calls have been removed from the dialogue.

Next, let's look at how we can actually call these functions while the dialogue is printing.

Let's first define our pause function.

func pause(delay_string):
  var delay = float(delay_string)
  yield(get_tree().create_timer(delay), "timeout")

Pretty straightforward. All our arguments for these functions are going to be passed in as strings, so they'll need to be cast first. So, we cast the string to a float, then we create a one-shot timer and yield.

Now let's call our functions from print_dialogue.

Add this function to help us do that,

func call_dialogue_functions(index):
  var dialogue_calls_for_index = dialogue_calls.get(index)
  var results = []
  if dialogue_calls_for_index:
    for dialogue_call in dialogue_calls_for_index:
      var call_method = dialogue_call[0]
      dialogue_call.remove(0)

      results.push_back(callv(call_method, dialogue_call))

  return results

For the given index, get the array of dialogue calls to make, then iterate through, returning the results of each as an array. The first element of the array is the method name, and the remainder are the arguments.

Call the function from print_dialogue, before we start the timer or increment visible_characters,

for i in dialogue_node.get_total_character_count():
  # Process any function calls first, before showing the next character.
  var results = call_dialogue_functions(i)
  if results:
    for result in results:
      # This is what the function will return if it yields.
      # If it does yield, we also need to yield here to wait until that coroutine completes.
      if result is GDScriptFunctionState:
          yield(result, "completed")

In addition to calling call_dialogue_functions we also process the results here. In particular, we need to handle the case of when these functions yield. If they do, then we need to yield here too or else the pause will have no effect - it will run in a separate coroutine and not block our printing function.

That should be it! Try it out. When you run the scene, you should see that the dialogue pauses printing for the specified duration at the locations where we inserted those <pause> commands.

Ok, let's talk about scrolling next. There's a couple of things we need to do here. First, detect when we need to scroll. Second, perform the scroll at the correct time.

As mentioned earlier, the RichTextLabel node isn't good at telling us when text overflows horizontally and wraps around. Therefore, we're going to implement our own text wrapping. Given we're using a font where characters have a fixed width, this is relatively simple. We can define a constant number of characters per line, and then insert newlines anywhere a word would take a line over that number. We'll want to be a little strategic about where we place those newlines as well, so that we don't break any words in half.

To do this, I'm going to expand our call to .format and define a new function, format_dialogue, that will handle both the .format and insertion of any required newlines.

First, there's a couple of variables we'll need:

export var characters_per_line = 21
export var max_lines_visible = 2

This is based on my own layout - yours might be different. Basically, this defines the size of the area we have that can display dialogue. Mine is 21 characters wide and 2 lines high.

Note, you might need to increase the width of your dialogue box for this section. We want to actively avoiding lines wrapping by hitting the side of the dialogue box, and instead use our own newlines.

Next, define our new function,

func format_dialogue(dialogue):
  # Replace any variables in {} brackets with their values
  var formatted_dialogue = dialogue.format(dialogue_variables())

  var characters_in_line_count = 0
  var line_count = 1
  var last_space_index = 0
  var ignore_stack = []
  # Everything between these brackets should be ignored.
  # It's formatted in a dictionary so we can easily fetch the corresponding close bracket for an open bracket.
  var ignore_bracket_pairs = { 
    "[": "]", 
    "<": ">" 
  }

  for i in formatted_dialogue.length():
    var character = formatted_dialogue[i]

    # Ignore everything between [] or <> brackets.
    # By using a stack, we can more easily support nested brackets, like [<>] or <[]>
    if character in ignore_bracket_pairs.keys():
      ignore_stack.push_back(character)
      continue
    elif character == ignore_bracket_pairs.get(ignore_stack.back()):
      ignore_stack.pop_back()
      continue
    elif not ignore_stack.empty():
      continue

    # Keep track of the last space we encounter. 
    # This will be where we want to insert a newline if the line overflows.
    if character == " ":
      last_space_index = i

    # If we've encountered a newline that's been manually inserted into the string, reset our counter
    if character == "\n":
      characters_in_line_count = 0
    elif characters_in_line_count > characters_per_line:
      # This character has caused on overflow and we need to insert a newline.
      # Insert it at the position of the last space so that we don't break up the work.
      formatted_dialogue[last_space_index] = "\n"
      # Since this word will now wrap, we'll be starting part way through the next line.
      # Our new character count is going to be the amount of characters between the current position
      # and the last space (where we inserted the newline)
      characters_in_line_count = i - last_space_index

    characters_in_line_count += 1

  return formatted_dialogue

func dialogue_variables():
  return {
    "title": title
  }

I've included a few comments in this function to give more specific explanations for some of the lines. The overview is, we're iterating through the dialogue string and counting the characters, ignoring bbcode tags [] and function call brackets <>. If the count goes over the maximum, we insert a newline at the start of the current word. If we encounter an existing newline (for example, if we've manually included one in our dialogue string), we reset our counter and start the new line.

I've also pulled dialogue_variables() out into a separate function so that it isn't buried inside format_dialogue.

Now all that's left to do is call our new function from print_dialogue. Replace the call to .format with this line,

var formatted_dialogue = format_dialogue(dialogue)

That's really all we need to do. Our dialogue should now have newlines inserted at appropriate places so we don't need to rely on the RichTextLabel to wrap our text any more.

The final thing we need to handle is scrolling. At the moment, if you play the scene, the dialogue will continue past two lines but the label won't scroll to keep up and the dialogue won't be visible.

As mentioned earlier, we're going to utilise our new inline function call feature to enable this by inserting a "scroll" function call at the same locations as our newlines.

First, we need to ensure that the scrollbar is disabled on our Dialogue node.

Now, let's define our scroll function. We also need a variable to keep track of our current scroll position (since RichTextLabel doesn't give it to us).

var current_scroll_position = 0

func scroll():
  current_scroll_position += 1
  dialogue_node.scroll_to_line(current_scroll_position)

Next, we need to insert some calls to scroll into our dialogue_calls dictionary at appropriate positions. Modify process_dialogue_inline_functions so that it looks like this,

func process_dialogue_inline_functions(dialogue):
  # Clear our existing function call list
  dialogue_calls = {}

  var visible_character_count = 0
  var line_count = 1
  var in_bbcode = false

  var i = -1
  while i + 1 < dialogue.length():
    i += 1

    var character = dialogue[i]

    # Ignore bbcode tag sections
    if character == '[':
      in_bbcode = true
      continue
    elif character == ']':
      in_bbcode = false
      continue
    elif in_bbcode:
      continue

    # If this is the start of an inline function call, process it and strip it from the dialogue
    if character == '<':
      var result = inline_function_regex.search(dialogue, i)
      if result:
        add_dialogue_call(visible_character_count, result.get_string("function_call").split(" "))
        dialogue.erase(result.get_start(), result.get_end() - result.get_start())
        i -= 1
    # Perform manual scrolling.
    # If this is a newline and we're above the maximum number of visible lines, insert a 'scroll' function
    elif character == "\n":
      line_count += 1
      if line_count > max_lines_visible:
        add_dialogue_call(visible_character_count, ["scroll"])
    else:
      visible_character_count += 1

  return dialogue

You can see that we've added a line_count variable and included an extra elif clause for detecting newlines. The logic is fairly simple. If we detect a newline and the current line count is greater than the maximum number of lines we can show, insert a call to scroll at that location.

Ok, we're ready to try it out! If you run the scene and start the conversation, you should now see that the dialogue scrolls down to the next line when it reaches the end of the last visible line.

You might notice one issue though, if you have muliple pieces of dialogue in a row that require scrolling, the scroll position won't reset.

It's an easy fix - all we need to do is reset the scroll position when we start printing some new dialogue. Near the start of print_dialogue, where we set visible_characters to 0, edit your code to look like this,

  dialogue_node.visible_characters = 0
  dialogue_node.scroll_to_line(0)
  current_scroll_position = 0

And that should be all we need to fix the issue.

Fixing the text skipping feature

Ok, you may have noticed one more, much more serious issue. Hitting Enter to skip to the end of the text now has a couple of problems.

We skip right to the very last line, so some text won't be shown at all. This most likely isn't desirable for a player.
Skipping to the end will also skip any inline function calls that we include. This might be ok for things like pauses, but it could cause problems for things like animations. Characters and objects could end up in the complete wrong spot!

While it would be possible to skip over a chunk of text and play out all the functions we need to immediately, it would be very complicated, and not something I really feel like doing given what would be a fairly small pay-off.

So, instead of fixing our now-broken feature, I'm going to solve the problem in a different way.

The problem statement is: players who have read the text before (or who are just fast readers) want to move through the dialogue as quickly as possible.

Notice I haven't defined the problem as 'skip the dialogue completely'. This would be more like skipping an entire cutscene. It might be something your game needs, but it's not what I was intending for this feature.

So, let's look at the problem statement. In particular, where I said "as quickly as possible". Well, we have a limitation with our current implementation that we really only want to go one character at a time to ensure we don't miss any function calls. So, let's say "as quickly as possible" means "one character per frame" for our purposes. This means that, when the player presses and holds Enter to skip, we just want to show one character per frame, rather than waiting for the text timer.

The first thing I'm going to do is rename the skip_text_printing variable to fast_text_printing, so that we declare the variable like this.

var fast_text_printing = false

At this point, you should also rename all the other references to this variable in the file.

Next, I'm going to replace the skip_test_printing() function with these two functions,

func start_fast_text_printing():
  fast_text_printing = true
  text_timer_node.emit_signal("timeout")

func stop_fast_text_printing():
  fast_text_printing = false

Instead of this being a single event that occurs when a button is pressed, it will be something that continues while the button is held down. That means we need both a 'start' and a 'stop' event.

Inside our _process function, change the code block that previously started with if skip_text_printing: to this,

if text_in_progress:
  if Input.is_action_just_pressed("ui_accept"):
    start_fast_text_printing()
  elif Input.is_action_just_released("ui_accept"):
    stop_fast_text_printing() 

  return

Now these functions will get called on the press and release of the Enter key.

Finally, we need to change the logic in our print_dialogue function. At the end of the loop where we start the timer and show the next character, replace the existing code with this,

if fast_text_printing:
  dialogue_node.visible_characters += 1
  yield(get_tree(),"idle_frame")
else:
  text_timer_node.start()
  dialogue_node.visible_characters += 1
  yield(text_timer_node, "timeout")

What we're doing here is, if we're doing the fast text printing, instead of waiting for the timer we just wait for the next frame. This is pretty much as fast as we can go if we're only going one character at a time.

That's it! We're ready to try it out now. If you run the scene and start the conversation, you should be able to speed up the text by holding down the Enter key!

You'll notice that the pauses still take effect, which would be kind of annoying as a player if your intention was to skip forward as quickly as possible. Let's look next at how we can selectively skip over some of our inline functions.

Within the loop inside print_dialogue, we're going to expand our inline function-handling code a bit.

var results = call_dialogue_functions(i)
if results:
  for result in results:
    # This is what the function will return if it yields.
    if result is GDScriptFunctionState:
      # If we're trying to skip quickly through the text, complete this function immediately
      if fast_text_printing:
        while result is GDScriptFunctionState and result.is_valid():
          result = result.resume()
      else:
        # Otherwise, if the function has yielded, we need to yield here also to wait until that coroutine completes.
        yield(result, "completed")

We now have a conditional statement here checking our fast_text_printing variable. If the value is true, instead of yielding we call resume() on it. We do this multiple times in case the function yields multiple times (shown in an example in the GDScript docs https://docs.godotengine.org/en/stable/tutorials/scripting/gdscript/gdscript_basics.html#coroutines-with-yield).

This should work with what we've currently got. Try running the conversation. You should be able to skip quickly through the pauses just like with the other text.

The only thing we want to be careful of is if we have function calls that we shouldn't skip. For example, an animation that you want to complete before continuing.

If we want to do this selectively, we need the results returned from call_dialogue_functions to have a little more information. Let's modify that function so that it also returns the name of the function the result is for.

In call_dialogue_functions, where we're pushing the result onto our results array, change the line to this,

results.push_back([call_method, callv(call_method, dialogue_call)])

See how we're now including the name of the method being called.

Let's also define a list of functions that are safe for us to skip.

var skippable_functions = ["pause"]

Now, let's modify our code in print_dialogue one more time to handle this new data structure.

var results = call_dialogue_functions(i)
if results:
  for result in results:
    if not result:
      continue

    var dialogue_function = result[0]
    var result_value = result[1]

    # This is what the function will return if it yields.
    if result_value is GDScriptFunctionState:
      # If we're trying to skip quickly through the text, complete this function immediately if we're allowed to do so.
      if fast_text_printing and dialogue_function in skippable_functions:
        while result_value is GDScriptFunctionState and result_value.is_valid():
          result_value = result_value.resume()
      else:
        # Otherwise, if the function has yielded, we need to yield here also to wait until that coroutine completes.
        yield(result_value, "completed")

That should now put the final touches on that feature. We can now move quickly through the text and still prevent certain important functions from being skipped over.

Integrating conversations into your game

Up until now we've been solely focussed on our dialogue scene. We're going to take a bit of a detour here and start thinking about how we can fit this into a larger project.

Let's imagine that this conversation is part of a cutscene in a 2D platformer. I'm going to create a new scene and, using some of the asset packs I've downloaded, I'm going to build a little scene with a couple of characters.

Here are the asset packs I've used:

I'm not going to give you my exact scene layout, so just have fun with this and build something cool! All you'll need is a node to represent your player, and another to represent an NPC (who we'll be having the conversation with).

Keep in mind how the scene is going to look with our dialogue UI at the bottom. Ensure the scene will still look ok with the bottom 64 pixels covered.

Here's what I've come up with.

What you'll want to do now is drag in our DialogueUI scene. Position it at (0,0) so that it lines up with the bottom of the screen.

And you can see the basic structure of my scene here.

Basically, I've got a background and foreground layer, which contain all the static sprites for the environment. Then, I've got two AnimatedSprites to represent my player and my NPC. Finally, our DialogueUI node (which I've just name UI) sits at the bottom.

Now, what I want to do is to be able to walk my character up to the NPC and, when I get close enough, trigger the conversation from a button press.

This tutorial isn't about 2D character control so I'm just going to write a really basic script.

Add a new script to your Player node and add this code.

extends AnimatedSprite

export var walk_speed = 40

var in_conversation = false

func _process(delta):
  if in_conversation:
    return

  if Input.is_action_pressed("ui_right"):
    translate(Vector2(walk_speed * delta,0))
    play("walk")
    flip_h = false
  elif Input.is_action_pressed("ui_left"):
    translate(Vector2(-walk_speed * delta,0))
    play("walk")
    flip_h = true
  else:
    play("idle")

I defined an "idle" and a "walk" animation on my sprite, so I'm playing the "walk" animation when my character is moving, and "idle" otherwise. Feel free to remove these lines if you haven't bothered to animate your character.

I've also anticipated that we'll want to prevent player movement while a conversation is active, so I've set up an in_conversation variable in preparation for that.

Now, we can move our character to the left and right, but what we want is for our dialogue UI to be hidden initially, and then appear and start the conversation when we get close to the NPC. There's some tweaks we'll need to make to our DialogueUI script so that we can start conversations from a script.

Change the _ready function to look like this,

func _ready():
  visible = false
  inline_function_regex.compile("<(?<function_call>.+?)>")

and add a new function, start_conversation(),

func start_conversation():
  current_index = 0
  current_choice = 0
  print_dialogue(conversation[current_index]["dialogue"])
  visible = true

This means that our conversation won't start automatically when we run our scene. Instead, it will wait for start_conversation() to get called. When start_conversation() is called, we set up the variables for our conversation, start the first piece of dialogue, and make our UI visible.

We need to add one more thing at the start of _process.

func _process(delta):
  if not visible:
    return

This prevents button presses from advancing the conversation until we've actually started it.

You won't see much yet if you run the scene. The dialogue UI will be hidden, but there's nothing to trigger the start of the conversation.

Let's add some code to our player script, so that it can trigger the conversation.

export var ui_path: NodePath
onready var ui = get_node(ui_path)

func _process(delta):
  if not in_conversation:
    ui.start_conversation()
    in_conversation = true

Now, assign the ui_path variable to the UI node in the scene.

If you run the scene now, you should again see that the conversation starts immediately.

Now that we know our start_conversation function works you can remove the code we just added to the top of _process. We're not going to need it.

Let's add a script to our NPC. The NPC is going to let the player know when it's within range, so the player knows when it can start a conversation.

Here's my NPC script,

extends AnimatedSprite

export var player_path: NodePath
onready var player = get_node(player_path)

export var conversation_distance = 30

func _ready():
  $SpeechBubble.visible = false

func _process(delta):
  if abs(position.x - player.position.x) < conversation_distance:
    $SpeechBubble.visible = true
    player.npc_in_range()
  else:
    $SpeechBubble.visible = false

Notice my NPC includes a node called SpeechBubble. I've added this as a visual indicator for when the player is able to talk to the NPC. Feel free to add this in as well if you like.

This script also has a reference to the player (don't forget to assign it in the scene view). If the distance between the NPC and the player is less than conversation_distance, the speech bubble indicator will show, and the NPC calls a function on the player, npc_in_range, to let it know that they can start a conversation.

Let's define npc_in_range on our player now.

func npc_in_range():
  if not in_conversation and Input.is_action_just_pressed("ui_accept"):
    in_conversation = true
    ui.start_conversation()

We'll use the Enter key ("ui_accept") to trigger our conversation. A conversation can only be triggered if we aren't already in a conversation.

So, essentially this function is triggered when our NPC is within range of the player, and if they are, we'll start a conversation when Enter is pressed, as long as a conversation isn't already in progress.

Run the scene to test out this code. You should be able to walk up to the NPC and press Enter to start the conversation.

The next thing we need to consider is how to end the conversation. At the moment, we just get to the final piece of dialogue and end up stuck there. Let's fix that.

To allow the player to get notified at the end of the conversation, we're going to use a Custom signal.

Add this to your Dialogue UI script:

signal conversation_finished

Next, define a finish_conversation function.

func finish_conversation():
  visible = false
  emit_signal("conversation_finished")

Finally, add an else clause at the end of the _process function to call it at the end of the conversation.

  else:
    if Input.is_action_just_pressed("ui_accept"):
      finish_conversation()

That else block should match up with if current_index < (conversation.size() - 1). If we're inside that else block, it means we're at the end of the conversation.

If the player presses Enter when at the end of the conversation, we're going to call our new function finish_conversation, which hides the UI and emits our new signal.

Next, with the UI selected in the scene view, select to Signals tab and connect finish_conversation to the Player node.

All we need to do in our Player script is to set in_conversation to false when this signal is emitted.

func _on_UI_conversation_finished():
  in_conversation = false

That's it! Test out your scene again. You should be able to run through the whole conversation with the NPC and then continue playing. The UI should hide once you're done, and then you should be able to trigger the conversation again and repeat it.

Conclusion

In this section we looked at how to trigger events during a conversation, and how to incorporate our script into a larger scene.

Building a Retro Dialogue plugin for Godot, Part 2

Alex Pech — Sat, 28 Jan 2023 11:21:00 +0000

Part 1 Recap
Introduction
Swapping characters
Animating the text, printing character by character
Adding effects using bbcode
Variables
Conclusion

Part 1 Recap

In Part 1, we looked at:

Project setup for a low-res 'SNES-style' game
UI layout for our dialogue system
Scripting a basic, branching conversation

Introduction

In Part 2, we're going to get a lot deeper into scripting.

We'll be making the conversation more dynamic, adding the ability to swap characters and insert variables into the text.

We're also going to add some animation and enhanced visuals to our text by printing out characters and using BBCode.

Swapping characters

Continuing on from Part 1, what you should have is a scene where the player can have a conversation with a character and make choices to take different branches.

This is all great if your player character only ever has a conversation with one person. Realistically however, you'll want to be able to change which character to use per conversation, and also have conversations with multiple participants.

Let's get started by making our characters configurable on the node.

Export a couple of variables for the character name and portrait.

export var character_name = "ALEX"
export var character_portrait: Texture

We also need to let our script know about the Portrait node.

onready var portrait_node = get_node("PortraitRect/Portrait")

Now, let's set the name and portrait in our _ready function.

portrait_node.texture = character_portrait
name_node.text = character_name

That's it! Go back to our scene and try setting a new character name on our node and dragging in a new portrait texture.

Run the scene. Easy as that, a configurable character name and portrait!

But what if we want different characters as part of the conversation? Well, let's start with how we think we'd define that in our conversation data structure.

var conversation = [
  {
    "character": "alex",
    "dialogue": "Hey there.\nDo you like apples?",
    "choices": [
      {
        "dialogue": "Sure do!",
        "destination": "apples_good"
      },
      {
        "dialogue": "No way, gross!",
        "destination": "apples_bad"
      }
    ]
  },
  {
    "character": "alex",
    "label": "apples_good",
    "dialogue": "You like apples? Me too!",
    "destination": "part_2"
  },
  {
    "character": "alex",
    "label": "apples_bad",
    "dialogue": "You don't?\nThat's a shame."
  },
  {
    "label": "part_2",
    "character": "alex",
    "dialogue": "I like other fruits too."
  },
  {
    "character": "alex",
    "dialogue": "Hey JUPITER, what do you like?"
  },
  {
    "character": "jupiter",
    "dialogue": "I prefer oranges..."
  },
  {
    "character": "alex",
    "dialogue": "Bananas are my favourite!"
  }
]

We've added in a "character" key for each section of dialogue with the character's name. Notice we haven't specified the portrait texture here as well. It'll be easier if we just use this character name as a label to look up the portrait texture and the display name.

Let's modify our exported variables to accomodate that. (Replace the image filepaths with your own portraits that you're using if needed.)

export var characters = {
  "alex": {
    "name": "ALEX",
    "portrait": preload("res://images/Pixel Portraits/female_10_t.png")
  },
  "jupiter": {
    "name": "JUPITER",
    "portrait": preload("res://images/Pixel Portraits/female_11_t.png")
  }
}

It should now look like this in the editor:

Next, let's define a function that will let us fetch these names and portrait textures based on the current character in the conversation.

func update_character():
  var current_character = conversation[current_index].get("character")

  portrait_node.texture = characters[current_character]["portrait"]
  name_node.text = characters[current_character]["name"]

Finally, let's call this function whenever the conversation progresses.

In _ready,

func _ready():
  update_text_labels()
  update_select_indicators()
  update_character()

and in _process,

if current_index != previous_index:
  update_text_labels()
  update_character()
  reset_selection()

That's all we need to do! Try running the scene. You'll see the character names and portraits change based on the character labels we provided in our conversation data.

Animating the text, printing character by character

Currently, we really only have one state our conversation can be in, which is to display the current dialogue and available choices. If we want to show the text printing out before we make a choice, we need to introduce a second state. We can do this by simply introducing a boolean variable, text_in_progress, and having our _process function do different things based on its value.

When text_in_progress is true, we're in the process of printing out text. Our current choices should be hidden.
When text_in_progress is false, our full text is displayed and the current choices are shown.

We progress from 1) to 2) automatically when the text is complete.

We progress from 2) back to 1) (incrementing the dialogue index) when the player makes a choice.

To control the printing animation of the text, we're going to use a Timer node.

I've based this section on an existing example here https://www.codegrepper.com/code-examples/go/TypeWriter+Text+Godot

Add a Timer node to scene, called TextTimer.

Text speed can be modified by changing the Wait time of the Timer.

Make the timer node available in our script.

onready var text_timer_node = get_node("TextTimer")

Add in a variable to represent the new state we need.

var text_in_progress = false

Define some functions to help us show/hide the choices between state transitions. You'll see how we use these below.

func show_choices():
  set_choices_visible(true)
  reset_selection()
  choice_a_node.text = get_current_choice(0).get("dialogue", "...")
  choice_b_node.text = get_current_choice(1).get("dialogue", "")

func hide_choices():
  set_choices_visible(false)

func set_choices_visible(visible):
  var nodes = [
    select_a_node,
    select_b_node,
    choice_a_node,
    choice_b_node
  ]
  for node in nodes:
    node.visible = visible

Next, add this function. It will handle the printing of the dialogue one character at a time.

func print_dialogue( dialogue ):
  text_in_progress = true
  update_character()
  hide_choices()
  dialogue_node.text = ""

  for letter in dialogue:
    text_timer_node.start()
    dialogue_node.add_text(letter)
    yield(text_timer_node, "timeout")

  show_choices()
  text_in_progress = false

Our transition into the 'printing' state happens at the start of this function. Within the loop, we add a letter and use yield to allow it to display and wait for the timer before showing the next one. Once the loop is done and all our text is printed out, we show the choices and toggle our state.

In _process, start with,

if text_in_progress:
  return

This prevents user action during the printing state.

To transition to the next piece of dialogue, we now simply call print_dialogue after a choice is made. Like this,

if current_index != previous_index:
  print_dialogue(conversation[current_index]["dialogue"])

All the required updates are now handled with print_dialogue.

Finally, in _ready, we just need to kick off the initial bit of dialogue,

func _ready():
  print_dialogue(conversation[current_index]["dialogue"])

We no longer need the update_text_labels function. It can be removed.

You can now run the scene!

There's one more feature here I'd like to add - press Enter to skip to the end (show all dialogue and choices).

Define a boolean variable to flag when we should skip the rest of the printing of the text:

var skip_text_printing = false

During _process, if we're currently printing out text and Enter is pressed, then skip the text printing:

func _process(delta):
  if text_in_progress:
    if Input.is_action_just_pressed("ui_accept"):
        skip_text_printing()

    return

Define skip_text_printing(). This is going to set our variable and stop our text timer.

func skip_text_printing():
  skip_text_printing = true
  text_timer_node.emit_signal("timeout")
  text_timer_node.stop()

We also force the timer to fire immediately, so that we don't wave to wait when using slow text speeds.

Then, to skip the rest of the text inside print_dialogue(), put this after the call to yield,

if skip_text_printing:
  skip_text_printing = false
  dialogue_node.text = dialogue
  break

This will immediately complete the text and break out of our letter printing loop the next time our timer fires.

Run the scene. You should be able to skip through the conversation by pressing the Enter key to skip the letter-by-letter printing.

Here's where your script should be at:

extends Control

export var characters = {
  "alex": {
    "name": "ALEX",
    "portrait": preload("res://images/Pixel Portraits/female_10_t.png")
  },
  "jupiter": {
    "name": "JUPITER",
    "portrait": preload("res://images/Pixel Portraits/female_11_t.png")
  }
}

onready var name_node = get_node("DialogueRect/CharacterName")
onready var portrait_node = get_node("PortraitRect/Portrait")
onready var dialogue_node = get_node("DialogueRect/Dialogue")
onready var choice_a_node = get_node("DialogueRect/ChoiceA")
onready var choice_b_node = get_node("DialogueRect/ChoiceB")
onready var select_a_node = get_node("DialogueRect/SelectA")
onready var select_b_node = get_node("DialogueRect/SelectB")
onready var text_timer_node = get_node("TextTimer")

var conversation = [
  {
    "character": "alex",
    "dialogue": "Hey there.\nDo you like apples?",
    "choices": [
      {
        "dialogue": "Sure do!",
        "destination": "apples_good"
      },
      {
        "dialogue": "No way, gross!",
        "destination": "apples_bad"
      }
    ]
  },
  {
    "character": "alex",
    "label": "apples_good",
    "dialogue": "You like apples? Me too!",
    "destination": "part_2"
  },
  {
    "character": "alex",
    "label": "apples_bad",
    "dialogue": "You don't?\nThat's a shame."
  },
  {
    "label": "part_2",
    "character": "alex",
    "dialogue": "I like other fruits too."
  },
  {
    "character": "alex",
    "dialogue": "Hey JUPITER, what do you like?"
  },
  {
    "character": "jupiter",
    "dialogue": "I prefer oranges..."
  },
  {
    "character": "alex",
    "dialogue": "Bananas are my favourite!"
  }
]

var current_index = 0
var current_choice = 0
var text_in_progress = false
var skip_text_printing = false

func _ready():
  print_dialogue(conversation[current_index]["dialogue"])

func _process(delta):
  if text_in_progress:
    if Input.is_action_just_pressed("ui_accept"):
      skip_text_printing = true
      text_timer_node.emit_signal("timeout")
      text_timer_node.stop()

    return

  if current_index < (conversation.size() - 1):
      var previous_index = current_index

      if Input.is_action_just_pressed("ui_up"):
        safe_select_previous_choice()

      if Input.is_action_just_pressed("ui_down"):
        safe_select_next_choice()

      if Input.is_action_just_pressed("ui_accept"):
        current_index = get_next_index()

      if current_index != previous_index:
        print_dialogue(conversation[current_index]["dialogue"])

func get_index_of_label(label):
  for i in range(conversation.size()):
    if conversation[i].get("label") == label:
      return i

  assert(false, "Label %s does not exist in this conversation!" % label)

func get_next_index():
  var destination = null
  if conversation[current_index].has("choices"):
    var choice = conversation[current_index]["choices"][current_choice]
    destination = choice.get("destination")
  else:
    destination = conversation[current_index].get("destination")

  if destination:
    return get_index_of_label(destination)
  else:
    return current_index + 1

func get_current_choice(choice_index):
  var choices = conversation[current_index].get("choices", [])
  if choice_index < choices.size():
    return choices[choice_index]
  else:
    return {}

func update_select_indicators():
  var select_nodes = [
    select_a_node,
    select_b_node
  ]
  for node in select_nodes:
    node.visible = false

  select_nodes[current_choice].visible = true

func get_current_choice_count():
  var choices = conversation[current_index].get("choices")
  if choices:
    return choices.size()
  else:
    return 1

func safe_select_previous_choice():
  current_choice = clamp(current_choice - 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

func safe_select_next_choice():
  current_choice = clamp(current_choice + 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

func reset_selection():
  current_choice = 0
  update_select_indicators()

func update_character():
  var current_character = conversation[current_index].get("character")

  portrait_node.texture = characters[current_character]["portrait"]
  name_node.text = characters[current_character]["name"]

func show_choices():
  set_choices_visible(true)
  reset_selection()
  choice_a_node.text = get_current_choice(0).get("dialogue", "...")
  choice_b_node.text = get_current_choice(1).get("dialogue", "")

func hide_choices():
  set_choices_visible(false)

func set_choices_visible(visible):
  var nodes = [
    select_a_node,
    select_b_node,
    choice_a_node,
    choice_b_node
  ]
  for node in nodes:
    node.visible = visible

func print_dialogue( dialogue ):
  text_in_progress = true
  update_character()
  hide_choices()
  dialogue_node.text = ""

  for letter in dialogue:
    text_timer_node.start()
    dialogue_node.add_text(letter)
    yield(text_timer_node, "timeout")

    if skip_text_printing:
      skip_text_printing = false
      dialogue_node.text = dialogue
      break

  show_choices()
  text_in_progress = false

func skip_text_printing():
  skip_text_printing = true
  text_timer_node.emit_signal("timeout")
  text_timer_node.stop()

Adding effects using bbcode

What is BBCode? Basically, it allows as to apply formatting to our text by using special BBCode 'tags'. We can do things like bold or underline text. We can also set the color, and even add other special effects. The Godot docs for RichTextLabel have a lot of good examples for what's available: https://docs.godotengine.org/en/stable/tutorials/ui/bbcode_in_richtextlabel.html

Let's get started by enabling BBCode on all our RichTextLabels. You'll notice that the Bb Code section has a separate Text attribute, so when you enable it, you'll see the original default text disappear. To have it show in the editor, you need to add some text to the Text section under the Bb Code heading.

Everywhere in the script we call .text on one of our RichTextLabel nodes, we need to replace it with .bbcode_text.

Once you've done that, run the scene. Everything should still work as it did before.

Now, let's try out some BBCode tags. Replace the first part of the conversation with this:

{
  "character": "alex",
  "dialogue": "Hey there.\nDo you like [wave amp=10 freq=-10][color=green]apples[/color][/wave]?",
  "choices": [
    {
      "dialogue": "[wave amp=10 freq=10]Sure do![/wave]",
      "destination": "apples_good"
    },
    {
      "dialogue": "No way, [color=grey][shake rate=10 level=10]gross![/shake][/color]",
      "destination": "apples_bad"
    }
  ]
},

Except... oh dear! Our BBCode tags are showing up in our dialogue!

So, what's going on here? Well, recall that we're printing out the dialogue by adding the text character by character. Since our dialogue now needs to be interpreted as BBCode text, the RichTextLabel needs to be aware of the whole dialogue chunk for it to render it.

We're going to need to change how we print out our dialogue. Luckily, the RichTextLabel class includes a convenient property called visible_characters, which we can use to set how much of our dialogue is visible. The best part is, the BBCode tags aren't included. What we can do is set bbcode_text to our dialogue upfront, start with visible_characters = 0, and then increment visible_characters on each timer tick.

Let's modify our print_dialogue function to use visible_characters instead,

func print_dialogue( dialogue ):
  text_in_progress = true
  update_character()
  hide_choices()

  dialogue_node.bbcode_text = dialogue
  dialogue_node.visible_characters = 0

  for i in dialogue_node.get_total_character_count():
    text_timer_node.start()
    dialogue_node.visible_characters += 1
    yield(text_timer_node, "timeout")

    if skip_text_printing:
      skip_text_printing = false
      dialogue_node.visible_characters = -1
      break

  show_choices()
  text_in_progress = false

You'll notice also that we've changed our loop to iterate over the total character count of the RichTextLabel rather than the characters in the dialogue string. Again, using get_total_character_count means that the BBCode tags will be ignored, so our character count will be accurate.

Logically, this should work. However, if you run the scene, you'll notice that the dialogue doesn't actually print out - it's getting stuck. The reason is that get_total_character_count() is returning 0. This is due to a limitation with the RichTextLabel class in the engine. Updating visible_characters (or its counterpart, percent_visible) won't update get_total_character_count() until the next frame.

I'm going to use a simple workaround for this and just wait until the next frame before checking the character count. For this application, a single frame delay isn't going to be noticable to our user.

Add this line just before our for loop:

yield(get_tree(),"idle_frame")

What we're doing here is yielding until we receive the "idle_frame" signal from the SceneTree, which is emitted right before Node._process. Check out the Godot Docs for more info https://docs.godotengine.org/en/stable/classes/class_scenetree.html#class-scenetree-signal-idle-frame

If you run the scene now, you should see that the BBCode text prints our correctly, character by character.

Variables

Let's say we don't know ahead of time exactly what our dialogue should be. For example, the player might choose during the game how they'd like to be referred to.

When Alex says "Hey there" at the start of the conversation, perhaps we'd like them to instead use a name or title. Let's see how we could go about inserting a variable into our dialogue.

For this, I'm going to use formatted strings. You can read about them here https://docs.godotengine.org/en/stable/tutorials/scripting/gdscript/gdscript_format_string.html. Basically, the idea is that we can insert named variables between curly brackets {} and then pass in a dictionary of values. Our named variables will then get replaced with the value corresponding with the matching key in the dictionary.

To begin, let's modify our dialogue to define how we want to express our variables. I'm going to call mine title, like this:

"dialogue": "Hey {title}.\nDo you like [wave amp=10 freq=-10][color=green]apples[/color][/wave]?"

Now, when we set the bbcode_text property on the RichTextLabel, we first need to format our string.

Modify the line where we set bbcode_text in print_dialogue to this:

dialogue_node.bbcode_text = dialogue.format({ "title": "STRANGER" })

If you run the scene now, you'll see that Alex now refers to you as STRANGER (which makes sense, they haven't met us yet).

So, inserting variables is easy, but what about setting them?

Let's say we want the character to start the conversation by asking the player how they should be referred to.

Add this to the start of our conversation array.

{
  "character": "alex",
  "dialogue": "Hi, I'm ALEX. How should I refer to you?",
  "choices": [
    {
      "dialogue": "Call me FRIEND"
    },
    {
      "dialogue": "It's CAPTAIN to you"
    }
  ]
},

Alex is now going to start by introducing themselves to you, and ask how they should refer to you.

Obviously, this won't work yet. What we need is for each choice to modify the title variable that gets passed into our call to format.

First, we need a title variable, so let's define one:

var title = "STRANGER"

We also need to use this in our call to format:

dialogue_node.bbcode_text = dialogue.format({ "title": title })

We now need to figure out how to actually set this variable when each of our options are chosen.

For this, I'm going to introduce another option to our "choices" dictionary called "call".

It's going to look something like this,

"choices": [
  {
    "dialogue": "Call me FRIEND",
    "call": ["set", "title", "FRIEND"]
  },
  {
    "dialogue": "It's CAPTAIN to you",
    "call": ["set", "title", "CAPTAIN"]
  }
]

I'll explain what my idea is here. I've added this "call" key to "choices", as in "function to call". I'm setting the value as an array where the first element is the name of the function to call, and the remaining elements are the arguments for that function. In this case, I'm wanting to call the Object#set function, which takes two arguments: the name of the property to set, and the value to set it to. So, if the player chooses the "Call me FRIEND" option, we're saying we want to call set("title", "FRIEND").

Here's how we can handle this in the code. Add this function.

func execute_current_choice():
  var call_array = get_current_choice(current_choice).get("call")

  if call_array:
    var call_method = call_array[0]
    var call_args = call_array.slice(1, call_array.size())
    callv(call_method, call_args)

This function fetches the "call" value for the currently selected choice and, if it exists, calls the given function with the given arguments. Note, we're using callv instead of call simply because it allows us to provide the arguments as an array.

Finally, we need to call this function when the choice is made. Add this just under where we handle our 'Enter' key press for selecting a choice.

if Input.is_action_just_pressed("ui_accept"):
    execute_current_choice()
    current_index = get_next_index()

One big advantage of doing it this way is it doesn't just restrict us to setting variables - we can call any function we want with arbitrary arguments, so we can do a lot more than assigning a value! More on that later though...

For now, we're ready to try this out! Run the scene a couple of times and make a different choice of title. You'll see that the character refers to you based on the choice you made in the conversation.

Conclusion

In Part 2 we added several features to make our conversations more dynamic and visually interesting.

Continue to Part 3, where we look at integrating the conversation into the context of a larger game, triggering events, and handling larger sections of dialogue.

Building a Retro Dialogue plugin for Godot, Part 1

Alex Pech — Sat, 28 Jan 2023 11:20:00 +0000

Introduction
Project setup
Defining dialogue via a script
Introducing branching conversation options
Making defining dialogue choices easier
Scripting the UI
Refining the UI controls
Cleaning up our _process function
Conclusion

Don't worry, yours doesn't need to be about apples...

Introduction

Today we’re going to build a simple dialogue system in the Godot engine. This tutorial is broken up into several parts, each including completed source code on GitHub, plus a HTML build of the project at the end of each part that you can play right in your browser.

This is Part 1, which covers,

The initial Godot scene setup, and any assets you'll need.
Scripting a conversation with branching dialogue options
Scripting UI controls to navigate the conversation

Here's an example of where we'll get to at the end of Part 1.

Click here to play it in your browser

There is also a Part 2 and a Part 3.

Part 2 covers,

Conversations with multiple characters
Advanced text effects and animation
Using variables to dynamically modify the dialogue

Part 3 covers,

Triggering events during conversation
Handling large blocks of text
Incorporating conversations into the context of a larger game

To see where we'll end up at the end of Part 3, click here

Part 4 is coming soon, and will cover how we can turn this into a reusable plugin for Godot.

The style I'm aiming for in this project is similar to retro nintendo RPGs. Think NES/SNES, or early Gameboy titles. Here's a few references for the kind of thing we want to build.

These screenshots from Chrono Trigger (1995) show how a window appears at the bottom of the screen to show dialogue, starting with the speaking character's name in all caps. Simple choices are also shown with a selection indicator pointing to the chosen option.

Ducktales 2 (1993, NES) has these character portraits beside the dialogue window to show who's speaking.

Golden Sun (2001, GBA) included a dialogue window and portrait window positioned dynamically on the screen, with simple yes/no options suitable for the smaller screen.

Donkey Kong Country 3 (1996, SNES). This game also used a dialogue window at the bottom of the screen, with selectable options built into the game scene itself.

Dune (1992, PC). A different layout and sizing suitable for a computer monitor, but still contains the main elements of a dialogue window, character portrait, and selectable dialogue options.

Banjo Kazooie (1998, N64), a slightly later game for Nintendo 64, also includes a dialogue banner with a character portrait at the bottom of the screen, and also features text colouring and animation.

Project setup

Since I’m aiming for a SNES game style, we’ll be working with a screen resolution of 256x224. I've gone with a simple static layout that will occupy the bottom section of the screen, with a height of 64 pixels. I'm also going to include a character portrait element, which will go in the bottom left, in a 64x64 square.

I plan on using the dialogue section to also include dialogue options underneath.

I like designing things top-down, so before we get into scripting, let’s start by mocking up a UI.

Assets I’ll be using:

This 24x24 sprite for the NinePatchRect (I quickly whipped this up using Piskel.
zx_spectrum font https://www.dafont.com/zx-spectrum-7.font
These 32x32 portrait images https://emily2.itch.io/pixel-portraits-32x32
These great cyberpunk sprite sets https://ansimuz.itch.io/warped-city and https://ansimuz.itch.io/warped-city-2
This 32x32 speech bubble sprite. Another asset I quickly draw in Piskel.

Having high quality assets available FOR FREE is incredibly helpful for writing tutorials like this one. If you download these assets, please remember to support artists in their tireless work and donate, if you can!

First, we have some settings to change.

Open your Project Settings (Project -> Project Settings)

Rendering -> 2d -> Snapping -> Use Gpu Pixel Snap (If you're using an older version of Godot, you might instead find this setting under Rendering -> Quality -> Turn on pixel snap. You can check out the pull request for the change in GitHub if you're interested.)
Display -> Window -> Resolution to 256x224, set stretch mode to 2D

Our scene is going to be made up of these nodes:

Control, the base node. This will contain the script for our DialogueBox
NinePatchRect, for the dialogue box. This will have four RichTextLabel children: Character name, dialogue, Choice A and Choice B
NinePatchRect, for the portrait box. This will have a Sprite for the character portrait

Let's get started!

Create a new scene. Choose 'Other node' and choose Control. Name it 'DialogueUI'.
Add a NinePatchRect and call it PortraitRect
Expand its Rect properties to set its x,y position to 0, 160, and set its size to 64x64. This will be the area for our portrait.
Select the ui_border.png image from the FileSystem and drag it into the Texture property of our PortraitRect node. Also ensure the import settings for the image have Filter unchecked so that we get crisp pixels.
Set Patch Margin to 8 pixels for each side.
Add another NinePatchRect and call it DialogueRect
Set position to 64, 160. Set size to 192x64. Update the Patch Margin to 8 pixels each side.
Set its texture to ui_border.png as well. Your viewport should be looking something like this:
Drag in a portrait image as a child of the PortraitRect. Name it 'Portrait' and position it at (32,32) to centre it. In my case, my portrait is only 32x32 pixels, so I’ve scaled it up 2x. I’ve also edited it to add transparency at the edges so it doesn’t overlap the border.

Creating the font resource:

Create a new resource of type DynamicFont. Call it zx_spectrum.tres. Drag the imported zx_spectrum.ttf file into the Font attribute of your new resource. Set the size of the font to 7.

Now, let’s start adding our text:

Add a RichTextLabel as a child of the DialogueRect and position it at the top of the dialogue box. Call it 'CharacterName'.
To set up the font, expand the Theme Overrides tab. Drag our font into the Normal Font attribute section. Add in some text to help with placement.
Add a second RichTextLabel below the first. Call this one Dialogue. Again, set the font, add some text, and position and scale it. I’ve kept the size as two lines only so that we can fit in two selection options below.
Add two more RichTextLabels for Choice A and Choice B. I’ve also added two extra labels called SelectA and SelectB, which I plan on using as indicators for which option is selected.

At this point, it should look something like this.

And your scene hierarchy should look something like this.

Defining dialogue via a script

Great! It’s starting to look like something now. Unfortunately, it doesn’t actually *do *anything yet. If we play the scene, it’ll just show us the static text we just defined.

So, what sorts of things do we want our dialogue box to be able to do?

Follow a predefined text sequence, with player choices determining the path through the conversation.
Show the name and portrait of the character currently speaking.

These two will be enough to get started. It won’t be very dynamic or flexible, but it’ll be enough to get a basic conversation happening.

Let’s get stuck into some scripting!

Add a script to our base Control node and call it DialogueUI.

Let’s start simple. Instead of having our text set in the inspector, let’s define it in our script and set it there instead. To do that, we’re going to need to define some string constants, and get some references to our text labels so that we can modify them.

extends Control

onready var name_node = get_node("DialogueRect/CharacterName")
onready var dialogue_node = get_node("DialogueRect/Dialogue")
onready var choice_a_node = get_node("DialogueRect/ChoiceA")
onready var choice_b_node = get_node("DialogueRect/ChoiceB")

func _ready():
  name_node.text = "ALEX"
  dialogue_node.text = "Hey there.\nDo you like apples?"
  choice_a_node.text = "Sure do!"
  choice_b_node.text = "No way, gross!"

All we’re doing here is grabbing our text labels and then setting their text properties when we start the scene. If you want to make sure it’s working, go ahead and change the text in the inspector so that we can see our script is actually setting the correct text.

Playing the scene gives us this:

That’s great, but it still doesn’t actually do anything. Let’s start with the most basic thing we can think of. How about, “When I press Enter, show some new dialogue”. Add this to your script:

func _process(delta):
  if Input.is_action_just_pressed("ui_accept"):
    dialogue_node.text = "This is what I'll say next."

Now, if you play the scene, the dialogue text will be replaced with this new text when you hit Enter.

Exciting stuff! But not very flexible. What we’d like instead is to be able to step through a whole list of dialogue pieces one bit at a time. To do that, we’ll need to starting tracking the current ‘state’ of our conversation.

For now, our ‘state’ will just be the index of where we’re up to in the conversation. Our dialogue will be defined in an array that we can step through using the Enter key.

Add this to the top of your script:

var dialogue = [
  "Hey there.\nDo you like apples?",
  "I like other fruits too.",
  "Bananas are my favourite!"
]

var current_index = 0

Then, change our _process function to look like this:

func _process(delta):
  if Input.is_action_just_pressed("ui_accept"):
    current_index += 1
    dialogue_node.text = dialogue[current_index]

We also need to modify our _ready function to set the dialogue initially.

func _ready():
  name_node.text = "ALEX"
  dialogue_node.text = dialogue[current_index]
  choice_a_node.text = "Sure do!"
  choice_b_node.text = "No way, gross!"

Now, when we run the scene, we’ll see that when we press the Enter key, we step through each piece of dialogue defined in our array!

There’s still some issues with our script. We’re overrunning the end of our array, so we’ll get an error once we get to the end of the conversation. Let’s fix our _process function so prevent that from happening.

func _process(delta):
  if (Input.is_action_just_pressed("ui_accept")
      and current_index < (dialogue.size() - 1)):
    current_index += 1
    dialogue_node.text = dialogue[current_index]

We will now only progress to the next part of the conversation if the next index won’t overrun the size of the array.

Introducing branching conversation options

Great! We can now create a conversation as a pre-defined sequence of dialogue sections. Unfortunately, it’s not so much a conversation as it as a monologue. Next, let’s look at how we can introduce some choices.

First, what does it look like to have choices in our conversation? How does that affect the flow of the dialogue, and how might we represent that in our script?

We currently have control in our script over which part of the conversation we show in the UI. It’s just that the only control we’ve given the player is to go one step forward. What if, instead of just stepping forward, we allow the choice the player makes to define the next index?

We’ll want to have different choices for each step of the conversation too. At the moment, each step in our conversation is just a string representing the dialogue. We need to make this more complex, so that we can include our choices in there too. For that, we’ll use a dictionary. Let’s modify the dialogue array to look like this:

var conversation = [
  {
    "dialogue": "Hey there.\nDo you like apples?"
  },
  {
    "dialogue": "I like other fruits too."
  },
  {
    "dialogue": "Bananas are my favourite!"
  }
  ]

We haven’t added any additional information for choices yet, we’ve just modified our data structure so that our dialogue now lives inside a "dialogue" key on a dictionary. We’ve also renamed our variable to conversation in preparation for this holding additional data for our conversation, other than just dialogue.

Let’s fix up our _ready and _process functions to use this new structure:

func _ready():
  name_node.text = "ALEX"
  dialogue_node.text = conversation[current_index]["dialogue"]
  choice_a_node.text = "Sure do!"
  choice_b_node.text = "No way, gross!"

func _process(delta):
  if (Input.is_action_just_pressed("ui_accept")
      and current_index < (conversation.size() - 1)):
    current_index += 1
    dialogue_node.text = conversation[current_index]["dialogue"]

Running the scene should still allow us to step through the conversation exactly as before.

Now, let’s modify our conversation array to include a choice:

var conversation = [
  {
    "dialogue": "Hey there.\nDo you like apples?",
    "choices": [
      {
        "dialogue": "Sure do!",
        "destination": 1
      },
      {
        "dialogue": "No way, gross!",
        "destination": 2
      }
      ]
  },
  {
    "dialogue": "You like apples? Me too!"
  },
  {
    "dialogue": "You don't?\nThat's a shame."
  },
  {
    "dialogue": "I like other fruits too."
  },
  {
    "dialogue": "Bananas are my favourite!"
  }
  ]

As you can see, our choices have their own piece of dialogue, plus something called destination. This is the index of the next piece of dialogue to follow this choice. Index 1 is the response for when the player says they like apples. Index 2 is for when the player says they don’t like apples.

Again, before we start writing code for a UI to manage our choice selection, let’s write the simplest code we can to test out our new dialogue paths.

func _process(delta):
  if current_index < (conversation.size() - 1):
    var previous_index = current_index

    if conversation[current_index].has("choices"):
      if Input.is_action_just_pressed("ui_up"):
        current_index = conversation[current_index]["choices"][0]["destination"]

      if Input.is_action_just_pressed("ui_down"):
        current_index = conversation[current_index]["choices"][1]["destination"]

    if Input.is_action_just_pressed("ui_accept"):
      current_index += 1

    if current_index != previous_index:
      dialogue_node.text = conversation[current_index]["dialogue"]

There’s a couple of things we’ve done here.

First, we’re using the Up and Down arrows (ui_up and ui_down) for our choice selection. We only check these when our current conversation step actually has choices. We’ll add the UI controls later.

Second, we’ve introduced a local variable, previous_index. This is how we’re going to detect changes in the current_index so that we know when we need to update the text label.

Now, if we run the scene, at the first step of the conversation we can press either the Up or Down arrow, and we’ll see the appropriate response. Afterwards, by pressing Enter, the conversation will continue sequentially.

There’s still one problem here we need to fix. If we take the “I like apples” path to index 1, we’ll end up moving forward through the “I don’t like apples” part too. We need a way to skip ahead from index 1 to index 3, where our two conversation branches come together again. Basically, our dialogue sections need destinations too.

First, add a destination to this piece of dialogue.

{
  "dialogue": "You like apples? Me too!",
  "destination": 3
},

Next, let’s handle that when calculating our update to current_index.

if Input.is_action_just_pressed("ui_accept"):
  current_index = conversation[current_index].get(
    "destination", current_index + 1
  )

This will check to see if our current conversation piece has a destination and use that to update current_index. If it doesn’t, then we just use current_index + 1 as the default.

And that’s it! Now, when you run the scene and press Up to take the “I like apples” path, you’ll skip over the negative response and continue the conversation afterwards.

Making defining dialogue choices easier

Before we continue on, there’s one more feature we can add that will make our lives a lot easier while editing conversations. At the moment, our destination values are all absolute indices within the array. This means that, if we wanted to insert an extra piece of dialogue at the beginning, we’d need to update all the destinations afterwards.

What would be a lot nicer is if we could label our conversation sections in some way, and then just say “go to part 2 of the conversation”.

Sounds much more convenient. Let’s do it!

Let’s update our conversation to look like this:

var conversation = [
  {
    "dialogue": "Hey there.\nDo you like apples?",
    "choices": [
      {
        "dialogue": "Sure do!",
        "destination": "apples_good"
      },
      {
        "dialogue": "No way, gross!",
        "destination": "apples_bad"
      }
      ]
  },
  {
    "label": "apples_good",
    "dialogue": "You like apples? Me too!",
    "destination": "part_2"
  },
  {
    "label": "apples_bad",
    "dialogue": "You don't?\nThat's a shame."
  },
  {
    "label": "part_2",
    "dialogue": "I like other fruits too."
  },
  {
    "dialogue": "Bananas are my favourite!"
  }
  ]

We’ve replaced our destination integers with some string values instead. We’ve also added some label keys with values to match the destinations we want to use.

Next, we’re going to define a helper function for us to find the index of a dictionary with a given label:

func get_index_of_label(label):
  for i in range(conversation.size()):
    if conversation[i].get("label") == label:
      return i

  assert(false, "Label %s does not exist in this conversation!" % label)

We’ve added an assert here for when we can’t find a part of the conversation with a label. If we hit this, it means we’ve make a typo or forgotten to define a particular label and we need to go back and fix it!

Finally, let’s modify our _process function to use labels to calculate updates to current_index.

func _process(delta):
  if current_index < (conversation.size() - 1):
    var previous_index = current_index
    var destination = null

    if conversation[current_index].has("choices"):
      if Input.is_action_just_pressed("ui_up"):
        destination = conversation[current_index]["choices"][0]["destination"]

      if Input.is_action_just_pressed("ui_down"):
        destination = conversation[current_index]["choices"][1]["destination"]

    if Input.is_action_just_pressed("ui_accept"):
      destination = conversation[current_index].get("destination", false)

    if destination != null:
      if destination:
        current_index = get_index_of_label(destination)
      else:
        current_index += 1

    if current_index != previous_index:
      dialogue_node.text = conversation[current_index]["dialogue"]

Instead of setting the current_index directly, we now set a destination variable instead, and then calculate the current_index afterwards. We’ll still fall back to incrementing by one if no label is defined. This saves us from needing to label every single conversation piece.

Notice that we default destination to null, and then set it to false if we haven’t got a label as a destination. We need to distinguish between these two states because null means we shouldn’t progress through the conversation at all, while false means we should step forward one. Using null and false to mean two separate things isn’t ideal, but it works well enough for now so we’ll come back and clean it up later.

That’s it! Everything should work exactly as it did before, only now we don’t need to use absolute indices as a reference for each part of the conversation!

Scripting the UI

Now that we can make choices, let’s hook up our UI so that we can select them from our dialogue box.

Let’s start by setting the text on our choice labels from our conversation data. First, let’s define a couple of new functions.

func get_current_choice(choice_index):
  var choices = conversation[current_index].get("choices", [])
  if choice_index < choices.size():
    return choices[choice_index]
  else:
    return {}

func update_text_labels():
  name_node.text = "ALEX"
  dialogue_node.text = conversation[current_index]["dialogue"]
  choice_a_node.text = get_current_choice(0).get("dialogue", "...")
  choice_b_node.text = get_current_choice(1).get("dialogue", "")

The get_current_choice function is a helper that let’s us safely fetch choices and return convenient defaults if none exist.

The update_text_labels wraps up the updates for all our RichTextLabels into one place. You can see here how we’re using the get_current_choice function here to set the text on our choice labels. When we haven’t defined any choices and our only option is to go forward, we default to using the string "..." for Choice A, and a blank string for Choice B.

We can now update our script to use update_text_labels wherever we need them to update.

Our _ready function,

func _ready():
  update_text_labels()

And, in _process,

if current_index != previous_index:
  update_text_labels()

Now when we run the scene, we should see the Choice A and Choice B labels updating as we move through the conversation!

Refining the UI controls

Great! Next thing we need to do is let the player actually select the choices available. At the moment, we’re using the Up and Down arrows to make the choice directly. Let’s change that so that Up and Down only change our selection, and the player needs to actually press Enter to make the choice. We’ll also hook up those Select A and Select B nodes so that we can show the player the selection.

Our node will now need to remember the current selection so that when we press Enter, it knows which path to take. So, to start off, let’s define a new state variable for our choice, and add code to change it when we press the Up and Down keys.

Add a current_choice variable under our existing current_index state variable.

var current_index = 0
var current_choice = 0

Change the code that runs when we push the Up and Down arrows, to change our current choice.

      if Input.is_action_just_pressed("ui_up"):
        current_choice -= 1

      if Input.is_action_just_pressed("ui_down"):
        current_choice += 1

Finally, when we press Enter, we need to go to the destination selected by our choice. There’s a little bit of complexity here now, because we don’t always have a choice, or even a destination. Let’s list the different scenarios we have:

No choices or destination. Result: just go to next conversation piece (increment index)
No choices, but destination defined. Result: find the next index based on the destination label.
choices is defined, and current choice has destination. Result: find the next index based on the destination label of the current choice.
choices is defined, but current choice has no destination. Result: just go to next conversation piece (increment index)

You’ll notice that scenario 4) isn’t something we’ve encountered yet, but it follows on from the other scenarios. As the dialogue designer, you could potentially have one choice that just continues on the main path, and another that takes you onto a side tangent and then loops back.

Currently, when we press Enter, all we do is set the destination by fetching it from our current conversation piece:

destination = conversation[current_index].get("destination", false)

This covers scenario 1) and 2), but we still need to implement 3) and 4), where we have some choices defined. Add a conditional statement around our existing code so we can handling these scenarios.

  if conversation[current_index].has("choices"):
    var choice = conversation[current_index]["choices"][current_choice]
    destination = choice.get("destination", false)
  else:
    destination = conversation[current_index].get("destination", false)

This should be pretty straightforward. If the "choices" key exists in our dictionary, fetch the "destination" for the current choice and assign it to destination. Otherwise, just execute our existing code.

That should be enough now to test out our code. Try running the scene again, and pressing Down before pressing Enter to see how the conversation will follow the second path.

Cleaning up our `_process` function

Let’s make one more improvement before moving on. We can make our _process function a lot simpler by pulling the logic to calculate our next index out into a separate function.

func get_next_index():
  var destination = null
  if conversation[current_index].has("choices"):
    var choice = conversation[current_index]["choices"][current_choice]
    destination = choice.get("destination")
  else:
    destination = conversation[current_index].get("destination")

  if destination:
    return get_index_of_label(destination)
  else:
    return current_index + 1

Now, in _process, we only need to call this, and then check if the current_index is going to change.

    if Input.is_action_just_pressed("ui_accept"):
      current_index = get_next_index()

    if current_index != previous_index:
      update_text_labels()

All of the code to calculate the destination and the current_index can now be removed from _process.

Aside: Design notes

We could make this function simpler if we decided not to allow a destination at top level of our data structure, and instead just require that a single choice is defined. For example, this,

{
  "label": "apples_good",
  "dialogue": "You like apples? Me too!",
  "choices": [
    {
      "dialogue": "...",
      "destination": "part_2"
    }
  ]
},

instead of this,

{
  "label": "apples_good",
  "dialogue": "You like apples? Me too!",
  "destination": "part_2"
},

However, this is a lot of additional boilerplate code just to say what the next piece of dialogue is. If we were using this tool across a whole project, it’d get pretty annoying needing to write out a choice array with a single item every time. In this case, we have the opportunity to keep our data structure simple by handling the complexity in the internals of our class. We only have to do this once and then we benefit from then on, so it’s a good payoff!

There’s still a couple of pretty obvious issues that we should fix:

There’s nothing to indicate to the player which option they’ve chosen.
There’s nothing stopping the player from trying to choose options other than the ones defined and causing an error when trying to fetch an unknown index from the choices array. We need to bound our choices to just those defined in our conversation.

Let’s start with the first issue. You’ll remember that when we first set up the scene we included a couple of extra nodes (SelectA and SelectB) intended to be toggled to show the current selection. Well, it’s time to make our script aware of those nodes! Let’s add them at the top of our script, under the nodes we’ve already defined:

onready var name_node = get_node("DialogueRect/CharacterName")
onready var dialogue_node = get_node("DialogueRect/Dialogue")
onready var choice_a_node = get_node("DialogueRect/ChoiceA")
onready var choice_b_node = get_node("DialogueRect/ChoiceB")
onready var select_a_node = get_node("DialogueRect/SelectA")
onready var select_b_node = get_node("DialogueRect/SelectB")

Now, when we have our first choice selected, we want to show SelectA and hide SelectB. When we have the second choice selected, vice versa we want SelectA hidden and SelectB shown.

Add this to our _process function, just under the part where we update our current_choice.

    if current_choice == 0:
      select_a_node.visible = true
      select_b_node.visible = false
    elif current_choice == 1:
      select_a_node.visible = false
      select_b_node.visible = true

This isn’t very generic (it only caters to having one or two options), but it’s enough for us to use for now.

If you run the scene, you’ll now see that pressing Down will appear to move the selection indicator down, and pressing Up will appear to move it back up again.

For this example, I’ve chosen to use two separate nodes to be shown/hidden to represent the two choices available, but your project might have different needs. You might want more than two choices, or you might want a completely different way to show the current selection. We can take a step in the right direction by pulling this logic out into a separate function which is solely responsible for displaying the current selection.

func update_select_indicators():
  var select_nodes = [
    select_a_node,
    select_b_node
  ]
  for node in select_nodes:
    node.visible = false

  select_nodes[current_choice].visible = true

This implementation works for my example, but you can change it to fit whatever your needs.

We also need to call the function when we update our current choice.

    if Input.is_action_just_pressed("ui_up"):
      current_choice -= 1
      update_select_indicators()

    if Input.is_action_just_pressed("ui_down"):
      current_choice += 1
      update_select_indicators()

We can now remove our if current_choice == 0:... code block.

Finally, now that we only call this update after an arrow key is pressed, we also need to call this at the start of the conversation. Otherwise, both select indicators will be showing initially. Update the _ready function so that we do an initial update of the select indicators.

func _ready():
  update_text_labels()
  update_select_indicators()

Try running the scene again to make sure everything is still working.

Ok, let’s fix our second issue now. At the moment, you might have noticed that if you press Up and Down multiple times, current_choice keeps incrementing or decrementing past the valid options of 0 or 1. Let’s define a few functions to help us keep our current_choice valid.

func get_current_choice_count():
  var choices = conversation[current_index].get("choices")
  if choices:
    return choices.size()
  else:
    return 1

func safe_select_previous_choice():
  current_choice = clamp(current_choice - 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

func safe_select_next_choice():
  current_choice = clamp(current_choice + 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

If we use the safe_ functions, there’s no way we can move past the first or last valid choice index. Notice in get_current_choice_count that we default to 1 if there are no choices defined. This is because we always have at least one valid choice (to move forward in the conversation).

We also call update_select_indicators() inside these functions. We want this to happen whenever current_choice gets updated, and this means we don’t need to remember to call it from within _process.

All that’s left is to use these in our _process function:

  if current_index < (conversation.size() - 1):
    var previous_index = current_index

    if Input.is_action_just_pressed("ui_up"):
      safe_select_previous_choice()

    if Input.is_action_just_pressed("ui_down"):
      safe_select_next_choice()

    if Input.is_action_just_pressed("ui_accept"):
      current_index = get_next_index()

Try out the scene again. You’ll notice now that, no matter how many times you press Up or Down, it only requires a single press in the opposite direction to change your selection.

You might now have noticed there’s one final thing to fix. If we choose the second option at the first stage, we’ll end up with a blank second option selected at the next one. We need to reset our choice whenever we progress so we don’t end up with an invalid selection.

Let’s define a function for that as well, again also calling update_select_indicators since current_choice has changed.

func reset_selection():
  current_choice = 0
  update_select_indicators()

And at the end of _process,

    if current_index != previous_index:
      update_text_labels()
      reset_selection()

And that’s it! Try out the scene a few times, taking different paths. You should be able to make choices and follow each branch of the conversation through to the end.

Conclusion

Here’s the final script for reference:

extends Control

onready var name_node = get_node("DialogueRect/CharacterName")
onready var dialogue_node = get_node("DialogueRect/Dialogue")
onready var choice_a_node = get_node("DialogueRect/ChoiceA")
onready var choice_b_node = get_node("DialogueRect/ChoiceB")
onready var select_a_node = get_node("DialogueRect/SelectA")
onready var select_b_node = get_node("DialogueRect/SelectB")

var conversation = [
  {
    "dialogue": "Hey there.\nDo you like apples?",
    "choices": [
      {
        "dialogue": "Sure do!",
        "destination": "apples_good"
      },
      {
        "dialogue": "No way, gross!",
        "destination": "apples_bad"
      }
      ]
  },
  {
    "label": "apples_good",
    "dialogue": "You like apples? Me too!",
    "destination": "part_2"
  },
  {
    "label": "apples_bad",
    "dialogue": "You don't?\nThat's a shame."
  },
  {
    "label": "part_2",
    "dialogue": "I like other fruits too."
  },
  {
    "dialogue": "Bananas are my favourite!"
  }
  ]

var current_index = 0
var current_choice = 0

func _ready():
  update_text_labels()
  update_select_indicators()

func _process(delta):
  if current_index < (conversation.size() - 1):
    var previous_index = current_index

    if Input.is_action_just_pressed("ui_up"):
      safe_select_previous_choice()

    if Input.is_action_just_pressed("ui_down"):
      safe_select_next_choice()

    if Input.is_action_just_pressed("ui_accept"):
      current_index = get_next_index()

    if current_index != previous_index:
      update_text_labels()
      reset_selection()

func get_index_of_label(label):
  for i in range(conversation.size()):
    if conversation[i].get("label") == label:
      return i

  assert(false, "Label %s does not exist in this conversation!" % label)

func get_next_index():
  var destination = null
  if conversation[current_index].has("choices"):
    var choice = conversation[current_index]["choices"][current_choice]
    destination = choice.get("destination")
  else:
    destination = conversation[current_index].get("destination")

  if destination:
    return get_index_of_label(destination)
  else:
    return current_index + 1

func get_current_choice(choice_index):
  var choices = conversation[current_index].get("choices", [])
  if choice_index < choices.size():
    return choices[choice_index]
  else:
    return {}

func update_text_labels():
  name_node.text = "ALEX"
  dialogue_node.text = conversation[current_index]["dialogue"]
  choice_a_node.text = get_current_choice(0).get("dialogue", "...")
  choice_b_node.text = get_current_choice(1).get("dialogue", "")

func update_select_indicators():
  var select_nodes = [
    select_a_node,
    select_b_node
  ]
  for node in select_nodes:
    node.visible = false

  select_nodes[current_choice].visible = true

func get_current_choice_count():
  var choices = conversation[current_index].get("choices")
  if choices:
    return choices.size()
  else:
    return 1

func safe_select_previous_choice():
  current_choice = clamp(current_choice - 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

func safe_select_next_choice():
  current_choice = clamp(current_choice + 1, 0, get_current_choice_count() - 1)
  update_select_indicators()

func reset_selection():
  current_choice = 0
  update_select_indicators()

And that's the end of Part 1!

Continue to Part 2, where we look at adding multiple characters, text animation, and how to insert variables.

DEV Community: Alex Pech

Building a Retro Dialogue plugin for Godot, Part 3

Table of Contents

Part 1/2 Recap

Introduction

Triggering conversation events and scrolling text

Fixing the text skipping feature

Integrating conversations into your game

Conclusion

Building a Retro Dialogue plugin for Godot, Part 2

Table of Contents

Part 1 Recap

Introduction

Swapping characters

Animating the text, printing character by character

Adding effects using bbcode

Variables

Conclusion

Building a Retro Dialogue plugin for Godot, Part 1

Table of Contents

Introduction

Project setup

Defining dialogue via a script

Introducing branching conversation options

Making defining dialogue choices easier

Scripting the UI

Refining the UI controls

Cleaning up our `_process` function

Aside: Design notes

Conclusion

DEV Community: Alex Pech

Building a Retro Dialogue plugin for Godot, Part 3

Table of Contents

Part 1/2 Recap

Introduction

Triggering conversation events and scrolling text

Fixing the text skipping feature

Integrating conversations into your game

Conclusion

Building a Retro Dialogue plugin for Godot, Part 2

Table of Contents

Part 1 Recap

Introduction

Swapping characters

Animating the text, printing character by character

Adding effects using bbcode

Variables

Conclusion

Building a Retro Dialogue plugin for Godot, Part 1

Table of Contents

Introduction

Project setup

Defining dialogue via a script

Introducing branching conversation options

Making defining dialogue choices easier

Scripting the UI

Refining the UI controls

Cleaning up our _process function

Aside: Design notes

Conclusion

Cleaning up our `_process` function