Yarn

First thing you want to do is create the images for the Dialogue Tree/Yarn

Background for Dialogue - This will pop-up and the text will show on top 

600 x 120 px

DialogueBackground

Name Tag/Avatar - This will show who is speaking

32x32

HeroAvatar

Name Tag 2/Avatar - This will show who is speaking

32x32

BadGuyAvatar

Arrow - This is for making a decision

32x16

DialogueArrow

Create Global Variables

Game Settings > Properties> Global Variables

Add new text object

In scene tab > Add new Object > Text

Name the object Dialogue

Font Color White because it will be going on top of the Dialogue Background

Text: Text

Create a second text object

Add new Object > Text

Now we are going to create a new Sprite that will use the art from HeroAvatar ands BadGuyAvatar

Name it Avatar

Add Animation

Add Sprite

For Animation #0 leave it blank

Add Animation

Name animation #1 Hero

click add sprite and select the HeroAvatar

Add Animation

Name animation #2 BadGuy

click add sprite and select the BadGuyAvatar

Apply

Create a new layer called Dialogue

Move everything you are working on into the Dialogue layer so that is stays set on the screen (not moving) 

Extend your text object box to fit your DialogueBackground

This is where the dialogue will stop and move to the next line

Open the Events Tab

Create a new group

Hide the Dialogue, DialogueOptions, DialogueArrowr, and DialogueBackground

Add action 

Load dialogue Tree from json file

Click Create with Yarn

Yarn will open

Click file

Select Save as Json

Save file in your GDevelop Project
This PC>Documents>Gdevelop projects >whatever file your project is in

Save file as Dialogue.json

This is called a node

Double click on the node to open and edit

Change the same of Start to First because it is going to be the first conversation

In the first line, add << Avatar Hero>>

This will create the command Avatar in Yarn and hero is the name of the animation

In line 2
Hey!

In line 3
<< Avatar BadGuy>>

In line 4
Hi, How are you

Now we are going to add the options and create additional nodes

Click on the link button 

Line 5 Add 

I'm Good  between the brackets

[[ I'm good| ]] |]]

Remove the gray/black |]] from the end of line 5

Add Good after the blue|

[[ I'm good |Good ]] 

Good is going to be the name of the node in your dialogue tree

In line 6, add

[[ Terrible |Bad]]

This will create the Bad Node

Click out of the node and now you can see we have three

Organize your nodes how you wish then click on the node called good

You will be continuing the conversation here

Keep the same Avatar Hero and respond as hero

Do the same with the bad node

Click off your node the right click in the workspace to create a new node

Open up your new node and name it second

This is going to be the next conversation you have if you interact with the sprite a second time

Once you are done, click apply > OK

Add a new event

Condition

Dialogue is Running

Action

Show dialogue

Show dialogueBackground

Activate behavior PlatformerObject of hero : No  (We don't want the character to be moving around when they are talking)

So you have the condition and action when the dialogue is running and now you need to create one for when it is not running

Create a new event

Condition

Dialogue is running (We want to invert this condition so that it's when dialogue is NOT running)
Key in Pressed X

**Make sure you arrange the conditions in the following order**

Key Pressed

Inverted Dialogue so that it is NOT RUNNING

we need to add one more condition

Value of a scene timer (We will add a half second once the dialogue has finished so you have time to read it.

We are making up a name for a timer (we will use it later)

Action

Hide dialogue

hide dialogue background

activate hero behavior

Animation by name

Object nameTag

Animation name None

Create a new evet

Condition

Command is Called

The command is Avatar

Action

Change the Animation by name

Avatar

Set to

Click the expression builder (Use an Expression)

The expression

DialogueTree::CommandParameter(0)

So what is going on here?

In Yarn

<Avatar Hero> Hi!

1. The dialogue system sees the command <Avatar Hero>.

2. In GDevelop, you'd have an event that is triggered when the command "Avatar" is called.

3. Inside that event, the action you show is setting the object's animation name to: DialogueTree::CommandParameter(0).

4. Since "Hero" is the first parameter (index 0) after the command "Avatar", the expression returns the text string "Hi!".

5. The object's animation is then set to the animation named "Hero".

In short, DialogueTree::CommandParameter(0) is taking the first word (or value) that immediately follows a command in your dialogue script and using it as the new animation name for the object.

Create a new event

Condition

Key Pressed Q (or whatever you choose)

Variable Value of DialogueState is = 0

Condition continued

Dialogue is NOT running

Hero distance to BadGuy is below 300

Now we are going to create the timer that we referenced earlier "ScrollText"

Start (or reset) SCENE timer

Timer name "ScrollText"

Add action 

Start dialogue from Branch (So it is grabbing the info from the First node we created in Yarn). 

Change the Global Variable "DialogueState" to 1

Duplicate the event

Change the Condition Variable DialogueState to 1

The reason you want to do this is because in the previous event, we changed it to 1 in the action.

Remove the action Change the variable DialogueState Set to 1 because we only have two pieces of dialogue

Change "Start Dialogue from Branch"  to second because we want the second node firing

Now we add the dialogue in the text

Condition

Dialogue Line Type 

Text

Action

Text 

Change the text

Dialogue

Set to

Get Dialogue line text clipped