Phaser basics and useful snippets

Phaser is a really good JavaScript library for creating games that you can play it in web browsers. In this post I’ll share basic stuffs how to use Phaser.

The Basic

Obviously, to use Phaser you need to include Phaser’s JavaScript file. You can get it from Phaser official website (just google it) or you can click this link (I’ve hosted it on my server, it’s version 2.6.2).

Then next step is to include phaser.js file in your main html file. For example see this code, I’ve included it in head section of my html file:

Now work on your JavaScript file

After including phaser.js file, now start writing your js codes. You can write it inside your html file or a separated file. For me, I prefer writing it on a separated file, I call it app.js then I include it into my html file. For example:

Creating game variable

First thing you have to do with your JavaScript codes is to create a game variable and specify the width and height of your game’s screen. Like this:

720 is my game’s width and the height is 480 in pixels.

Creating state variable

Next we need to create a state variable. We can describe state as a scene, that we want to add graphics to play on later.

This state variable can be an object with three properties: preload, create and update.

Just look at this code you will understand it later:

Those three properties has functions as it’s values. But it’s empty for now and we are going to work on it later.

Adding that state to the game

Now we have our state. The next step is to add that state into the game. To do so, we write:

In that single line of code we named that state as “mystate” and tell JavaScript to add it to the game.

Now let’s run that state

“mystate” is now part of the game. To start it we need to call:

After we started our state, the game should run. But nothing happened yet, because we didn’t code anything inside those “preload, create and update” things inside state object.

By now our codes look like this (html file):

and this (js file):

Adding a graphic

We’re ready for next steps. Now let’s add an image to the game.

Let’s copy a graphic file called logo.png (you can add your own graphic file) to our working directory. Inside the js file, create a new variable. Call it logo. Let it unassigned, like this:

What to do inside preload

In preload, we need to load any assets file that we need to use it in the game.

Then, inside our state object, and inside preload parameter (inside function block for that parameter), we need to load that image file. To do that, we call:

“mylogo” is a name we given for that image file. “logo.png” is our image file with it’s location, in this case it is in the root folder.

Inside create

Now for create parameter, inside the function, we need to bring that loaded graphic into the stage. To do this we write:

In that single line of code, we’ve assigned our logo variable with a Phaser method, which is telling the computer to put the image (logo) at coordinate x = 0, y = 0. "mylogo" as the last parameter is the name for our image file we’ve given previously.

Inside update

Every game has something called “Game Loop”. Here is the game loop in Phaser = update. Inside this update thing, any code you put in it will be called repeatedly.

So if we increment the position of our logo .5 pixel each time, and because it’s called repeatedly, we will see our logo is moving.

Let’s add this code to make our logo moving:

Final result

Now if you open your html file with a JavaScript & Canvas supported browser, you will see a logo moving vertically and horizontally at a same time.

Here is our final js file:

I’ve created a basic Phaser video tutorial on YouTube and you can watch it here:

Phaser Useful Snippets

In this section you can find some useful and frequently used Phaser snippets.

Importing and using bitmap fonts

To import a bitmap font, put font’s image and .fnt file into your directory. Then inside the preload method, load it like this:

Then you can write anything with that font. For example, in create method you can write:

Importing and loading sprite image

Put your sprite image in your directory (for example in a folder called ‘assets’) then inside preload:

Then inside create method:

Using tile sprite

Tile sprite is some kind of image that you can tile it in x and y direction as you like. For example, if we have a seamless and tileable floor image, we can use it as tile sprite and draw a wide floor with single image that repeatedly being drawn.

To create a tile sprite after we load it’s image in preload method (just as loading any images like before), inside create method we write:

There are five parameters, first is the beginning of tile in x, and second is the beginning in y, then next two parameters is for width and height of tile sprite, then the last parameter is the image’s name that we loaded in preload method.

Do you like this post? Consider a donation 😀

Published by


Habibie is an Indonesian freelance frontend-backend web programmer and cross platform mobile app developer. He's also good at graphics design, video editing, visual effects and animation.

Leave a Reply

Your email address will not be published. Required fields are marked *