AI Workshop: learn to build apps with AI →
Phaser.js: Phaser: Scenes

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


This post is part of a Phaser series. Click here to see the first post of the series.

Scenes are where we define our game, and we pass them as the scene property in the configuration.

In particular, we can define

  • preload is the function where we can load external assets
  • create is called when the game is first created, here we can define the GameObjects needed at the start of the game
  • update is the game event loop, where we define how the game works

GameObjects are a particular type of Phaser objects

Here’s an example of the first 2 events mentioned:

function preload() {}

function create() {}

new Phaser.Game({
  width: 450,
  height: 600,
  scene: {
    preload: preload,
    create: create
  }
})

Or, since each property in this case has the same name as the function:

new Phaser.Game({
  width: 450,
  height: 600,
  scene: {
    preload,
    create
  }
})

Lessons in this unit:

0: Introduction
1: Setting up a project to build a JavaScript game with Phaser
2: Phaser: The Canvas
3: ▶︎ Phaser: Scenes
4: Phaser: Multiple scenes
5: Phaser: The game loop
6: Phaser: Adding images
7: Phaser: Sprites
8: Phaser: GameObjects
9: Phaser: Animations
10: Phaser: Keyboard events
11: Phaser: Mouse input
12: Phaser: Physics
13: Phaser: collisions and screen boundaries
14: Phaser: Playing sounds
15: How to create a platformer game with Phaser.js