HTML5 Games

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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?

1 of 10

3/19/14, 10:26 PM

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

2) Download Phaser You should download the latest version of phasermaster, 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

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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

Make HTML5 games with Phaser - Introduction

http://blog.lessmilk.com/make-html5-games-with-phaser-1/

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: register No spam, and unsubscribe at any time.

7 of 10

3/19/14, 10:26 PM