programming Phaser Game Development: Part 1

[PaulSonny]

Over the course of the next few weeks I am going to be showing you the Phaser framework and building a simple HTML5 game. This game will run on a mobile phone but it's important to point that Phaser is not a framework specific to the mobile domain, many developers, myself included are creating browser based HTML5 games to run on a desktop computer.

As with any development, when using HTML5 to build a game you need to keep the performance limitations of the browser in mind, whether it be a mobile browser or a desktop browser. Using HTML5 to build a 3D game with HD graphics and loads of animations isn't a great idea - but if you want to build reasonably simple games like Candy Crush or Flappy Bird then this framework is a great choice.

I've found Phaser to be one of the current most popular HTML5 game frameworks and is by far the most active framework on sites like www.html5gamedevs.com and is still being actively developed by Photon Storm.

Considerations

As we are developing for a mobile we need to consider the challenges that are unique to mobile when designing the game. Things such as:

• Although mobile is the intended device, different devices such as tablets and desktops with different screen sizes and resolutions can stll be used.
• The primary input method for the game will be touch.
• Consider how the user will play the game? Will the user be blocking most of the interface with their thumb when playing?
• Processing power will be very different to that of a desktop computer, there is also a difference between mobile phones these days.
• We will have access to features that the desktop may not, such as GPS and motion for example.

If you apply these considerations to your game, the most obvious issue that springs to mind most of the time is do with movement. Will there be a need for the user/character to move in any direction, usually this is easily solved with a keyboard, but with a touch enabled device, that is no longer possible, therefore, our options then may include:

• Control the character by dragging with gestures.
• Create your own directional controls on the screen.
• Use the device to control the movement by tilting the device.

There are a multitude of obstacles to overcome, such as dealing with the changing size of devices and how that will affect your game, hopefully over the course of this series we will be able to combat most of these issues. Now, let's get started!

Configuring Your Environment

We will discuss and deal with these issues as we get to them, but it's good to think of these things and consider potential approaches from the start.

To start off with, I want to help you get your environment setup.Phaser needs to run on a web server and the best way to do this in your local machine. Once your web server is up and running, you will be able to store all your files locally and access them through http like:

http://localhost/my-first-game 

instead of through the file system like this:

file://C:/Users/Your-Username/my-first-game

Using the file:// protocol will not work as it is much more restricted than the http:// protocol.

There are various options available for getting a web server to run on your machine which you will be able to find via Google, but a great option and the one I always use is WAMP. If you are a Mac user, I hear XAMPP is a great alternative.

1. Download and Install WAMP

Once you have WAMP installed, please launch it and make sure all services are running by using the Control Panel in your system tray. A green W means everything is ok. Orange or Red signifies there is a problem that needs to be rectified.

Anything you wish to able to access through localhost in your browser needs to be placed with the www of your install. On a default windows installation this is usually located at:

C:\wamp64\www

Download Phaser

Phaser is very easy to download and setup. Once you get into the swing of development I would normally recommend you create a custom build that only includes the elements you need which is a great way of keeping the file size down but for now we will be downloading the full phaser installation.

1. Go to the download page.
2. Download the the js or the min.js version of Phaser.
   1. I personally recommend the js file as it can make debugging and error detection much easier.

Creating a Game Skeleton

Now you are up and running, it's time to get on with the first lesson. I am going to take you through setting up a skeleton for your Phaser project. This will be a generic set of files that can be used for just about any game. Once we are finished, I recommend you take a copy and keep this for future projects.

A state in Phaser is JavaScript that runs a specific state within the game. For example a state might be the game title screen, another would be the game itself, and another would be the game over screen. In a more complicated game you may also have different states for different levels of the game.

As well as the examples above, we also have states for booting and loading the game. The states you will be creating in your skeleton game are as follows:

Boot

This is the very first state as is invoked as soon as the game is launched/started. This is primary used to scale the dimensions of the game and to call the second state.

Preload

This is the second state and is used to load in any assets such as images, fonts, audio that the game needs to function. Once all the assets are loaded, the next state is triggered.

MainTitle

The MainTitle state is used to display the game title. This will usually display the title of the game and maybe a graphic that says Play or Start that acts as a button. As you get more comfortable with development you could expand this further and add an instructions button that would open a popup or perhaps a Tutorial state.

Main

The Main state contains all the juicy parts of the game and allows for actual game play.

GameOver

Once the player dies/wins they will automatically trigger the GameOver state. This screen is used to display the final score and give them an opportunity to start a new game.

