Exploring Phaser 3 with a Game

After sticking with Phaser 2 (CE) for a while finally I decided to jump onto Phaser 3 (ver 3.15.1). Though there is still some work going on such as Scale Manager which is not released yet but the api seems to have grown and stablized with plenty of documentation available now. We are going to write a game while we explore this deeper. Let us write classic game of Peg Solitaire which is also known as just “Solitaire” in England and Brainvita in “India”.

First we are going to create an html file (index.html) with following content

html file includes phaser js and our game code (game.js) which is placed in js folder. Let us start with the basic one screen setup as following

If you are coming from Phaser 2 then you would notice some differences. We are starting a game and passing a config which defines the type (similar to Phaser 2; AUTO, WEBGAL, CANVAS), width and height of the game, backgroundColor and one scene. We have a skeleton scene which is not doing anything at the moment. We will add code to this as we move forward. In Phaser 2 we has the concept of states where we could define multiple states and then load one state at a time. We could move between states such as a menu screen, game screen, game over screen. Scenes are something similar but highly advanced now. In Phaser 2 we could only load one state a time but now in Phaser 3 we can have multiple scenes running in parallel. We can move from one scene to another or run multiple screens at the same time. Scenes can overlay each other or can be placed adjacent to each other and all we have to do is to change the camera position to move from once scene to another. Scenes are much powerful now since they are now self-contained games in their own right with all game objects such as input, camera, tweens etc available to them. Scenes are managed by The Scene Manager but we would never need to access anything via The Scene Manager. Everything a game requires would be available inside scene itself.

Read all about scenes in the Phaser 3 devlogs here and here. Its a must read.

The work so far gives us a screen as following

Now let us center align our game in the html. Add following style to canvas element

We will add this class in css file and load the css in html. Now we have an app.css file in css folder as following

html file is changed to

Also changed the background color of the game so now our empty game looks like following

We are going to create an english board. First we need to import a spritesheet which contains the images we are going to use in this game. I have a simple 3 image spritesheet as following

We will import the spritesheet in preload method

Now we are going to draw the board

Now we have drawn the board as following

In this code we have added the images to their positions. The game play can be done by simply changing the frame according to the rules. No heavy processing or complex logic is required in the game (unless we want to add automatic solver for the game).

One important change in Phaser 3 from Phaser 2 is that all images or sprites are by default positioned from center (in Phaser 2 this started from top left corner) so if we want to change it to top left corner then we can use setOrigin method and set it to 0.

Now let us simply add some event and game code

Now we have a working Peg Solitaire game in about 100 lines of code. I have highlighted the code used for adding the event which was taken right out of the example on Phaser 3 demo site. You can try the code at work below

What is next:

The game does not display any message on game over so in next part we are going to add another scene which in turn let us make use of multiple scenes in the game. We would also like to add some animations to the game when pegs are jumped. I also think that games should be written with responsive in mind so in next part we would explore the responsive behaviour in Phaser 3. In fact Scale Manager is round the corner with next release so we can explore that as well once it is out.


Leave A Comment

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