Tuesday, February 12, 2013

Interactive dialogue for HTML5 game - part 1

In this post I do not want to deal with theories of dialogue. I will try to summarize the requirements for the implementation of dialogue in a computer game. In the next post I am going to implement such a tool.

Type of dialogs:

  • Linear
  • Linear interrupted
  • Linear dialogue with questions
  • Branched dialogue with different results
  • Fake branched dialogue with the same end
  • Procedural dialogue
  • Combined dialogue

Linear dialogue

  • Start: player: Do you know anything about the cave outside the village?
  • 1 character:   People is losing there.
  • 2 player: How to get there?
  • 3 character: Follow the river.
  • 4 player: How much time does it take path.
  • End: About 14 hour.

Linear interrupted

A player may ask follow-up questions.


  • 1 character:   People is losing there.
    • 1a player: Tell me more please.
    • 1a character: ...

  • 3 character: Follow the river.
    • 3a player: I need a guide.
    • 3a character: ...

Linear dialogue with questions

Extension topics are in a separate thread. May contain more information. Information thread can still be active, even if you repeat the dialogue. Information thread may include comprehensive encyclopedic knowledge, such as the history (Vietcong 2).

Branched dialogue with different results

Large amounts of data, even in a short dialogue.

Fake branched dialogue with the same end

The player has the feeling that the conversation affects.

Procedural dialogue

It contains variables that affect the result of conversation.

Key features

  1. Visualization (GUI tool )
  2. Conditions
  3. Variables
  4. Outgoing Links
  5. Export to JSON

1. Visualization
I am going to do a GUI tool (dynamic HTML form) for designing dialogue. GUI tool also will be able to show dialogue graph.

2. Conditions
Ability to show and hide a branch based on conditions. (See Procedural dialogue).


  • isFirstVisit == true
  • hasSword == true
  • mood >= 10
  • inventory.contains(“amulet”)

3. Variables
Can set variables, increment, decrement. (See Procedural dialogue).


  • hasSword = true
  • mood += 2

4. Outgoing Links
Each item can have a reference (0..*) to another item in the dialog.

5. Export to JSON
I am going to export data structure in JSON. Despite its relationship to JavaScript, it is language-independent, with parsers available for many languages.

Example of dialogue

Simple dialogue, but contains: links, conditions, variables.

Proposed JSON

It may interest you to know

Chat Mapper
Chat Mapper is tool for writing and testing nonlinear dialogue, especially for video games and training. Free for noncommercial use (no export).

How Video Game Stories Are Written