Getting Started With Phaser 3



Phaser 3 is a Javascript framework cross-browser HTML5 games.

Basic Concepts

Phaser makes use of the canvas browser tag.

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.


A Phaser game is configured with the config object, the complete options for configuration can be found at , this is a basic example:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update

var game = new Phaser.Game(config);

The main controller for the Phaser game is Phaser.Game.

Phrase game possible types are:

  • Phaser.CANVAS: automatically tries to use WebGL (fall back to Canvas).
  • Phaser.WEBGL:
  • Phaser.AUTO

Game dimensiones, set up with width and height, defines the resolution the game will display in.

The scene property can be: var defaults = [ 'init', 'preload', 'create', 'update', 'render' ];. Here we configure the scene


Assets can be preloaded at the preload scene

function preload ()
    this.load.image('sky', 'assets/sky.png');

Where sky in this.load.image('sky', 'assets/sky.png'); is the asset key, a link to the loaded asset available in Game Objects, for example in the create function:

this.add.image(400, 300, 'sky');

As the sky background image is 800x600, then to center the image we use the sizes (8002)x(3002) or redefine the center origin with this.add.image(0, 0, 'sky').setOrigin(0, 0).

Game Objects are positioned on their center by default.

The order in which Game Objects are displayed is according to the creation order.

Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.
comments powered by Disqus

Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 . Terms and Policy.

Powered by SimpleIT Hugo Theme