The Click to Speak Editor, TextEditor3, provides an array features and options that you can use to build your own Click to Speak stories and adventures! This guide is here to help you get familiarized with the basic features of the editor, so you can jump right in and start building.

Getting Started

Starting a New Game

The first thing you'll see when you open the editor is this dialog box:

Clicking "Open Game" can be used to open and edit previously saved Click to Speak game files, such as our sample game.

Choose "New Game" for now.

Starting a new game will first prompt you to name your characters.

  • PC, the player character, will be used for the player's responses. The Player Character will not be interacted with during a game, this character will speak responses to the...
  • NPC, the Non-Player Character, is the character that the player character will be interacting with (and interrupting!) throughout the course of the game. If you wish to have the Player Character interact with multiple NPCs, you may want to name this something that indicates that an NPC is talking, but that doesn't name the character. Don't worry about this too much for now, you can always change it later from the "Edit" menu.

Let's assign names for our characters. I'm going to use the names from our sample game, which you are free to open in the editor to explore its features on your own:

Editor Basics

After you choose your character names, you will be presented with the editor interface. Don't worry about the tabs and menus at the top just yet, first we're going to explore the basic operation of the "Main Script" tab, which will contain all the dialogue paths for your game.

When you start a new game, all you see is a single "Node" at the top. This will represent the first piece of dialogue in your game. By default, it's set to the player character, but you can use the drop down menu with the character names to have the non-player character speak first. Let's leave it as the PC character for now.

Now, type something in the box that you want your character to say! You'll have to provide a corresponding audio file later to hear it spoken in the player, but by typing it out first, you can plan out the dialogue paths before recording.

Since your character now has something to say, the NPC should now say something in response. See the button labeled ">" at the left of this node? Click on it!

You'll notice that that a new node has appeared beneath this one. It's a "child" of this node, meaning that it represents a possible dialogue path for the game to take. You'll also see that it's indented a little bit from the first node, so that you can tell that it's a child of this node. Player character nodes (in this case, Agent 008) can only have one child, which is the NPC's response to their dialogue.

You'll notice, however, that the NPC node that was created for a response to the PC node has an asterisk with a colored background in the text box. Since you (the player character) can interrupt the NPC at different points in their dialogue, NPCs can have multiple child nodes. Let's see how this works.

Go ahead and type something in the NPC box that represents their response to the PC, and click the ">" button on the NPC node to expand it. Just like the PC node, a new node has appeared, but this time it's another player character node.

Now, type another asterisk, followed by some more text, inside the NPC node. A second child to the NPC node now appears! Since the player will be interacting with the NPC character, the colored text following each asterisk (and the newly created node labeled with the corresponding color) represents the different paths that the dialogue can take. For instance:

By interrupting the NPC character while he says "Now that I have you at my mercy, Agent 008", the player character will respond "The crocodile pit? Again? Really? Couldn't you at least come up with anything new?" But if you interrupt the NPC character while he's saying "nothing can stop my diabolical plan!", the player character will respond "At your mercy? Come on, Doctor Nefarious, you know I always escape from these things. Why don't you make it easier on all of us and surrender now?" You'll notice that the character initially responds to the situation, and then responds to the previous piece of dialogue - that's because you're interrupting the following phrase, which hasn't finished being spoken yet. It wouldn't make much sense for Agent 008 to respond to Dr. Nefarious' assertion of being at his mercy, if Dr. Nefarious hasn't finished speaking this line yet!

By typing more asterisks and adding more dialogue, you can create a complex tree of dialogue based on what NPC dialogue the player chooses to respond to:

Other Information about Nodes

  • Typing text in a new PC node will create a new NPC node as its child.

  • Typing an asterisk into an NPC node will create a new child PC node beneath it, based on where you type the asterisk.

  • Pasting in multiple asterisks will create multiple new PC nodes.

  • If you type an asterisk between two existing asterisks, the new child node will be inserted in between the two corresponding nodes.

  • If you delete an asterisk or select and delete multiple asterisks, the nodes will be removed and sent to the Orphan Tab. (more on this later)

  • Asterisks can be dragged around the text box to change their position.

  • You can manually set PC nodes as the child of another PC node, or an NPC node as the child of another NPC node, if this works for the game you are building.

  • You can give nodes "nicknames", set in the "ID" text field, to make them easier to find, especially when you have built a large game.

Try building your own dialogue tree with three or four levels of dialogue depth! With a lot of dialogue visible, it can get messy to have all of it visible at once: Sometimes you want to work with just the children of one node, without all the children's children and so forth in between! You can click the minimize/expand button (labeled ">" for minimized or "V" for expanded) to make a node's children visible or invisible, so you can look at only the nodes you want to work with.

Audio

Adding Audio

Now you have some dialogue, but to be able to listen to and interact with the game, you need to include some audio. Let's start with the first PC node. Click the button labeled "Audio". This will open up the basic audio editing interface, which looks pretty blank for now. So, let's load up some audio! Click the "Browse" button on your first node, and navigate your computer for the recording of the sound you want to use, or just find a random audio file for now, to test this. You can also use the sounds from our sample game... Once you've loaded the file, your node should look like this:

Pretty simple! You can click the "Play" button to preview the sound. There are a few more options, however, for NPC nodes.

Setting Breakpoints

