HTML5 game - decision tree

Most game entity, that you create for your HTML5 games needs our own intelligence. It has to decide what to do next. For example: walks, attacks, speaks, … In this post I show you how to make decision with decision tree.

Consider the following scenario:

This type of the presentation is easy to represent in the form of a tree:

It is better to convert each condition on a separate object. Then you can check the condition and return either a decision or another decision object.

Finally, you need to create the tree and let it make the decision:

Reference:

• JavaScript Command pattern

Google Closure - custom events in examples

Google Closure Library provides powerful handling system for managing events and listeners across browsers. Closure makes it possible to manage user-defined events too. With Google Closure Library you do not need to create your own Events system.

There are responsible classes in goog.event package. Headstones of google.event package are:

• goog.events.listen()
• goog.events.unlistenByKey(key);
• goog.events.EventTarget
• goog.events.Event
• goog.events.EventHandler

Basic use

For basic use you make do with the function goog.events.listen(). Remove listener before destroying object is very important. You do not want memory leaks in your application. But hold reference to key it is inconvenient (read more). You could also be interested in the method goog.events.listenOnce().

Create custom event

The base event object is a goog.events.Event. If you build user defined events you will probably need to extend this class.

Create event target

An EventTarget is an object that can dispatch events. The most common example of an EventTarget is a DOM element but you can define your own EventTarget by inherit from class goog.events.EventTarget. You could also be interested that goog.events.EventTarget extends goog.Disposable. The object responsible for release object reference such as DOM nodes, COM object and register listeners. Subclass of goog.events.EventTarget can register listeners and dispatch events.

Manage listeners

Subclass of goog.events.EventHandler is useful in the release of listeners. After calling method dispose() it release all references to listeners. You can combine it with class goog.Disposable as mentioned bellow.

Create custom tileset in Gimp

There are lots of nice tilesets on Internet for game developers. Some resources you see at the end of this blogpost. For your game you probably need tiles from more tilesets or just some tiles from a large tileset. In this tutorial I show you how to prepare your own tileset for game in excellent image editor Gimp.

For my game I need only trees and some ground from nice 32x32 tileset that I found on opengameart.org.

Prepare grid

1. Open the source tileset: File > Open

2. Set grid spacing: Image > Configure Grid...

3. Show grid:

View > Show Grid

View > Snap to Grid

View > Snap to Canvas Edges

New tileset

1. Create new Image: File > New

Set size. For width I set 5 * 32, For height I set 3 * 32.

2. Set the same grid property as above.

Copy tiles from source to destination

1. Copy tile to new tileset: Use Rectangle Select Tool and select tile or tiles from source tileset. (I used Zoom Tool too).

2. Copy tile: Edit > Copy

3. Paste tile: Switch to the prepared new image. Edit > Paste

4. Place the tile to grid. Use Move Tool. Because you have previously set Snap to Grid, the tile will be glued to the grid.

5. Merge layer. After copying the tiles there was a new layer - Pasted layer. Click on the anchor icon to merge layers into one. (See image above.)

6. Add more tiles with the same procedure.

7. Save your new tileset as PNG.

Gimp 2.6: File > Save As

Gimp 2.8: File > Export

Tileset resource

• http://opengameart.org/
• http://retrogamezone.co.uk/
• http://spritedatabase.net/news
• http://www.rpgmakervx.net/index.php?showtopic=47180
• http://forums.rpgmakerweb.com/index.php?/forum/29-rpg-maker-vxace-resources/

Game Entity controlled states

In this post I'll show how to create a game entity controlled states.

Standing

A entity has only one state: stand. It is very easy to implement. It is quite common that after some period of inactivity entity performs some action. For example, it looks around, shuffle around, etc.

Our entity turns direction after some time of inactivity.

• full source

Looking

A entity has two states: moveTo, stand. An entity can move only in a circle, because we want to keep it at a specified location. The space in which it can move determine the circle radius.

States loop:

1. Calculate the angle of movement
2. Go to the boundary of circle
3. Standing
4. Go to the center of circle

• full source

Hen

A entity slowly moves across the surface. After contact runs. It has states: graze, run. Moving space is unlimited, but for border it can use the same technique as example above. After contact with the player it uses “easing” technique.

States loop:

1. Short random movement
2. Standing
3. Short random movement
4. If collision -> running

• full source

Conclusion

Using the states we can define any behavior for our entity. Such code is clear, understandable and reusable.

It might interest you

• HTML5 game cookbook - examples of code
• Dialogues Builder for video games

Interactive dialogue for HTML5 game - part 2

In the previous post I proposed data structure for interactive dialogues for video game. Within a few nights, I cooked GUI Tool Dialogues builder for compose dialogues. In this post I show you how that tool to use.

Examples

• Simple conversation
• Conditional conversation

Dialogues builder

Dialog Builder is GUI tool for creating interactive dialogues for video games. Because the exported format is JSON you can use it in any programming language.

Work procedure

1. Add actors for dialogues.
2. Add dialogs and choices.
3. Export data as JSON.

Dialogue description

1. ID and type ( dialogue | choice )
2. Menu text: may be empty if parent is dialogue
3. Dialogue text
4. Link: ID of ancestors
5. Contains: C - condition, A - code after, B - code before

Dialogue as data

It may interest you to know

• Dialogues module for Crafty game engine
• Source code of Dialogues builder

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

Example:

• 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.

Example:

• 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).

Example:

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

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

Example:

• 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).

• Video tutorials

Article
How Video Game Stories Are Written