Skip to content

Creating & Editing a Dialog Graph

lvanderlyn edited this page Feb 24, 2023 · 19 revisions

Creating a New Node

To create a new node, you can click on the green plus symbol at the left of the menu bar. A new dialog node will then be created right under the menu bar and you can then drag it to whatever position you would like.

Bildschirm­foto 2023-02-23 um 17 28 39

If you want to create a different type of node, you can click on the green arrow to the side of the plus button to choose the type of node that should be created.

Bildschirm­foto 2023-02-23 um 17 33 05

Alternatively, you can left-click on any empty part of the screen and choose Add New Node.

Bildschirm­foto 2023-02-23 um 17 34 05

Editing a Node

Adding System Output

To specify what the system should output at a given node, you can double-click on the text "Add a new system message...". All nodes which output system text (dialog nodes, information nodes, and variable nodes) will start with this as the default system text.

Bildschirm­foto 2023-02-23 um 17 42 12

To help find the field, it will turn yellow when you hover your mouse over it.

Bildschirm­foto 2023-02-23 um 17 49 08

Double-clicking on this field will open a text editor which you can use to format how the system output should look.

The editor has an interface that should be familiar from other word processing programs like Microsoft word. Here you can add bullets, images, or links, as well as changing text size, colour, highlighting, weight, etc.

Bildschirm­foto 2023-02-23 um 18 01 21

Note: To keep your changes, make sure you click on the save button. Clicking the X or clicking anywhere outside the editor will close the editor and discard your changes

Adding User Responses

In order to add a new possible user response, you will have to change a node to edit mode. To do this, click on the pencil icon at the top right of the node (this will turn green if you hover over it)

Bildschirm­foto 2023-02-23 um 18 11 57

Once you enter edit mode, you will see the option to add new user responses

Bildschirm­foto 2023-02-23 um 18 12 25

If you click on the blue button, a new user response will be created with the default text "Add a new user response..."

Bildschirm­foto 2023-02-23 um 18 22 06

Editing User Responses

If you are in edit mode, user responses can be edited in much the same way as the system text. Double click on the user answer you wish to edit.

Bildschirm­foto 2023-02-23 um 18 23 10

This will open up a text field where you can define an example of what text the user could write

Bildschirm­foto 2023-02-23 um 18 24 10

Since these possible answers are not displayed, you don't need to worry about formatting them.

Note: User responses can only be edited when a node is in edit mode. Otherwise, clicking on a user response will cause the view to jump to the connected node. This can help if you aren't sure which node is the follow-up node.

Reordering Answers

While in edit mode, you can also change the order answers are displayed by clicking on the up or down arrow(s) next to an answer.

Bildschirm­foto 2023-02-23 um 18 27 00

As follow up nodes are connected with the answer and no their position, they will also shift when the answers are moved. This can be useful if you want to reduce the number of overlapping connections.

Note: You can only rearrange the answers while in edit mode, and can only move them place up or down at a time.

Defining a Variable Node

Like dialog nodes and information nodes, variable nodes are used to output some type of text to the user (in this case a question) and the first thing you generally will do is define what exactly the system should say.

Once you have done this, you will need to define what type of input you are expecting from the user and the name that should be used to save the user input for later. To do this you can click on the text in the purple box in the middle of the node. By default this will say "VAR_NAME" but once you have named your variable, it will display the name you have chosen.

Bildschirm­foto 2023-02-24 um 11 49 52

When you open the variable editor window, you will be asked to first enter a name for your variable. This name must be all caps and not contain any spaces. The editor will not allow you to enter a name which does not comply. If you would like to use multiple words, you can consider replacing a space with a dash or underscore.

Note: When referencing variables later (in logic nodes, variable update nodes, or with the template syntax) you will need to write them the exact same why you entered them into the variable node you used to create them (all caps; no spaces) or they will be processed as normal text.

Then you will be asked to specify what type of response you expect from the user: text, number, or yes/no. This will be used by the dialog policy to make sure the user provides the right type of answer, e.g., not saying "blue" when asked what height they are. This will also be used by logic nodes and variable update nodes to make sure that only reasonable comparisons/mathematical operations are offered, e.g., not suggesting you divide "blue" by 2 or check to see if "yes" is greater than 5.

Bildschirm­foto 2023-02-24 um 11 54 34

Defining a Variable Update Node

To edit a variable update node, double click on the text box in the middle of the node.

Bildschirm­foto 2023-02-24 um 12 02 30

