Scenes in Phaser 3

Just a little bit about scenes in Phaser 3.

Phaser 3 is a powerful JavaScript game framework that is built on top of WebGL and Canvas.

Phaser 3 utilizes scenes to hold different states of a game. There can be as many scenes as you want for your game. For example, a game can have a main menu scene, options scene, game scene, and game-over scene.

The boilerplate for a title scene might look something like this:

When a new scene is started, it calls on 4 methods:

1. init()

2. preload()

• Load images, fonts and various assets.
• Can also be used to bind inputs, add keys, and gamepads.

3. create()

• Called once after preload ends.
• Adds text, images, sprites, game sounds, and other various assets onto the game canvas.

4. update()

• Update is a game loop that is called up to 60 times per second.
• This is where you bind actions to your game. Example:

this.player.setVelocity(0);
if (this.cursors.left.isDown) this.player.setVelocityX(-300);
if (this.cursors.right.isDown) this.player.setVelocityX(300);
if (this.cursors.space.isDown) this.player.setVelocityY(-1000);

A simple game scene that has a movable character and another draggable image on the canvas: