Decapitathlon

Technical Design Document

Amos Room (B00254109)
Nathan Bone (B00248653)

Contents
Technical Design
Framework Research
Development Environment
Platforms
Hardware and Software
Game Mechanics
Game Flow
Control Scheme
User Interface
Implementation
Data Management & Flow
Design Prototype
Testing Strategy

Technical Design
Framework Research
In order to choose the best development environment for this project, both team members looked at
a total of eight different HTML5 game development engines. We looked at the advantages and
disadvantages of working with these environments and came to a joint decision as to which engine
would be most suitable for our project. The results of our research can be seen below:
1) GameMaker
GameMaker is able to create games for desktop devices. It features a high number of
tutorials which explore a variety of game genres. The framework has built-in tools for
graphics and animation as well as a simple, easy to use GUI which would make creating
games a far more efficient and simple process. However, despite the advantages the free
version of the software is missing some features and while we have access to the
professional version as well as the Android export module to release the game on mobile
devices, we still require the HTML5 export module so we can host the game on our website
which costs $199 on it's own, making it far too expensive to be considered a viable choice.
2) Quintus
Quintus is capable of creating games for both mobile and desktop devices. The code utilizes
component modules to help make the code easier to read and write. There are some tutorials
available, but not that many and it features a public community forum to gain additional
help and support. However, Quintus is still currently at an early stage of it's development
which could lead to serious technical issues later down the line in the project.
3) melonJS
melonJS is compatible with a wide variety of web browsers and can export to android
devices. It's closely affiliated with Tiled, a simple to use level editor, which makes designing
levels a more efficient process. It's free to download however there are very few tutorials
available which would make this quite difficult to learn.
4) Panda.js
Panda.js is able to create games for browsers and utilizes CocoonJS so that the games can be
exported as mobile applications. It has a wide range of examples on how to utilize various
features of the engine such as sprites and physics but no tutorials that teach you how to
combine features to create a full game which, given this project, would make this quite
difficult to use.
5) Phaser
Phaser is capable of creating work for both desktop and mobile devices. It offers large
numbers of tutorials and sample code to make it easy to learn, with an easily accessible
community forum for additional support. It's open source with many community made plugins created to help enhance the games. It's also entirely free to use, which makes it very costeffective. However, any official technical support comes at a price and any work created is
tailored more towards browsers, which would make exporting it as a stand-alone
application.

6) Construct2
Games created in Construct2 can be ported to a large number of devices, including web
browsers and android devices as we had intended for this project. Construct2 also offered
many tutorials in multiple languages as well as full operations guide for the framework
which would make it quite simple to learn. However, we found that the initial free version of
the framework had a lot of features removed and the full version of the software would
require a license fee of $50 a month for us to use, which would make it far too expensive to
use for the project.
7) ImpactJS
ImpactJS features high compatibility with web browsers and has capability to create games
in 3D, which could be useful in some areas of the project. However, the development
environment lacks any form of Android support, only working with Apple devices. We also
noticed a lack of tutorials compared to some other frameworks, with most guides being
created by the community. There's also no free version of the software available, with each
license costing $99 per user which again would make the software too expensive to be
viable.
8) EaselJS
EaselJS works alongside the programs SoundJS, TweenJS and PreloadJS in order to create a
full comprehensive suite for game development. It also features tutorials for all JS
frameworks to help make it easier to learn. However, the framework itself is in an early state
of development and isn't in a complete build at this point in time. It also requires the use of
other software in order to create animations and to be exported to other devices.
Development Environment
From the research we've made on a variety of different game engines, we've chosen to use the
Phaser HTML5 game engine for our project. Since our project is composed of short microgames,
each exploring a variety of different game genres we thought it best to use a game engine that was
both simple to use and had a large number of examples and tutorials available for us to use. This is
so that we would be able to create a large number of games in a short space of time and so that it
would allow us to explore a large number of game genres to be put into our project. The engine is
also completely free to use, which makes it highly cost effective and is also easily compatible with
both web browsers and mobile devices.

