(click anywhere to close)
OPEN MENU

[Phaser] A Beginners Guide

category: Games | course: Phaser | difficulty:

Phaser is a JavaScript library, developed by Photonstorm (check him out, he's done cool things). It's completely free, and will always be. It's particularly good for simplifying the basics of creating an HTML5 game for you, and then creating a simple 2D game with physics. And the whole library is just a small .js (JavaScript extension) file. Amazing for the starters!

Basic needs for every game

.html file – this is the game’s page, this is where we bring together all the code in the end and the game is played.

The phaser.min.js file – included in the html file

.js (javascript) file for every screen or scene in your game

Perhaps some folders for your media, graphics, scenes, etc., if you're keen on keeping stuff organized.

The .html template

<!DOCTYPE> 
<html> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>A title – displayed in the tab</title> 
        <!-- Include the Phaser library --> 
        <script src="phaser.min.js"></script> 
        <!-- Include all the different scenes/states of the game--> 
        <script src="Scenes/menuScreen.js"></script> 
        <script src="Scenes/mainGame.js"></script> 
        <script src="Scenes/gameOver.js"></script> 
    </head> 

     <body> 
    <script type="text/javascript"> 
    //When the page loads, do the following 
    window.onload = function() { 
        //Create a new Phaser game Object with properties: 
        //(width,height,displayMethod (WebGL or Canvas),appendToHTMLElement,setPreservedFunctions 
        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create }); 

         //Add all the states to the game we just created 
        game.state.add('Menu', Scenes.MenuScreen) 
        game.state.add('Main', Scenes.MainGame) 
        game.state.add('GameOver', Scenes.GameOver); 

         //And start off with the first one 
        game.state.start('Menu'); 
    }; 
    </script> 
    </body> 
</html>

It’s a very basic html page (comments with explanation in the code itself).

In the 'appendToHTMLElement' property you can give the ID of an HTML element where you'd like the game to be created in. If you don't set anything, it's just created right after the <body> tag. The 'setPreservedFunctions' property allows you to set your own custom functions for the ones Phaser uses (preload, create and update are the only essentials to a Phaser game).

A JavaScript file containing a scene (template):

Scenes.MainGame = function(game) {
	//set all your variables for this scene here (LOCAL)
	this.time = 0;
	this.playerSize = 200;
};

Scenes.MainGame.prototype = {

preload: function() {
   //This function is called first, and must contain every image/spritesheet/etc. to be loaded for this scene
},

create: function() {
  //In this function then every object with its properties is created
},

update: function() {
  //Finally, this function runs at 60 FPS and is used to update everything and play the actual game.
},

};

Above is the basic template for every scene. Remember when defining your variables, that you put this. before everything, to ensure the variable is part of the object and only available in this scene (and destroyed afterwards). However, you might have noticed we’re putting objects into a certain 'master object' called ‘Scenes’. You’re right, we still need to define it! This is done at the top of the very first scene that is loaded, like this:

var globalVar = 20;
var anotherGlobalOne = 30;

var Scenes = {};

Any global variables, to be used throughout the complete game (and not only this particular scene), can be set before defining this object that holds all the states (as you see). As you saw earlier, the local variables are created as part of the states' object. This means you need to put this. before a local variable when using it, and nothing in front of a global variable.

Creating an actual game

Due to the fact that everything in the game is inside an object which is linked to the Phaser Game Object (created in the html page), we need to put the magical words this. in front of nearly everything we type (without different states we would just use ‘game’ to refer to the game object).

Loading the media

First, you need to load all your media inside the preload function at the top. For example, loading images would be like this:

// Properties: ('name for reference', 'path to image to load')
this.load.image('star', 'star.jpg');

Inside the create function we setup our scene to be used and manipulated in the update function later on. If we for example want to create a sprite from our image we just loaded (including physics):

//Initiate the physics system Arcade (There's also Ninja and p2 available)
this.physics.startSystem(Phaser.Physics.ARCADE);

//Make our player into a sprite (xPosition, yPosition, 'referenceName of image')
//Remember: 'player' must be loaded in the preload function
this.player = this.add.sprite(50,50,'player');

//Scale our player so he's 2 times as big
this.player.scale.setTo(2,2);

//Enable physics on our player (must be done after it has become a sprite)
this.physics.arcade.enable(this.player);

//Make the player collide with the edges of the game
this.player.body.collideWorldBounds = true;

//Make the player move 40px/s in the x-direction
this.player.body.velocity.x = 40;

//Give the guy a 20% bounce off of other objects
this.player.body.bounce.setTo(0.2,0.2);
Updating and playing

The update function is run 60 times per second, and is used for animating/moving/interacting - the game itself. Before we move on, let's first set our variables in the top of the file before we forget

this.time = 0;
this.player = null;

We're going to use the time variable to make our player move slower every 3 seconds. This is what we put into the update function:

//Make time increment equal to the actual time (1 extra per 1 second)
this.time += (1/60);

//If the value of time modula 3 equals zero, decrease player's velocity
if(this.time%3 === 0) {
   this.player.body.velocity.x -= 6;
}

//(modula = the remainder when x can't be divided by y anymore,
// e.g. 10%3 = 1, 12%3 = 0)

Done! Now you have your first HTML5 scene moving. Now go create awesome games (but first, follow the advanced tutorial!).

CONTINUE WITH THIS COURSE
No previous post :( [Phaser] An advanced guide
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)