An introduction to JSON dialogue systems

15

Index

Tagged

Features on these Courses

Attached Files

The following files have been attached to this tutorial:

.c3p

Stats

7,728 visits, 19,217 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Setting up the example project

We’ll kick off this tutorial by outlining what you’ll need to recreate this project.

First of all, you’ll need to add the AJAX, JSON and Touch objects to the project – these are your ‘system objects’ so you don’t need to do anything more with them at the moment. The project uses two layers – when text is being displayed, the dialogue layer is set to visible and it’s invisible the rest of the time. If you’re using the free version, you could use one layer and create/destroy the text box objects as you need to.

Next, you’ll need four different text objects – one to display text dialogueTxt, one for the character’s name charNameTxt, one to show the player instructions demoTxt and one to show which scene/line of dialogue is currently being displayed debugTxt. The dialog, debug and charName text objects should all be on the Dialogue layer, while the demo text object should be on the Main layer.

You’ll then need three sprites – one to show your character’s portrait, and two to make up the text box itself. With your character portrait sprite, make sure any animations you have are names the same as the character names in the JSON file as these will be used to call the correct animation.

The main text box sprite will act as a background for the dialogue text box, while the smaller ‘Name’ sprite will act as a background for the character’s name text.

You can arrange your layout however you want, but the example looks something like this:

The next thing you’ll need is the JSON file itself. If you’re unfamiliar with JSON, this site (W3Schools) has some great resources and there’s also a little explainer event sheet included in the example file. The C3 manual also is a good reference point more specific to Construct.

In the JSON project file used in this example project, the root is named scene, and it is an array containing multiple elements:

“scene”: [0,1]

Both 0 and 1 contain an array named dialogues, which in turn contains the keys char and line. The element Char will tell the game what the name of the NPC is, while Line dictates what text is displayed.

You can tweak, add to or otherwise edit the JSON as you need to, but this is a good starting point. You can also create your own JSON file by right-clicking the Files folder in the Project Bar and selecting New, JSON from the menu.

And that’s everything structure-wise you need to create this project. Now we can move onto the events you’ll need!

  • 15 Comments

  • Order by
Want to leave a comment? Login or Register an account!

  • My god. I've been sitting with this the whole day, not understanding what I'm doing wrong. Looks like I forgot an "s" at the end of 1 word. Never give up people...

    Thank you so much, amazing guide!

  • This is really tough for a beginner. I got stuck at the final return value 'on function format' I could not figure out how to implement the replace() expressions. Even looking at the final .json i could not work out how to enter the 'System ▶︎ Set Line to replace(String,"(b)","[ b]")' or other 3 lines???

  • Sorta newb in Construct, trying to follow this tutorial and am stuck- I added a local variable1, but cannot add another just like it without it having a different name. Will that matter? How did you add an identical local variable when the program doesn't allow it?

    Thank you!

    • I doesn't matter. It's because if you select the function and press V, you create a local variable outside of the function. That's why it doesn't let you name it Variable1 again. I found 2 solutions to the problem.

      1. Just create the Variable2, them move it in to the function and rename it to Variable1 once inside.

      2. Select a condition inside the function and press V(shortcut for creating local variable). That way you can just name it Variable1 right away, since it's inside.

      You probably solved it by now but I thought this might help someone.

  • Thanks so much for your tutorial. I am new to Construct 3. I can't figure out how you added a local variable. I'm on page 3 of your tutorial and I'm stuck. I got as far as LOCAL NUMBER, VARIABLE1 this. How do I add a local variable? And furthermore, how do I add it to the event page? Thanks.

  • still a tiny error on the initial actions, the json command is not load is parse, it was good that the last comment has it right, or I would have never find how to use this.

  • Load more comments (8 replies)