Platforms
The platforms of choice for this project will be PC and mobile devices, specifically Android
devices. There are many reasons for these choices. Firstly, the game on PC will be hosted on our
website much like flash games are hosted on game websites online. The reason for this is that we
can drive players to our website which we can then inform players of the mobile version and find
out more information as well as bring in more revenue through advertisements on the website. Even
though the game is designed for short sessions mainly for mobile, this still translates well to games
online which are played to get some small enjoyment in the day. Technically, with being done in an
HTML5 game design framework, it will be easy to host online and work with most PCs and modern
browsers.
As for mobile, Android is the most viable first choice for the game as the market is huge (50 billion
applications downloaded as of July 2013 and over 1 billion active Android users in 2014) and that
means it is open for even a small percentage of people to find and download our game. In terms of
the game, the style of gameplay we are going for fits in the mobile market well as it is built for short
bursts of play which is the most popular type of game in the mobile market. As for creating the
game, for it to have a good chance on Android the game will have to be created for an older version
of the Android OS as only going for the current version will mean a slim percentage of the overall
market will be able to actually play the game and we need the biggest market possible to have a fair
chance.
Hardware and Software
The game will be created on two different computer systems, both using the HTML5 programming
language and the Netbeans IDE for development. The first system is an ASUS X55La series laptop
running a Windows 8.1 (64-Bit) operating system and the other is an ACER Aspire V5 Touch laptop
running a Windows 10 (64-Bit) operating system. The game will be created and stored as an
HTML file, which contains the code required for the world map and stage selection, as well as
multiple Javascript files, which will contain the code needed for each of the game stages. This will
be done to prevent the game from running slowly and to help make the code more readable and
easier to understand and debug.
All graphical art for the game, such as character art, backgrounds and tilesets, will be created using
the tool Piskel and exported as PNG files for use in the game. All levels in the game, such as the
world map and the levels for the microgames, will be created using the tool Tiled and will be
exported as JSON files, with tile layers being formatted as a CSV and added to the JSON files. As
some web browsers, such as Firefox, are incompatible with audio files being played in an MP3
format, we will save audio files in an OGG format to help improve the game's compatibility with
different web browsers.

Game Mechanics
In our project we intend to employ a variety of different game mechanics to help make each
microgame stand out as it's own unique experience. This section details the mechanics that we
intend to put into our final build of the project.
Fixed 2D Perspective
This will allow the player to clearly see everything that is on screen and will prevent any
confusion as to what they are able to interact with in the microgame.
Timer
This challenges the player to move quickly during each microgame.
World Map
This allows players to view the in-game world of Spectra. The world map also serves as a
stage select screen and allows players to choose which stage they want to complete in any
order.
Random Level Selection
During each stage, each microgame is loaded randomly from one to the other. This will help
prevent repetition of microgames being played in the same order during repeat playthroughs
of each stage.
Level Remix
The final stage uses a random selection of ten microgames taken from all previous stages,
making it more challenging to guess what may come up next. Once completed, a bonus
stage will unlock which takes the player through every microgame in the game, without a
limit.
High Score
Game will save the users score, encouraging them to play again and do better in repeat
playthroughs.
Save Game
Game data is saved locally on the user's platform, allowing them to take a break from the
game and continue where they left off at another time.

Game Flow
As the game begins they are presented with the world map, showing the in-game world of Spectra.
From there the player is free to navigate the world and select which stage they would like to play.
When the player selects a stage, they will enter a brief dialogue scene with one of the games
characters before playing a series of microgames.
The aim of the game is to complete all the stages in the game. In the microgames, the rules of the
game vary depending on the microgame that is currently being played, so for example in one
microgame the player will need to hit all the targets on the screen in a 2D shooter, while in another
they have to reach an end goal via a brief platformer section. What remains constant throughout
each microgame is that there is a five-second time limit to complete the game.
To complete a stage the player has to complete a total of 10 microgames within the stage.
Microgames are completed by meeting their win conditions, which are briefly hinted at using
instructions which appear as text on the screen as the games begin. From there on, it is up to the
player to find out what it is they need to do and complete the microgame within the time limit.
As each stage starts, the player is given three lives. The player loses the stage if all of their lives are
lost. Lives are shown to the player during a brief transition period between microgames and are lost
by failing to meet the win conditions within the microgames within the time limit. If the player
loses, they will fail the stage and will need to restart and play the stage again from the beginning.
Control Scheme
As the game is being developed for both mobile devices and PC web browsers, the control scheme
will be based around keyboard and mouse inputs. For android devices, we intend to create a virtual
keyboard at the bottom of the screen, which will allow for player input using the game HUD as well
as making use of the touch screen. Due to the large number of microgames featured in the project,
we intend to keep the control scheme basic and simple to understand to avoid player confusion.
Input: PC

Input: Android Device

Action (when applicable)

UP

UP (In HUD)

Move Player Up

LEFT

LEFT (In HUD)

Move Player Left

DOWN

DOWN (In HUD)

Move Player Down

RIGHT

RIGHT (In HUD)

Move Player Right

SPACEBAR

ACTION BUTTON (In HUD)

Player Action

MOUSE CLICK

SCREEN TAP

Player Action

User Interface
As each game begins the user will be shown a graphical timer in the bottom-right-hand corner of
the screen. This will be used to show the player how much time is left for them to complete the
current microgame. During the brief transition period from one microgame to the next, the current
number of lives the player has left will be displayed.
Finally, we intend to use a HUD to be used with mobile-devices in mind. This will feature
directional buttons and an action button that can be used to help interact with the game using a
touchscreen device without a keyboard, as well as displaying the current instruction for the game
the user is playing.

A sketch design of the in-game HUD

A sketch design of how the player's lives

