Tutorial: An HTML5 adventure game without coding
Setting up a basic HTML5 clickable game in Hype
Introduction
I’ve been working on developing a narrative game for the Nar8 Jam competition. 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 2x2 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
Play it
Have a look at the demo