The reason I like to use states as it prevents all the code in one giant state. This allows us to make it more modularised, more readable and organised. It also makes future updates a hell of alot easier.

Setup Your Game

• Start by createing a new called game-skeleton in your web server root.
• Inside that folder create two more folders:
  • assets
  • js
• Copy the downloaded phaser.js/phaser.min.js files into the js folder create above.

Now you have the above structure, we will begin creating each of the states we discussed above.

Create the Boot State

• Create a file called boot.js inside of your js folder and copy the following to it:

var Boot = function(game){

};

Boot.prototype = {

    preload: function(){

    },

    create: function(){
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.setScreenSize(true);
        this.game.state.start("Preload");
    }
}

 

This state will set the screen size to fit the device that you are using and then trigger the "Preload" state. The boot state will only run when the game is first launched and will only run once.

Create the Preload State

• Create a file called preload.js inside of your js folder and copy the following to it:

var Preload = function(game){};

Preload.prototype = {

    preload: function(){ 

    },

    create: function(){
        this.game.state.start("MainTitle");
    }
}

This will state will would normally have more code that will load in the assets required for your game. For the time being we will just be calling the next state.

Create the MainTitle State

• Create a file called maintitle.js inside of your js folder and copy the following to it:

var MainTitle = function(game){};

MainTitle.prototype = {

    create: function(){

    },

    startGame: function(){
        this.game.state.start("Main");
    }

}

The MainTitle state has a create method that will run when the state is triggered. This will be used to create the title screen which will contain some form of graphic and a start/play button that calls startGame function which triggers the Main state. 

Create the Main State

• Create a file called main.js inside of your js folder and copy the following to it:

var Main = function(game){

};

Main.prototype = {

    create: function() {

    },

    update: function() {

    },

    gameOver: function(){
        this.game.state.start('GameOver');
    },

};

The Main state is where all the magic of your game happens. It is responsible for the running of the game. A gameOver method is for triggering the next state when we are ready. You will notice this state has a new update method that will constantly loop every frame refresh. The initial state of the game will be done in the create method, but alot of the logic will be in the update method.

The update method will be used to call the gameOver method, for example if a player is colliding with an enemy.

Create the GameOver State

• Create a file called gameover.js inside of your js folder and copy the following to it:

var GameOver = function(game){};

GameOver.prototype = {

    create: function(){

    },

    restartGame: function(){
        this.game.state.start("GameTitle");
    }

};

This is the final state. We use the create method which will create the Game Over screen as well as an additional method that will allow the user to restart the game. When we leave the state and come back to it later it will be refreshed.

Moving between states destroys anything created previously, it is like starting a fresh each time a state is called. However, it is possible to create some persistence throughout the game using local storage, which i'll be sure to cover at a later date.

Bring it all Together

• Create an index.html file in the root folder of your project and add the following code:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>I Hate Squares</title>
    <script type="text/javascript" src="js/phaser.min.js"></script>
    <script type="text/javascript" src="js/boot.js"></script>
    <script type="text/javascript" src="js/preload.js"></script>
    <script type="text/javascript" src="js/gametitle.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/gameover.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        (function() {

                //Create a new game that fills the screen
                game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO);

                //Add all states
                game.state.add("Boot", Boot);
                game.state.add("Preload", Preload);
                game.state.add("MainTitle", MainTitle);
                game.state.add("Main", Main);
                game.state.add("GameOver", GameOver);

                //Start the first state
                game.state.start("Boot");

        })();
    </script>
</head>
<body>
</body>
</html>

The Javascript is responsible for initialising the game. To create an instance of a Phaser game we call Phaser.Game() and supply it with the width and height of our game, as well as the rendering engine we wish to use.

As well as providing a height and width, we can also supply the devicePixelRatio which is handy for mobile games as it allows the game to scale properly.

As I mentioned, we also supply which rendering engine we want to use to the Phaser.Game() call. This can either be WebGL or Canvas, if we set it to AUTO then it will use WebGL if available, but fall back to Canvas if it is not available.

Once we have initialised our game, we add all of our states to the game and trigger our first state. This will then start the chain reaction of calling the states we created before: Boot calls Preload which calls MainTitle which calls Main which calls GameOver which then calls MainTitle once more.

This is the end of Part 1 and you now have a blank skeleton application that you could use for just about any game.

Feel free to Follow Me to get notified for the next installment.

This tutorial and more like it can be found on my company website: P S Web Solutions Ltd.

Edited April 13, 2017 by PaulSonny

[Syntax]

Thanks for this! Looking forward to the next one!