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:
<script src="phaser.js"></script>
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:
<script src="app.js"></script>
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:
var game = new Phaser.Game(720, 480, Phaser.AUTO);
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:
var state = {
preload : function(){
//some code
},
create : function(){
//some code
},
update : function(){
//some code
}
}
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:
game.state.add("mystate", state);
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:
game.state.start("mystate");
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):
<!DOCTYPE html> <html> <head> <title>My Phaser Game</title> <script src="phaser.js"></script> </head> <body> <script src="app.js"></script> </body> </html>
and this (js file):
var game = new Phaser.Game(720, 480, Phaser.AUTO);
var state = {
preload : function(){
//some code
},
create : function(){
//some code
},
update : function(){
//some code
}
}
game.state.add("mystate", state);
game.state.start("mystate");
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:
var logo;
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:
game.load.image("mylogo", "logo.png");
“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:
logo = game.add.sprite(0, 0, "mylogo");
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:
logo.y += .5; logo.x += .5;
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:
var game = new Phaser.Game(720, 480, Phaser.AUTO);
var logo;
var state = {
preload : function(){
game.load.image("mylogo", "logo.png");
},
create : function(){
logo = game.add.sprite(0, 0, "mylogo");
},
update : function(){
logo.y += .5;
logo.x += .5;
}
}
game.state.add("mystate", state);
game.state.start("mystate");
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:
game.load.bitmapFont("gameFont", 'assets/font.png', 'assets/font.fnt');
Then you can write anything with that font. For example, in create method you can write:
game.add.bitmapText(game.world.centerX, game.world.centerY-50, "gameFont", "This text is using a bitmap font.", 60);
Importing and loading sprite image
Put your sprite image in your directory (for example in a folder called ‘assets’) then inside preload:
game.load.image("player", "assets/playerimage.png");
Then inside create method:
var player = game.add.sprite(game.world.centerX, game.world.centerY, "player");
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:
game.add.tileSprite(0, 0, 1024, 1024, "grass");
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.