Watch the full tutorial
I’ve been working on developing a narrative game for the Nar8 Jamcompetition. I’ve been attempting a game jam each month since April 2014, and in doing so, I’ve understood that the surest path to success is to rely on existing tools and frameworks.
I generally can’t say enough good things about Hype. It’s a versatile tool for building web apps– features rich and yet streamlined and easy-to-use. It’s my interaction design swiss-army knife.
An adventure game in 10 minutes
This tutorial will demonstrate how to create a basic point-and-click adventure game.
It’s always good to plan things out first, so I created a little map of the game. It’s a simple game where you have to find your way out of a 2×2 forest maze.
Building the game
With the map created, I was ready to get started in Hype.
Document setup — Set the document size to 1024 x 768, and then depending on your screen size you may want to reduce the zoom to 75% or 50% to give yourself more room to work.
Scene setup — I’ve set the background colour of my scene to a dark green, and added some text for the splash. Opening the scene navigation, I named the first scene ‘Intro’ and then duplicated the scenes (to preserve the background colour and text objects) until I had 4 forest scenes and an ‘Outro’ for winning the game. I’ve given all the scenes intuitive names so that I can remember them when I start linking up the navigation.
Scene navigation — Each object you put in the scene can be assigned actions. I’ve separated blocks of text for the game commands such as ‘Go North’ so that I can link them to change the scene. I’ve linked each of the commands to the appropriate scene (as per the map I drew). I’ve also added buttons at the start, leading to the first scene and at the end, to restart the game from the intro scene.
Preview & Export — That’s it. Preview it in the browser, and then export a self-contained HTML5 app as a folder. Since Hype give the index file the same name as the project folder, I’ve renamed it index.html
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.
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.
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.
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.
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.
The function toggles my flag variable, which is to say– if isDogistrueit 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
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 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.
Here’s the completed demo