HTML5 Games

I'm building one html5 game per week onlessmilk.com

This is the blog where I write about my project.

29 Jan 2014

Make HTML5 gameswith Phaser -IntroductionThis 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

website—yes, 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, here’s 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.


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.


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

Let’s 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


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. That’s where we

usually load the game’s 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');


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


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


7 of 10 3/19/14, 10:26 PM

HTML5 Games

Documents

Transcript of HTML5 Games