Now Reading
Building a HTML5 adventure game without coding

Building a HTML5 adventure game without coding

Watch the full tutorial

Introduction

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 briefly evaluated using Twine to build a narrative game, but I felt that it could be just as easily built using a tool I rely on for prototyping apps and games — Tumult Hype

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.

Getting started

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


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:

  1. isDoorOpen — true/false if the door is open
  2. isDog — true/false if the dog is in the room
  3. isDeskOpen — true/false if the desk is open
  4. 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.

Scene Inspector

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.

Concept sketch
Assets

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.

Main timeline

The dog is positioned outside of the scene in the Main Timeline, and the cat is in the scene.

Dog timeline

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.

Script editor

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

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

On Scene Load

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:

  1. Load image assets into the Resource Library
  2. Set up the initial scene
  3. Create timelines for the alternate states of the scene
  4. Repeat steps 2 & 3 for all remaining scenes
  5. Add On Mouse Click navigation link* actions using Jump to Scene…
  6. Add On Mouse Click triggers and create the related Javascript functions
  7. 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

Author Bio — kaigani

Editor of MOO Paper+Hypercontextual ThingsGames for Learninggamedev 101, and whole child play

What's Your Reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0
View Comments (0)

Leave a Reply

Your email address will not be published.