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!