By Alexander Ocias
Expected time: ~ 30 minutes
When we set out to build ABC Zoom, HTML5 game development was (and still sort of is) in this particularly tricky phase of its life where it's still really difficult to figure out where to even begin. This guide is result of the research and techniques we used to create the game. It should give you the information you need to know to get to the point where you just have a class to code stuff into and get results on screen straight away.
We'll be using Canvas, and not WebGL, as more than 60% of your audience would not be able to play a WebGL game, especially not mobile users (in which case you might as well be making a desktop game).
We need to familiarise ourselves with seven things to make our lives in HTML5 game dev as easy as possible.
If you're really serious about finishing a game, and you’d prefer to download a template with all the files set up and ready to go, feel free to grab this one for US$2.99. The template completes steps 3-7 for you.
Otherwise, let's go!
If you don't already have it, install Node. We need Node for Node Package Manager, which will let us install CoffeeScript.
Install Node from here
After Node is installed:
Open terminal or sh and enter this:
sudo npm install -g coffee-script
Enter your password when prompted
Right click on Command Prompt and click “run as administrator”, then enter this command:
npm install -g coffee-script
Then wait for the download and install to complete
What does this do?
sudo- super do, gain access to write as administrator
npm- node package manager
install- download and install a package
-g- install globally, so it can be used in any project
coffee-script- our desired package
If you want to make sure it installed successfully, enter
Here are some useful resources:
** This step is optional **
If you try to just open files straight into your browser like normal html, you'll run into bugs and errors pretty quickly, for example trying to dynamically load json files may break. Trying to access anything external may fail. You'll need a server running to make sure that your code can preload and access files correctly, and reach any CDN to access necessary frameworks.
I've generally found XAMPP to be the simplest way to start up an Apache server.
Download and install XAMPP
On Windows, restart your computer after completing the installation.
Open XAMPP, and start the Apache Server.
As an alternative for OSX: I prefer to use the built in apache server, follow William Pearson's article for how to set it up.
To access your files via the server, you need to place them in
If the folder doesn't exist, create it.
If you've installed an apache server, you can enter
localhost/~[home folder] in your browser to access it. So for example, I would enter
localhost/~alexander into my address bar.
To access your files via the server they must be placed in
In your browser, navigate to localhost/[folder name] to access these files.
Create folders following this structure:
- my_coffee_game - bin - assets - images - js - deploy - src - coffee - images
binThis is where the actual content we "run" to play the game lives. The goal is to eventually never edit files in here, and have them all built from
srcas we need them. For now we'll need to set up a couple of files, since we don't want to get into fancy build processes. bin is short for binary (even though it's not really a binary). You could call it 'app' or whatever you like if this is upsetting :)
assetsWhere our resources live. You might want more than one html file, all in different folders, so it makes sense to group assets away from those.
imagesJPGs, PNGs, etc
deploypublishing-ready files. You should be able to feel comfortable with just taking everything in this, uploading it and having it work. Eventually you'd have a build process to do this, but it's outside the scope of this tutorial.
srcSource files, ideally the only ones we're regularly editing - These files are compiled or transferred into bin as updated, for testing, and go through a more thorough process to be made ready for use by your audience and transferred into deploy.
coffeeCoffeescript files live here
imagesPSDs, PXMs, TPSs, AIs etc live in here
Try to avoid using camelCase, some servers, some OSes are case sensitive, some aren't. Using all lower case prevents some nightmarish bug scenarios, especially if you're collaborating with people on other OSes. However, it's pretty unavoidable to use camelCase on with your source code file names, but since the compile process is automated, the odds of something going wrong are relatively small.
You could just manually start drawing and code everything yourself, but you’d spend all your time doubling up the work of people who have come before you. There is a massive amount of things to make, and CreateJS basically brings you back up to where you were with Flash, made up of four parts:
Grab CreateJS from here
If you download the .js file, then place it in
All the documentation you need is available on the createjs site:
As an alternative if you'd prefer something more specifically suited to making SNES-y games like Flixel for example, you may want to check out Richard Davey's (Photonstorm) Phaser.
Download the latest version of RequireJS from here (via the button that says "minified") and site and place it into
Open up your text editor of choice. We used Sublime Text, and I highly recommend it, but anything works, even notepad or textedit.
Let’s set up our index page that we will navigate to in our browser:
my_coffee_game/src/coffee/main.coffee - Defines what createjs is, attaches our game to the canvas
# Tell everything what createjs is. Point this to # where-ever the createjs library is, minus the .js extension # local files are relative to main.js, so for example "libs/createjs.min" requirejs.config paths: "createjs" : "http://code.createjs.com/createjs-2013.12.12.min" define (require) -> # Start up our stage class, passing on the canvas GameWrapper = require "GameWrapper" canvas = document.getElementById("gameCanvas") gameObject = new GameWrapper(canvas)
my_coffee_game/src/coffee/GameWrapper.coffee - This is where we'll finally start the code of the actual game
# Our Game's first class! define (require) -> # imports require "createjs" class GameWrapper extends createjs.Stage constructor: (canvas) -> @initialize(canvas) # Set the ticker, without this, easel won't do anything! createjs.Ticker.setFPS(60) createjs.Ticker.addEventListener("tick", this) # Call a function @addSomeDemoGraphics() addSomeDemoGraphics: -> # Add a background bg = new createjs.Shape bg.graphics.beginFill("#222").drawRect(0, 0, 640, 360) @addChild(bg) # Add some text onto screen demoText = new createjs.Text("Howdy World!", "25px Bold Arial", "#fff") @addChild(demoText)
We set up a specific build process to handle the fancier parts here, but that's for another article. For now just go into terminal, navigate to your folder of choice or command prompt and enter
coffee -wmco [output folder] [input folder]
so for example
Mac & Linux
cd ~/Sites/my_coffee_game coffee -wmco bin/assets/js src/coffee
cd C:\xampp\htdocs\my_coffee_game coffee -wmco bin\assets\js src\coffee
The four flags
--watch --maps --compile --output
output: "the next thing after this is where to put the files"
To view your game, just go to the correct address in a browser:
You can read more about coffeescript automation here at The Little Book on Coffeescript
This should be a good springboard to jump into HTML5 canvas game development, and is the basis of what we built ABC Zoom on.
Source files - an existing working template, commented, with a touch example, common bug fixes and build file - can be bought here.
Feel free to email me if any part of this doesn't make sense.