Game

You need to create a game, of course.

new Phaser.Game({
  scene: {
    create: function () {
      this.add.text(0, 0, 'Hello world');
    }
  }
});

It's not necessary (for Phaser's sake) to wait for DOMContentLoaded or window.onload before creating the game. But if you have external stylesheets or images that affect page layout and you're using the Scale Manager, you may need to use window.onload.

The game is available on all scenes as this.game and is passed as an argument to relevant callbacks and event listeners, so you usually don't need to save a reference to the game unless you need to reach it from outside Phaser.

Configuration

• Game config examples

There are a lot of config options, and you can read about all of them. For historical reasons, some config values can be set in two places: e.g., width and height are the same as scale.width and scale.height.

For most cases, you should add scenes and any plugins directly to the game config, as that's the simplest method.

Any special startup work should usually be done in the preBoot or postBoot callbacks.

preBoot runs only after DOMContentLoaded. game.config and game.device are available. Some game.config values can still be modified here. Most game systems have not been set up yet. You can add scenes to the game here. The game's BOOT event happens around the same time.

postBoot runs after all the game systems are ready. The game's READY event happens around the same time. The game loop starts immediately after postBoot.

new Phaser.Game({
  // …
  callbacks: {
    preBoot: function (game) {
      // Config (including defaults) has been created.
      console.log('config' game.config);
    },
    postBoot: function (game) {
      // Game canvas has been created.
      console.log('canvas', game.canvas);
    }
  }
});

Rendering

Phaser.AUTO (the default) is WebGL if available or Canvas otherwise. If you pass Phaser.WEBGL then you should probably handle the no-WebGL case:

try {
  new Phaser.Game({ type: Phaser.WEBGL });
} catch (err) {
  alert('This game requires WebGL.');
}

Lights, shaders, sprite effects, tints, and certain game objects (Mesh, Rope) are WebGL-only features. Extra blend modes are in Canvas 2d only.

The default rendering settings are antialias: true, antialiasGL: true, and roundPixels: false.

pixelArt: true includes antialias: false, antialiasGL: false, and roundPixels: true. If you want to set antialias, antialiasGL, or roundPixels separately, then don't set pixelArt.

Events

Game events are emitted from the game's events.

FOCUS and BLUR happen when the game window or frame gains or loses focus by the user's mouse clicks or key presses.

HIDDEN and VISIBLE happen when the game tab or window is hidden, switched away from, minimized, or restored, per the Page Visibility API. Operating systems can differ here. PAUSE and RESUME events usually occur at the same time.

You can emit and listen to your own events on this emitter as long you avoid Phaser's event names.

Registry

There's no way to pass registry data directly through the game config, but you can do it in a callback:

new Phaser.Game({
  // …
  callbacks: {
    preBoot: function (game) {
      game.registry.merge({
        highScore: 0
      });
    }
  }
});

Systems

Game	Scene	Description	Notes
anims	anims	Animation Manager
cache	cache	Cache Manager
device	game.device	Device record
events	game.events	Global events emitter	The scene's events is its own emitter.
input	input.manager	Input Manager	Use the scene's Input Plugin input instead.
loop	game.loop	The game loop
plugins	plugins	Plugins Manager
registry	registry	Global registry
renderer	renderer	Renderer
scale	scale	Scale Manager
scene	scene.manager	Scene Manager	Use the scene's Scene Plugin scene instead.
sound	sound	Sound Manager
textures	textures	Texture Manager