Phaser 3: an Introduction

I created my capstone project, Rave Mom, in Phaser 3 and Ruby on Rails. This blog details structuring of the game in Phaser 3. I hope this can be used as an introduction to Phaser 3 for anyone who is considering tackling a two dimensional javaScript game.

Scenes:

In phaser 3, the game can be broken down into scenes. Scenes act as the interactive sections of the game. Rave Mom had two scenes: a start menu scene and the game scene. Each scene has its own javaScript file (startmenu.js and gamescene.js). The two scenes are combined under the config object that is set up in a game.js file. The config object sets up properties of the Phaser 3 game. The gameState object set up in the game.js and holds information stored about the game that can be used in each scene. The phaser game is initialized in game.js. See below my code for the game.js file for “Rave Mom”:

Each scene is a class in javaScript that extends Phaser.Scene. The scenes are then turned on and off using an event listener. I used an event listener to turn off the start menu and start the game on the start screen as shown below:

Preload, create and update:

Within the game scene, there are preload, create, and update methods. The preload method is where sprite sheets, images, and information stored in gameState is set up. Information that I stored in gameState included the block locations, the locations of the rave girls, the possible player locations for the determination of the player’s current position, the grid locations for each of the 40 different laser bombs and explosions, and a flag for the game ending.

The majority of the functionality of the game was put into the create method. The sprites are added in the create function for manipulation by game physics. The animations are created for use by the sprites and the animations are controlled in the create method. The collider interactions are set up and the event listeners for various interactions are also set up in the create method. The scoring and the fetch call to the backend to store the scoring is also set up in the create function.

The update function was used to set up the motion of the player and to limit the motion of the player caused by user input. The update function for Rave Mom is shown below:

Animations:

The animations from the sprite sheets were created using this.anims.create in the create method. The animations can then be played on the corresponding created sprite. I would like to explain what each key value does when creating the animation. The key is used to label the animation for later referencing, the frames are the frames of the sprite sheet used referencing the sprite sheet key (this.anims.generateFrameNumbers returns an array of the sprite sheet’s frames used starting from start and ending in end), frameRate sets how many frames are run per second, and repeat is used to set up how many times the animation repeats (-1 is used to set a continuously repeating animation).

In conclusion, I hope this blog can be used as a primer for anyone thinking of trying to build a game in Phaser 3 using my capstone project for Flatiron School Denver, Rave Mom. Using phaser 3 to create “Rave Mom” was a challenging and rewarding endeavor.