Find an NPC node that has a few children, and load an audio file for this node:

You'll see a series of red dividers with text next to them, along with colored highlighting of the sound between the dividers. These highlighted regions represent the parts of the sound that correspond to the text you've typed. So, if your text says "*Now that I have you at my mercy, Agent 008, *Nothing can...", you'll want to play the sound until you reach the end of that portion of text, and drag the dividers so that part of the sound is highlighted with the same color:

You can use these dividers (called "breakpoints") to tell when the player has interrupted the NPC, and which dialogue path to take. Add some sounds to your other nodes, and set the breakpoints. Now you're ready to test your game! Be sure to save your progress, and click the "Tools" menu on the menu bar at the top, and choose "Run in Click To Speak Player". If this doesn't work, see this guide for setting this up. You can also run Click To Speak Player separately and load your game from the folder you saved it in.

Click "Load Game", navigate to the xml file that contains the save data for your game, open it, and click "Start Game". You can click the red button when it is activated to respond to a particular piece of NPC dialogue. Try responding at various points, and see where it takes you in the dialogue tree. You might only have a few levels of dialogue for what you've created so far, but you can add many more layers.

Orphan Tab

Now we're going to learn about some of the more advanced features of the editor. You've probably deleted a node or two, or at least deleted some asterisks in the course of this tutorial. Find a node that has a few children, and click "Delete Node".

You'll see this node, and all its children, disappear, to be replaced with a blank node. Don't worry though, the node isn't gone forever. Any nodes that you delete through the delete button, or by deleting an asterisk, are moved to the Orphan Tab, a sort of recycle bin for deleted nodes. This tab contains any individual nodes or node trees that have been deleted, so that you can either permanently delete them, manually restore them to their original location, or assign them to different locations in the node tree. Let's take a look at the Orphan Tab. Click the "Orphan Tab" button, the third tab in the upper tab bar.

Here are all your deleted nodes. You'll see that all the Delete Node buttons are colored red on the Orphan Tab, meaning that if you click this button here, these nodes are deleted permanently, so be careful! The Delete Node Tree button will delete a node, as well as all of its children and sub children. Click the Delete Node button on a node you aren't worried about. It's gone! But blank nodes will still be created in its place on the orphan tab if the node has a parent.

Now that we have all of these nodes on the orphan tab, let's move them back to the main tab. Go back to the main tab, and find a PC node (that has text in it). Click the asterisk button above the dialogue text field.

A new options panel will open up beneath the node. This can be used to change the target of a node (or of a particular asterisk region). See the "Goes To" label? This drop down menu and live search box can be used to change the current target of the PC node that you've clicked on. Click on the drop down menu (the downward pointing triangle), scroll down to the bottom of the list, and find the node in the orphan tab that you want to set as the target. Choose an orphaned node that has a few children.

The node you selected is now the target of the original node, and it's been removed from the Orphan Tab and brought back to the main tab. Likewise, the original target of the node you've just changed the target for will be moved to the Orphan Tab. You can use this feature to move entire dialogue trees around, in case you get stuck or make a mistake while writing, or just want to change the structure of your dialogue.

Orphan Tab Notes

  • Deleting something from the Orphan Tab is permanent, either a node or a node tree! Be sure you want to delete it before you click the button.

  • Clicking the "Delete Node" button on a node that has children will only delete the node that was clicked; the children will still be present in the Orphan Tab individually. Use the "Delete Node Tree" button if you want to delete a node's children as well.

  • Nodes on the Orphan Tab aren't targeted by any nodes, and thus won't appear in the program.

  • Nodes on the Orphan Tab can still be edited as usual, and can have their targets changed just like nodes on the main tab.

  • Nodes on the Orphan Tab will be remembered when you save and re-load a game you're working on.

Placeholder Nodes

What happens, though, if you want to set a node that's already on the main tab as the target of your node? Let's try it. Go to the main tab if you aren't already there, click the asterisk button on a PC node, or click on an asterisk in an NPC node text box to open up the node target box. Instead of setting the target to an orphan node, set it to a node that's already on the main tab (it isn't labeled as Orphaned in the drop-down menu).

Instead of moving the node and its children to this node, it remains in its original location, and a placeholder node is now created that points to this node. This way, multiple paths of dialogue can converge on fewer endings, or the player can be able to jump around the dialogue tree. You can use this to jump backwards in the dialogue tree as well. Add some audio to your nodes, and test it out in the player!

Placeholder Node Notes
*Placeholder nodes are only created when you set a node's target to another node that's on the main tab. Otherwise, the selected target and its children will be moved over from the orphan tab.
*Placeholder nodes are deleted permanently when you click the Delete Node button, even on the main tab.
*Changing the target of a node on the Orphan Tab to a node on the Main Tab will create a placeholder node.
*If a node that has a placeholder pointing to it gets moved from the Main Tab to the Orphan Tab, the placeholder node will be replaced by the original node and its children, and the original node will not appear on the Orphan Tab.

Conclusion

This concludes the tutorial on the basic functionality of the editor. Once you're familiar with building node trees, setting breakpoints, changing node targets, using the Orphan Tab, and creating placeholder nodes, you should be all set to create your own Click To Speak game! For documentation on some really cool and more advanced features, see Variables and Rules.

  • No labels