will be displayed
A sketch design of
the timer

Implementation
Data Flow and Management
To develop the game, we intend to use the Phaser HTML5 game engine. As such, using the same
game framework means that each microgame we create will have some similarities as data flows
from one function to the next, while at the same time will have some differences to have each game
stand out amongst the rest.
Data flow and the flow of gameplay will be handled through the use of game states and global
variables. As each stage is loaded, some variables will be used globally and can be affected by any
of the microgames while others are loaded and are only used in the microgames themselves.
Phaser Functions
Phaser has a series of functions used to create games, each with different purposes, that all
flow from one to another. Below you can find a list of these functions that are used in all
the games that will be featured in the game, with descriptions of what role they play in the
project.
preload: function()
Locates graphics and sounds for the game and allows you to assign a name to them so they
can be used throughout the games. When we develop the project, all graphics and sounds
will be stored in a folder named 'assets'.
create: function()
Creates the initial state of the game, as it would appear without any player input. This will
be used to help create the levels using the JSON files created from Tiled and the tilesets
created from Piskel. This function will also be used to help create objects and object groups,
such as projectiles, characters and timers, within the games, set initial variables and call
other functions for games that utilize mouse clicks.
update: function()
Routinely called as the game is being played. This function is used to help create actions in
the game as a response to events in the game such as a player moving, firing a weapon or
two objects collide with eachother. These actions can be created either within the update
function itself, or by calling other functions.
render: function()
This function is entirely optional and doesn't necessarily need to be present, however it is
very useful in order to help debug a game. We will mainly use this to help create debug text
to display properties within each microgame, to see if they are working properly or not.
Code left here will be commented out, so that it doesn't interfere with the presentation of the
microgame but can still be used for future reference.

Design Prototype
During the design stage of the project we have developed a short playable prototype of the game.
The prototype consists of 5 short microgames, each at their basic level without any additional
graphics or features such as the in-game HUD, timers, or level transitions. Each game is loaded in a
random order and played one after the other when the player completes the required actions for each
one. This helps show a proof of concept for creating a game composed of short, fast-paced games,
each with their own distinct styles of gameplay.
This prototype can be found hosted on our website using the following link:
http://theboneroom.weebly.com/decapitathlon-prototype.html
Below you can see the goals for each microgame and details of any additional functions to the main
functions used by Phaser that were created during the prototype.
Game 1: Shoot the target!
The player needs to move a submarine and fire a missile up towards a stationary target.
fireMissle: function()
Loads the missile object from the group created in create: function() and launches it
vertically from a certain co-ordinate of the player's position.
collisionHandler: function()
Kills both the target and the missile if the two objects overlap with eachother. This
function also changes the 'win' variable to 'true', triggering the end of the game.
Game 2: Reach the goal!
The player needs to navigate a cow through fences to reach a trough.
collision: function()
Sets the win variable to true when the cow and trough objects overlap eachother.
Game 3: Think fast!
The player needs to press the spacebar when the UFO appears on the screen.
ufoMove: function()
Called when the timer created in create: function() reaches zero. This moves the
ufo object horizontally from side of the screen to another.
catchUFO: function()
Called when the spacebar is pressed. If the UFO is on the screen then the win
variable is set to true. Alternatively, if the UFO is not on the screen, the UFO will be
deleted and the win variable remain set to false.
Game 4: Drag!
The player needs to move different coins to their respective boxes.
collision[x]: function()
A series of functions called when the different coins overlap with their respective
boxes. A collision is set up for each of the four coins that are present in the
microgame. The function destroys the coin sprite and reduces a counter by 1. When
both counters are equal to zero, the win variable is set to true.

Game 5: Shoot!
The player needs to click on all the targets.
killTarget[x]: function
A series of functions called when the player clicks on one of the targets that appears
in the game. A function is set up for each of the ten targets that are present in the
microgame. The function destroys the target sprite and reduces a counter by 1. When
the counter is equal to zero, then the win variable is set to true.
Testing Strategy
In order to test the game and iron out any potential bugs that might occur, we first intend
tohoroughly play through the game ourselves. This will help us test for any errors that we can find
by ourselves. Once this is done we will then run the game using a variety of different computer
systems and web browsers, which will allow us to check for any compatibility issues that may arise
in the game.
After this is done we will then create a public beta test hosted in the University Campus where we
will allow people to play through the game and then fill out a form to give us some feedback. Using
the feedback we're given, we will then see if there are any notable technical problems that people
have had during their time with the game and we will then work on trying to fix them.

References
Framework Research
GameMaker: http://www.yoyogames.com/studio
Quintus: http://www.html5quintus.com/
melonJS: http://melonjs.org/index.html
Panda.js: http://www.pandajs.net/
Phaser: http://phaser.io/
Construct2: https://www.scirra.com/
ImpactJS: http://impactjs.com/
EaselJS: http://createjs.com/easeljs