Phaser tutorial for beginners

This is simple and easy tutorial on how to start making HTML5 games with Phaser Game Engine. You need to have basic HTML and JavaScript knowledge to be able to understand this topic. Its appropriate for beginner game developers who want to make games for web browsers. Games made with Phaser can be played on both desktop and mobile browsers.

Introduction

What is Phaser?

Phaser is quite popular and easy to use and easy to learn desktop and mobile HTML5 game framework. Its open source and good solution for newbie HTML5 game developers. It also has some extensive documentation, many examples and live community.

What you need to know?

Basic JavaScript and HTML5 knowledge is a must. You can learn more from our tutorials – HTML5 tutorial, JavaScript tutorial.
You need to know how to set up your IDE, web server and include scripts. Maybe one of the fastest ways to do so is to get Netbeans for web and use it. Eclipse is another good alternative.

How to use/run Phaser

Adding Phaser to your javascript code is as easy as including one script tag:

<script src="phaser.js"></script>

And here is how to create Phaser game – only the basic code:

var game = new Phaser.Game(300, 300, Phaser.AUTO, 'game', { preload: preload, create: create });

Simple example

Now we will combine all the above. This simplified code will create Phaser game and one image to it.

<html>
    <head>
        <title>Phaser tutorial</title>
        <script src="js/phaser.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>
            var game = new Phaser.Game(300, 300, Phaser.AUTO, 'game', { preload: preload, create: create });

            function preload() {              
                game.load.image('cloud', 'assets/cloud.png');
            }

            function create() {                
                game.add.sprite(100, 150, 'cloud');
            }
        </script>
    </body>
</html>

And now lets explain the code from above:

var game = new Phaser.Game(300, 300, Phaser.AUTO, 'game', { preload: preload, create: create });

This row creates new Phaser game with 300 width(first parameter), 300 height(second), Phaser.AUTO gives the Phaser right to choose the renderer(keep it that way for now). The ‘game’ parameter chooses the parent HTML element for our game – the div tag with the id=”game”. The last is our state object – for now we will supply it this way. It specifies two functions – preload and create.
In the preload method we load our assets – we only load them, not using them:

game.load.image('cloud', 'assets/cloud.png');

The first parameter is unique string that we specify and will use later to create our sprites in game. The second parameter is the relative path to our image – you change that according to the image you use.
And now when our game is created we add the sprite:

game.add.sprite(100, 150, 'cloud');

First parameter is x position, second is y position and the last is our unique string we specified before.

Here is the result of the code above:
phasergame

Now lets change our example a little to add more objects on random positions. For this reason I’ll change the size of the game to something bigger – 800×600.

<html>
    <head>
        <title>Phaser tutorial</title>
        <script src="js/phaser.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>
            var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create });

            function preload() {              
                game.load.image('cloud', 'assets/cloud.png');
            }

            function create() {      
                for(var i = 0; i < 100; i++) {
                    var x = Math.random() * 800;
                    var y = Math.random() * 600;
                    game.add.sprite(x, y, 'cloud');
                }
            }
        </script>
    </body>
</html>

And the result:
phasergame1

There are several ways to move objects and the simple of them all is to set the x and y of the sprite to new values. Now we will change again the first example so our sprite will get the coordinates of a click or touch event. When you click on the game the cloud will appear bellow your mouse. There will be no nice move, just the cloud will show at the new coordinates.

<html>
    <head>
        <title>Phaser tutorial</title>        
        <script src="js/phaser.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>
            var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create });
            var cloud;
           
            function preload() {              
                game.load.image('cloud', 'assets/cloud.png');
            }

            function create() {                      
                cloud = game.add.sprite(150, 150, 'cloud');
                game.input.onDown.add(moveCloud, this);
            }
           
            function moveCloud(pointer) {
                cloud.x = pointer.x;
                cloud.y = pointer.y;
            }
        </script>
    </body>
</html>

Let’s explain. Now we have variable cloud with global scope and in our create function we assign it new cloud object:

cloud = game.add.sprite(150, 150, 'cloud');

Phaser.Input is the input manager responsible for all types of input in Phaser. You can read more here – Phaser.Input.

game.input.onDown.add(moveCloud, this);

And here is our function responsible for moving the sprite and setting the new coordinates.

function moveCloud(pointer) {
    cloud.x = pointer.x;
    cloud.y = pointer.y;
}

More complex example

And as useful as it is Phaser offers some great functionality to make the example above more smooth and nice. We can use its arcade system to make our cloud follow the pointer.

<html>
    <head>
        <title>Phaser tutorial</title>
        <script src="js/phaser.js"></script>
    </head>
    <body>
        <div id="game"></div>
        <script>
            var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
            var cloud;
           
            function preload() {              
                game.load.image('cloud', 'assets/cloud.png');
            }

            function create() {                      
                cloud = game.add.sprite(150, 150, 'cloud');
                game.physics.enable(cloud, Phaser.Physics.ARCADE);
            }
           
            function update() {
                if (game.input.mousePointer.isDown)
                {                    
                    game.physics.arcade.moveToPointer(cloud, 200);                  
                }
            }                        
        </script>
    </body>
</html>

And to explain what is happening in the code above.

game.physics.enable(cloud, Phaser.Physics.ARCADE);

Here we enable the body to use the ARCADE physics of Phaser. We will discuss this system in details later on.

game.physics.arcade.moveToPointer(cloud, 200);

When the mouse is down we move our sprite with the speed of 200 towards the pointer. If you remove the pointer the cloud will continue in that direction indefinitely. When you click again it will move towards the new position.

Leave a Reply

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