Dialogue using Yarn

So I’ve been dabbling in GDevelop for a while now and learning the ins and outs of the system and it’s all been pretty swell. I’ve created multiple little games and practise projects and never had quite such an issue as I’m having with Yarn. It feels like nothing makes sense and no amount of wiki reading and tutorials seem to help me with it.

I can create dialogue with it and it works, kind of, but I’m having issues when I need to display different dialogue to the user or change the dialogue branching. So a few things I need to mention:

  1. There’s a Dialogue Box on screen which I use to display ANY dialogue. This includes Narration and Character Dialogue. The box is just a simple Sprite image with a Text object layered on top of it. Both, the Text and Sprite hide when there’s no dialogue and show when there’s dialogue.

  2. Depending on which Character is doing the talking, the colour of the Dialogue Text should be in different colour. For example Character1 could have Green Text and Character 2 could have Blue Text and Narration could have White Text.

I’ve no idea how to do this. I can’t wrap my brain around the system. Would love to have somebody to just show me, hand holding style, images or examples. Do I just need three Text objects with different colours assigned to them?

  1. I have absolutely no idea how to change the dialogue on the fly. Let’s say The dialogue starts with a Narration and says something like “It’s a beautiful day!” and then switches to Character1 saying “It truly is a beautiful day!” and then followed by Character2 “Indeed it is!” Only the text would change the colour depending on who’s talking. And maybe put quotation marks around the Character1 and Character2 dialogue to separate them from the narration.

I suppose each “thing” doing the talking needs its own Text object on screen and I’m just supposed to show the right one at the right time, but then how do I inject the dialogue in it the proper way so that it makes sense? Or if not, then how.

At this point I’m ready to ditch Yarn altogether and just switch to using string variables or something that I’ll call to the proper text box when it’s their turn to talk. I’ve never had this much difficulties creating dialogue in any system ever. It feels like it’s about 10x easier to create working dialogue just by coding it from the scratch using Python or C#.

I would need this explained like I was a 4 year old basically. Yarn confuses me.

Hello @BossWeapons,
I resolved it using the commands into Yarn.
In my case I move “a piece of code” from GDevelop to Yarn.

Example:
In Yarn create a text box with these two lines:
<character 1> Hello, my name is 1
<character 2> Hello 1, my name is 2
<character 3> Hi all, it’s 3

In GDevelop
-condition (first level):
-Command “character” is called ← it means that in Yarn GDevelop read the command <character …>
–condition (second level):
–DialogTree::CommandParameter(0) = 1 ← it means that in Yarn GDevelop read the command <character 1>
–event: change file animation name “Char1” and color text as red
–DialogTree::CommandParameter(0) = 2*<-- it means that in Yarn GDevelop read the command <character 2>*
–event: change file animation name “Char2” and color text as blue
–DialogTree::CommandParameter(0) = 3*<-- it means that in Yarn GDevelop read the command <character 3>*
–event: change file animation name “Char3” and color text as green

You can read the code in the wiki : The Dialogue Tree extension [GDevelop wiki]

Thanks, it took a bit of figuring out, but I managed to do what you suggested.
To give an example, if somebody else is struggling with the same issue, I managed to make the names and dialogue work this way:

In Yarn. I just typed out the dialogue as per usual. Something like this:
<< name Bear 150;150;150 >> Hi! I’m a bear!
<< name Chicken 200;200;299 >> Hi, Bear! I’m a chicken!

In GDevelop I made a new event:
Command << “name” >> is called
And for that event:
Change the text of text_box_dialogue: set to DialogueTree::CommandParameter(0)
Change color of text_box_name to DialogueTree::CommandParameter(1)

What this does is that every time the command “name” from our .json file is called, it puts the command parameters 0 (the first one after the name, a name in this case) and 1 (the one after the first, a colour value) and then directly takes what is written there and then puts it in the text boxes.

Edit: While this works, there’s a matter of the name updating slightly slower than the actual dialogue, on the first time around. The succeeding name changes during the dialogue are instant.

What I mean by this, for example, if you have a text_box_name object on screen with your font and the text size etc. And you’ve typed in something like “This is an example text!” you can see that example text for a split second before it switches to the name in the .json file. Leaving it blank works, but there’s still a noticeable delay before you get the first name on screen. Any future name changes during this one particular dialogue are instant however. Not sure how to fix this if it’s even possible.

Hello BossWeapons,
I’m happy that my explanation helped you (it’s not simply to describe code in English for me)
About the delay, I’m sorry but I don’t understand your question.
Can you cut/paste here an example ?

(I think this is a user-unfixable issue, see Edit 2 below)

Another way of doing it would be to colour your text in the Yarn editor for each line by wrapping lines (or words) with colour tags. You would need to use the BBText object instead of the text object to do that.

yarn_editor
bear

Edit: I have just tested the bbtext idea and the delay happens before the word ‘bear’ is encountered. Very odd. This behaviour is also present in the GDevelop example (link below). Talk to the signpost after it’s done with its initial text and you’ll see what I mean: a delay before the sentence starts (the first few words are red) and a delay before the blue word, spacebar, appears. I have read the events and the Yarn json and can’t see any reason for this delay before a coloured word appears. This behaviour is much less noticeable, but still there, when using bold and italic text.

Edit 2: I think I know what’s wrong. I guess it’s a bug! It’s almost as if the text scrolling behaviour is reading the tags too, not just showing the result of them. So it’s typing out the ‘[color=#ff00ff]’ and then showing you the word ‘bear’ and then there’s a small delay while it types out ‘[/color]’. You can’t see the tags being typed, but I think that’s how they are being processed. That’s why things like ‘[i]’ cause less lag! If I hold my ‘go faster’ button during dialogue, the coloured words still lag, but not as much, so this is consistent with my theory. The extension needs to read the tags but exclude them from the typewriter scrolling behaviour.

Edit 3: You can use ‘Complete clipped text scrolling’ so the whole sentence appears (no lag at all), but that means no typewriter effect. You could make coloured words appear very quickly using a Yarn command, so that the tag typing isn’t obvious, but then the coloured words would appear so quickly it would look odd in a whole new way!

I think I figured my problem out, at least partially. I was using a timer to delay the text scrolling for clipped line text and that’s what was causing the very short delay for one of the text objects when it appeared on screen. I played around with the order of the conditions and actions, grouped them together a little bit more and managed to get a satisfactory result.

The delay is still there though, but it far less noticeable now. I think it’s just as worriedpixels said. The issue probably lies in how GDevelop processes through Yarn and there’s not much a user can do about it. Though it might just be me being a dumb dumb too.

I suppose if you know how to code with javascript you could make your own code block to handle it better, but that’s out of my expertise.

1 Like