Sites


Creating Point and Click Games with Escoria

Dialog interface

So, as we see in the previous chapter "Speech Text", you can make your characters speak in a nice way now. But one of the most important features of a point-and-click adventure game are the dialogue trees, where the player can react to choices offered by a non-playing character. This is slighty more complex to implement in your game, but a dialog selection is just an advanced version of a speech text, so don't worry.

In practice, when a dialogue starts, a UI shows up with multiple choices, to start a conversation with a character. Our game can have multiple versions of the dialog selection UI, in the same way than the speech texts, and each version can have multiple avatars, in the same way than the text display UI.

Introdution to esc scripting for dialogs

We will not speak about the esc scripting part of dialogs in this chapter, because you will need to know more about the esc scriting concepts to manage them correctly. But here is an example of what it look like so you can have a first idea:

:talk
? type avatar timeout timeout_option
    - "I'd like to buy a map." [!player_has_map]
        say player "I'd like to buy a map"
        say map_vendor "Do you know the secret code?"
        ?
            - "Uncle Sven sends regards."
                say player "Uncle Sven sends regards."

                >    [player_has_money]
                    say map_vendor "Here you go."
                    say player "Thanks!"
                    inventory_add map
                    global_set player_has_map true
                    stop

                >    [!player_has_money]
                    say map_vendor "You can't afford it"
                    say player "I'll be back"
                    stop

            - "Nevermind"
                say player "Nevermind"
                stop
    - "Nevermind"
        say player "Nevermind"
        stop

As in speech texts, when starting a dialog, a type is specified (or not, in that case the type is "default"). An avatar can also be specified. There are two additional and optional parameters, "timeout" and "timeout_option", which allow to force a choice after some time if the player didn't choose quickly enough. 

We will speak in detail about how to script dialogs in the "Dialog Trees" chapter of the "What you need to know as a game designer" section of this book.

Dialog selection type scenes

So let's focus for now of the dialog selection type scenes, which are similar to the speech type scenes.

To configure the list of available dialog types, we edit the scene found in another dedicated list scene file, which is globals/dd_player.scn. Again, this is a ResourcePreloader node, meaning it preloads all the available scenes for each dialog type as a resource. The name of each preloaded resource will be used as the type name of the dialog. You should have one dialog available with the name "default", and add any additional dialog scenes you want to use.

A dialog selection scene itself is a somewhat complex scene, because it needs to be created dynamically by the dialog selection script. The root node is a Node2D with a script found in globals/dialog_dialog.gd.

It's mainly constituted by three parts:

  1. A container where all the dialog options will appear, technically it's a ScrollContainer node that can be skinned
  2. A dialog option template which will be repeated as much as needed, technically it's an "item" node that contains the basic structure of a dialog item
  3. and an AnimationPlayer node, with "show" and "hide" animations as in speech texts. Optionally, a "timer" animation can be provided, that will be played when a timeout parameter is provided, scaled to reflect the time left.

An example scene can be found in ui/dd_default.scn, here is the complete structure:

A dialog scene structure

The "anchor" container consists of another node structure that will contain all the dialog options, configured by the script. The structure is:

  • A node of type Node2D named "anchor". This is used to move and scale the whole structure around, usually by the show and hide animations. If you'd like to have a background image, add it as child of this node.
  • A child ScrollContainer node named "scroll"
  • as child of the "scroll" node, a VBoxContainer node called "container". This is where the dialog items are added, if there are too much of them, the player will be able to scroll vertically
  • A node of type Node2D named "avatars" as child of the "anchor" node. This node can have one or more children, usually of type Sprite with different avatars. The name of the node will be used as the avatar type. When an avatar is specified, the node with a name that matches the avatar type will be shown, everything else will be hidden.

The dialog "item" is a small node structure inside the scene which provides a template of one dialog option, that will get duplicated for each option we need to show. The structure for the item is:

  • Control node, named "item". This node needs to have a "min_size" property with the minimum size of each option. This is different from the actual size of the Control, so make sure to put the correct value here. The min_size property is under the Rect section on the Control properties.
  • A child node of type TextureButton, named "button". This is the clickable area of the option.
  • A child of the button of type Label, named "label". This will show the text of the option, and you can load your font.

Additionally, we can have a node of type AnimationPlayer with name "animation". This player can have 3 animations, "show" and "hide", which will be played when the dialog is opened and closed, and "timer", which will be played when a timeout value is supplied. Note that when opening the example dialogue scene, the "hide" might have been executed, so the dialogue might be invisible. Try running the "show" animation first.

Finally, here is an example from our mini-game:

Dialog type scene example

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.