I'm building one html5 game per week on

lessmilk.com
This is the blog where I write about my project.
29 Jan 2014
Make HTML5 games
with Phaser -
Introduction
This post is the first one in a series of tutorials about
how to make games in HTML5. Note: to follow this
tutorial you should already be familiar with web
development in HTML and Javascript.
How to make HTML5 games?
You can make HTML5 games in lots of different ways,
there are even websites dedicated to list all the
different framework available like this one. So which
one should you choose?
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
1 of 10 3/19/14, 10:26 PM
I've spend a whole week looking into the different
solutions, and I finally picked Phaser. Why? Because it
works well on all modern browser, it's actively
maintained, it's powerful, it's free, it's well
documented, and it has an awesome looking
websiteyes, that counts too ;-)
So my tutorials will be focused on Phaser, a Javascript
framework for 2D games. However, there are
definitely other great frameworks out there that are
worth checking out.
Getting started with Phaser
Getting started with Phaser is easy, here's how to do it
in four simple steps.
1) Important links
First things first, heres a list of links you should
bookmark.
Phaser, the official website.
Github, the Phaser github account.
Documentation, the official documentation.
Examples, a great collection of small code
examples.
Forums, the official forums.
My github account, where I'll add the source code
of all my tutorials.
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
2 of 10 3/19/14, 10:26 PM
2) Download Phaser
You should download the latest version of phaser-
master, and also get my empty project that we will use
in this tutorial. My project contains:
phaser.min.js, the Phaser framework minified
v1.1.5.
main.js, a file were we will add our code.
index.html, a basic HTML page where the game
will be displayed.
assets/, a directory containing the game' assets. In
this case there's just one sprite.
3) The tools
All you need to start coding with Phaser is a text
editor and a browser with a consol to debug. I
recommend Sublime Text and Google Chrome.
4) Make Phaser work
Opening a Phaser project directly in a browser won't
work, you need to use a web server. I won't go into the
details on how to set up one, but basically you can
either:
Install a local web server on your computer. For
this you can use WAMP for Windows or MAMP
for Mac.
If you have Python installed, you can run the
python -m SimpleHTTPServer command.
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
3 of 10 3/19/14, 10:26 PM
Or simply use the public directory of your
Dropbox.
To check if you have set things up properly, put the
phaser-master directory on your web server, and then
open phaser-master/examples/index.html in your
browser to look at some examples.
First project: Hello World
Lets start the interesting part: coding! In this tutorial
we are going to make something really simple:
displaying a rotating "hello world" sprite on the
screen.
I wrote below the basic structure of a Phaser project
with comments. You should copy and past it in the
main.js file that was in the empty-project you
downloaded earlier.
// We start by initializing Phaser
// Parameters: width of the game, height of
the game, how to render the game, the HTML
div that will contain the game
var game = new Phaser.Game(500, 600,
Phaser.AUTO, 'game_div');
// And now we define our first and only
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
4 of 10 3/19/14, 10:26 PM
state, I'll call it 'main'. A state is a
specific scene of a game like a menu, a game
over screen, etc.
var main_state = {
preload: function() {
// Everything in this function will
be executed at the beginning. Thats where we
usually load the games assets (images,
sounds, etc.)
},
create: function() {
// This function will be called after
the preload function. Here we set up the
game, display sprites, add labels, etc.
},
update: function() {
// This is where we will spend the
most of our time. This function is called 60
times per second to update the game.
}
}
// And finally we tell Phaser to add and
start our 'main' state
game.state.add('main', main_state);
game.state.start('main');
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
5 of 10 3/19/14, 10:26 PM
All we have left to do is to fill the preload() ,
create() , and update() functions.
First, let's load our hello.png sprite, so add these lines
of code in the preload() function.
// Load a sprite in the game
// Parameters: name of the sprite, path to
the image
game.load.image('hello',
'assets/hello.png');
Now that the sprite is loaded, we can display it on the
screen. To do so, write this in the create() function.
// Display a sprite on the screen
// Parameters: x position, y position, name
of the sprite
this.hello_sprite = game.add.sprite(250, 300,
'hello');
Next step: make the sprite rotate on the screen. Put
this code in the update() function, and remember
that it will be executed 60 times per second.
// Increase the angle of the sprite by one
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
6 of 10 3/19/14, 10:26 PM
degree
this.hello_sprite.angle += 1;
And that's it! Now save your code, put the project on
your web server, and test it in your browser. If it's not
working, look at the error messages in the console and
try to debug. If needed you can download the final
code here.
What's next?
As you can guess we have a lot more to cover, in the
next tutorial you can learn how to make a simple
Flappy Bird clone.
Want to get my free ebook "How To Start Making
Games", and be notified when one of my new
games or blog posts is out? Then join more than
2,500 people to my newsletter.
Register to the newsletter:
No spam, and unsubscribe at any time.
register
Make HTML5 games with Phaser - Introduction http://blog.lessmilk.com/make-html5-games-with-phaser-1/
7 of 10 3/19/14, 10:26 PM