This will open up the variable update node edit window where you can choose between creating a new hidden node or updating an existing node's value

Creating a New Variable

If you choose to create a new variable, you will first be prompted to choose a name for it. Although the value of the variable won't be based on user feedback, the same rules apply for naming a hidden variable as for any other type of variable. Once you've chosen a name, you will then need to define the type of data you plan to save in the variable. Hidden variables can only contain numbers or yes/no values.

Bildschirm­foto 2023-02-24 um 12 04 07

With the basic information defined, you are now ready to choose what value your variable can store. You can define it with a value, e..g, yes/no, a number, or the value of another existing variable. Do this by entering the value or variable name in the left field at the bottom of the node.

Bildschirm­foto 2023-02-24 um 12 05 18

However, you can also use a hidden variable to store the result of an expression. To do this, first choose the left half of the expression by adding a value or variable, then choose what operator you want. In the example below we said this is a number variable so we have math operations available.

Bildschirm­foto 2023-02-24 um 12 05 46

Finally, you can define the right side of the expression to be another value or variable. The dialog system will then evaluate your expression and store the answer in under the variable name you defined.

Bildschirm­foto 2023-02-24 um 12 06 21

Updating a Variable's Value

To update a variable's value, you first need to select which variable you want to change. All variables that the editor finds will be displayed, to choose from.

Bildschirm­foto 2023-02-24 um 12 06 43

Once you've chose the variable, you then need to choose what the new value it should have will be. Like for defining a new variable, if you only add something to the left side, this means you are changing the value to either another the value of another existing variable, or to a new number or yes/no value.

Bildschirm­foto 2023-02-24 um 12 08 33

However, you can also add an operator and an argument to the right side if you want to set the new value of the variable to be the result of an expression, e.g, if you want to say that your variable should be increased by 5 you could create something like the node shown below:

Bildschirm­foto 2023-02-24 um 12 28 04

Don't forget to click save before closing

Defining a Logic Node

To start editing a logic node, you first need to choose the variable on whose value you plan to branch your dialog. To specify the variable, you can double click on the orange outlined box at the top of the node.

Bildschirm­foto 2023-02-24 um 12 29 30 Bildschirm­foto 2023-02-24 um 12 32 41

This will open a pop-up window where you can choose from a list of nodes found in the editor.

Bildschirm­foto 2023-02-24 um 12 33 29

Don't forget to click save before closing.

Once you have added the variable, you can then start to define under which conditions you want to branch your dialog. To do this, click on the edit symbol at the top right of the logic node.

Bildschirm­foto 2023-02-24 um 12 36 17

Then click on the blue button to add a new condition.

Bildschirm­foto 2023-02-24 um 12 36 34 Bildschirm­foto 2023-02-24 um 12 36 55

If your variable contains a yes/no answer, the node will be auto-populated with the conditions "True" and "Else"

Bildschirm­foto 2023-02-24 um 12 40 43

Otherwise, once you've created a condition, you can edit it by double-clicking on it as long as you are still in edit mode. This will open up the condition editor window where you can define under which circumstances a branch in the dialog should be chosen.

Bildschirm­foto 2023-02-24 um 12 41 16

Depending on the type of variable you chose, different conditions will be available

Bildschirm­foto 2023-02-24 um 12 41 45 Bildschirm­foto 2023-02-24 um 12 46 45

Don't forget to click save before closing the condition editor.

Connecting Nodes

Connecting nodes is as simple as clicking on the connection port on the right side of a node and dragging it to the connection port on the left side of the node you want to connect it to.

Bildschirm­foto 2023-02-24 um 12 56 53 Bildschirm­foto 2023-02-24 um 12 51 46

Note: While you can connect backward (from a node on the right of a view field to a node farther left), you must always connect from the right port (exit side of the node) to the left port (entrance side of a node). It is not possible to connect anything to the right side of a node. It is only possible to connect from that side

Deleting

If you accidentally create a node, answer/condition, or connection that you don't want, you can either user the undo button to reverse an action or use delete mode to remove the unwanted entity.

To enter delete mode, click on the trashcan icon in the menu bar.

Bildschirm­foto 2023-02-24 um 12 58 41

When delete mode is activated, the trashcan will turn red and anything you click on (nodes, edges, or answers/conditions) will be deleted.

Bildschirm­foto 2023-02-24 um 13 00 55

Once you have deleted something, delete mode will automatically be disabled.

To delete multiple entities at once see the keyboard shortcuts page