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!
CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. HTML5 interactions are coded up in Javascript - the problem is that it is a really unwieldy language, with lots of unecessary braces and semicolons, and oriented around prototypes rather than the classes most of us are used to. CoffeeScript helps bring the overall structure to a level that's easier to understand, and has a lot of lovely syntactical sugar that makes the coding experience just much more pleasant. At the end of the day coffeescript file is compiled into equivalent javascript anyway, so you can always go back to raw JS if you decide you don't like it at any point in your project.
If you don't already have it, install Node. We need Node for Node Package Manager, which will let us install CoffeeScript.
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 administratornpm - node package managerinstall - download and install a package-g - install globally, so it can be used in any projectcoffee-script - our desired packageIf you want to make sure it installed successfully, enter coffee -v
If you're familiar with Python or Ruby, Coffeescript will be pretty familiar to you already, and if you're not, it's a relatively easy language to learn (much easier than JavaScript anyway, in my opinion).
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.
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
[home folder]/Sites
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
/xampp/htdocs
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
my_coffee_game Project titlebin This 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 src as 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 :)assets Where 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.images JPGs, PNGs, etcjs our compiled javascript filesdeploy publishing-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.src Source 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.coffee Coffeescript files live hereimages PSDs, PXMs, TPSs, AIs etc live in hereTry 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:
You can download the whole library file, or just reference the CDN address in your code. I prefer to grab the file and work with it locally, as it saves a network request and some file size when we later compress everything down into one javascript file.
If you download the .js file, then place it in src/assets/js
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.
On the web things may load in any order. This is a problem for our CoffeeScript/Javascript as we might end up with classes asking for objects that don't exist yet because they haven't loaded. RequireJS solves this problem, and you can sort of think of the result as the same way AS3 have "import", or C# has "using".
Download the latest version of RequireJS from here (via the button that says "minified") and site and place it into bin/assets/js.
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/bin/index.html.
<!-- Ensure standards rendering, let us validate -->
<!DOCTYPE html>
<!-- Specify language -->
<html lang="en">
<head>
<!-- Encoding -->
<meta charset="utf-8">
<!-- Title in browser -->
<title>My Coffee Game</title>
</head>
<body>
<!-- The object we'll be drawing onto, our canvas! -->
<canvas id="gameCanvas" width="640" height="360"></canvas>
<!-- Start up our game -->
<script type="text/javascript" data-main="assets/js/main" src="assets/js/require.js">
</script>
</body>
</html>
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
Windows
cd C:\xampp\htdocs\my_coffee_game
coffee -wmco bin\assets\js src\coffee
The four flags -wmco represent --watch --maps --compile --output
watch: every time you save a coffee file, the javascript file will be regenerated, so we don't need to run this every time we change a filemaps: with every javascript file generated we'll also build a source map file that will let the debug console in browsers point directly to the coffee file for errors rather than the confusing javascript filescompile: write the coffeescript files to javascriptoutput: "the next thing after this is where to put the files"To view your game, just go to the correct address in a browser:
localhost/~[user name]/my_coffee_game/bin
localhost/my_coffee_game/bin
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.