Beginner’s Guide to Phaser3

Phaser 3 is a Javascript game framework that is used for making HTML5 games for desktop and mobile.

Phaser uses a Canvas and WebGL renderer, which makes it widely compatible with any web browser that supports the <canvas> HTML tag. Because of that, it can easily be ported to other platforms as non-compiled apps.

So why do people use Phaser? Well, anyone who was on the internet prior to the 2010s will know that flash games were some of the most dominant games on the web. Phaser 3 is the spiritual successor to Adobe Flash, and many of the modern ‘Flash’ games are instead programmed in Phaser 3. Because of that, there is a large community of Phaser 3 fans and programmers, and many guides to help you on your way to creating a browser-based game.

Basics of Phaser 3

A lot of the Phaser 3 docs focus on the nitty gritty of how to get started installing Phaser on your browser, but I want to focus instead on the basics of the Phaser starter code. If you are interested in installing and working with Phaser3, feel free to refer to those docs, as they will be helpful. But this will just explore the basic functions of Phaser through the code of the initial starter boilerplate code.

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

So here, there are a couple of main things. There is first the config object, where the Phaser configuration is done. Then, there is the game variable being set by creating a new ‘Phaser.Game’ from that config. Lastly, there are three functions that are referenced in the config that have to do with the Phaser game that was just created.

Config

In the config, you can set various settings for the Phaser 3 game you’re about to create.

There are some obvious ones, such as the width and height. Those will determine the size of the game’s canvas.

Then, there is the type. The type determines the ‘rendering context’ that you want to use for your game. The recommended value is Phaser.AUTO , for now. More advanced users may use this type property in order to set Phaser.CANVAS or Phaser.WEBGL .

The scene object in the config will contain the meat of the code. Here, in the boilerplate, each of preload, create, and update point to functions in the top level document. It is in these functions that programmers are expected to add code to operate the game.

The ‘preload’ function will contain code that is used to load in assets, such as image files and music and animations.

The ‘create’ function will create these assets on the canvas and set them in motion.

The ‘update’ function will loop over and over again, and it is here that code is provided to determine the game logic of your game.

Conclusion

This is the barebones of Phaser 3 code. Here, you can see the basic structure of Phaser 3 and how it is structured to better help programmers. The preload and create functions are run at the beginning of the program, so Phaser3 programmers would put set up instructions there. Then, in the update function, that is where the details are filled in, which will continue to loop until end conditions are met. With this information, we can better understand the structure of Phaser 3 code so we can move forward into developing games.

Sources

https://phaser.io/tutorials/making-your-first-phaser-3-game/