Tutorial: Creating an HTML5 adventure game — Part 2
Adding cause & effect interactions through the game state
Introduction
In Part 1, I created a simple point & click adventure game. This was a simple series of linked screens (or scenes in Hype), which allows for a branching narrative structure, but doesn’t allow for the more complex interactions of an adventure game.
Objective
This is a playthrough video of the game I’ll be building. It’s a simplistic game, but it shows key features that could be used in making more advanced adventure game.
Tutorial: Cause & effect
In this tutorial I will create an adventure game in one room, but with a few objects that will demonstrate cause and effect.
The room will have a few objects to interact with:
- A desk — to open and find a key
- A switch — to change the pet in the room
- A pet — a cat or a dog that will make a sound if clicked
- A door — to open, escape and finish the game
I could do this by simply making scenes for each of the states, however each of the above objects has 2 states — effectively an ‘on’ and an ‘off’ state. A little binary algebra tells me that this means we would need 2^4 = 16 different scenes to capture all possible states. For instance, the desk is open but the switch is off, or the switch is on but the desk is closed and the door is open.
Each ‘on’ or ‘off’, cause & effect interaction would grow the scenes exponentially, so this is not a sensible approach.
Scripting Hype
To address this, I will maintain a global game state, creating ‘flags’ to register the on/off states that will affect my scene.
Looking at my scene sketch, I can see that I will need 4 flags:
- isDoorOpen — true/false if the door is open
- isDog — true/false if the dog is in the room
- isDeskOpen — true/false if the desk is open
- hasKey — true/false if the player has taken the key
I’ve defined these flags so that they should be false at the start of the game.
Hype allows us to include Javascript methods in the place of any action we can associate with a scene object or a timeline. It also allows for linking actions to events like On Scene Load.
I’m going to build the interactions in the game by adding Javascript actions to the start of the scene and on clicking the objects.
Getting started
I’ve created all the assets I’m going to use in my game and sketched out the different states in a concept map.
So that’s everything I need to start building the game in Hype.
Setting up the scene
I add my images to the resource library for easy access.
I import everything into the initial scene and in the scene, and I name the scene home.
If you’d like to watch the step-by-step process, skip to the video at the end of the tutorial. I’ll continue here to describe the key design decisions I’ve made in Hype to enable the interactions.
Timeline as states
The first choice I made was to use Hype’s Timeline to manage the different states, for instance if the desk is open, I’ll have a timeline showing the open drawer of the desk.
The difference between using timelines instead of using scenes to manage the states is that timelines only track changes to objects. This means if my timeline opens the desk, it won’t affect the door which is also in the scene. In this way, I can set up independent timelines for each of the different views of the objects.
So my Room scene will have 4 timelines for the visible changes that need to be reflecting in the scene:
- doorOpen — the door is open
- dog — the dog appears instead of the cat
- deskOpen — the desk drawer is open (showing the key if it is in scene)
- withoutKey — the key doesn’t appear in the scene
In each of these scenes, I’m using a trick to record the first frame of the timeline and positioning the changed elements in or out of the scene.
The dog is positioned outside of the scene in the Main Timeline, and the cat is in the scene.
In the dog timeline, while the Record button is active, the cat is moved out of the scene and the dog is moved in to the scene. This automatically sets keyframes for those objects, so that when the timeline plays, cat and dog will be set to those new positions.
Triggering the change in state
I’m changing the state by changing flags (variables set to true or false) when you click certain objects in the scene.
Selecting an object, I can assign the Run Javascript action and create a new function.
Now I have to do some light coding in Javascript.
I’ve kept the Javascript simple so it should be easy for beginners.
The way to create a global variable, that will persist across difference scenes, is to extend the global window object.
If I was building a large game, with lots of variables, I would define my own namespace to avoid conflicts, such as window.hypeGame — but for simplicity, I’m just going to attach the 4 variables I’m using as flags to the window object: window.isDoorOpen, window.isDog, window.isDeskOpen & window.hasKey.
Looking at the switch that changes from Cat to Dog — when the switch is clicked, I’ve associated an On Mouse Click action which runs a Javascript function I’ve given the name “toggleSwitch” (the other elements of the function definition are pre-defined by Hype and can’t be edited).
The function toggles my flag variable, which is to say– if isDog is true it is set equal to false and if it is false it is set equal to true.
It’s possible to link multiple actions to an event such as On Mouse Click. In this case, I’m jumping to the current scene– which will reload the scene and affect the changes I’ve made to the state. So the switch will appear to change.
Reflecting the state changes in the scene
But first, I have to add the Javascript to the scenes in order to have them change depending on the actions the player has made in the game.
For each scene, I’m going to create a new Javascript function as an action associated with On Scene Load (found in the Scene Inspector).
Each of these functions, for instance startRoomScene(), will run a timeline according to the state of the flags that have been set. This is why I chose flags that will be false at the start. Our default scene is the Main Timeline without playing any of the other timelines.
All the timelines are independent of each other — so I’m not writing this as an if…else… block of code, just a series of if… statements.
Putting it all together
In part 1, I demonstrated how to link all the scenes together. Here’s a recap of the steps I followed to complete the game for this tutorial:
- Load image assets into the Resource Library
- Set up the initial scene
- Create timelines for the alternate states of the scene
- Repeat steps 2 & 3 for all remaining scenes
- Add On Mouse Click navigation link* actions using Jump to Scene…
- Add On Mouse Click triggers and create the related Javascript functions
- Add On Scene Load functions to play the timelines associated with the different scene states
*Quick tip — creating invisible hotspots
I’ve used an object with Opacity set to 0% to create hotspots over parts of the background image.
Play it
Here’s the completed demo
