~1 min read

Your First Scene

Build and run your first Phaser 4 scene — a bouncing logo — in a sandboxed playground.

A Phaser 4 program is, at minimum, a Game configured with at least one Scene. A scene has three lifecycle hooks you’ll use constantly:

  • preload() — load assets into the cache.
  • create() — build the initial scene graph.
  • update(time, delta) — run per-frame logic.

Here is the smallest interesting program: a sprite that bounces around its bounds. Edit the source in your own project and the same code will run identically.

Bouncing logo Phaser 4 · sandboxed

What just happened

  1. Phaser.AUTO asks Phaser to pick the best renderer (WebGL where available, Canvas otherwise).
  2. The physics config enables Arcade physics with no gravity, so the sprite moves in a straight line until something deflects it.
  3. this.load.image(key, url) queues an asset; the loader resolves it before create() runs.
  4. this.physics.add.image(...) creates a sprite that participates in physics — that’s why it has setVelocity and setBounce.
  5. setCollideWorldBounds(true) turns the game’s bounding box into a collider, giving us the “bounce” effect.

Where to go next