Dear friendy reader,

nice to see you around here. I publish these articles for free and it would be very kind of you to support my blog. You can start by disabling your AdBlocker. That would mean a lot to me and will help to finance this blog.

Best regards, J. Wiese

Phaser 3 - Game configuration

Phaser 3 - Game configuration

Phaser is one of the most powerful 2D engines written in JavaScript. Now with Phaser3 it is even more powerful, but some things have changed. Let’s explore the initialization of a Phaser3 canvas which is very similar to the previous version, but requires now a configuration object.

To initialize the canvas of the game you need to create a new instance of Phaser and pass the desired configuration in one configuration object. If the config object does not contain an expected key, Phaser will apply the default values as shown in the table below.

include 'phaser'
var config = {}; 
var game = new Phaser.Game(config); 

Next, we need to fill in some options. All options and their default values can be found at the config parser here. But the most time you won’t need all of them. The following example shows the most commonly used ones.

var config = {
   width:800,
   height: 600,
   parent: 'idofcontainer',
   title: "Mygame",
   url: "http://url.to.my.game",
   version: "0.0.1",
   scene: {preload: preload, creat: create, update : update},
   fps: 30
};

#Load the reources
function preload() {...}

#Create the game objects
function create(){...}

#Update the game objects
function update(){...}

Note: You can use the function structure above for small projects, but for complex projects, it is recommended, to split the game into multiple files, especially for with multiple scenes. Therefore, you should take a look at a loader such as Webpack.

All start parameters

NameDefaultValueDescription
width1024The width of the canvas element.
height768The height of the canvas element.
zoom1Scalar for the canvas and render size.
typePhaser.AUTOSwitch render mode:Phaser.AUTO,Phaser.CANVAS,Phaser.WEBGL,Phaser.HEADLESS
resolution1Multiplier of the canvas’s size, does not increase the rendered field.
parentnullId of the containing DOM-Element.
canvasnullYou know it? Write a comment pls
canvasStylenullSets the canvas context fillStyle property.
scenenullA scene object or similar custom object
seedRandom numberInitial seed for all random calcultions
titleThe game title.
urlhttp://phaser.ioThe game url.
versionThe current game version.
input.keyboardtrueEnable or disable the keyboard input.
input.keyboard.targetwindowConfigure the keyboard input event source .
input.mousetrueEnable or disable the mouse input.
input.mouse.targetnullConfigure the mouse input event source.
disableContextMenufalsePrevent default action of the mouse right click.
bannernullHides the banner.
banner.hidePhaserfalse?
banner.text’#ffffff’Banner text color.
banner.background[‘#ff0000’,
’#ffff00’,
’#00ff00’,
’#00ffff’,
’#000000’]
Banner background color.
fpsnullThe maximum fps.
pixelArtfalseUse pixel art filter, adapts point filter. Effects the scaling of textures.
clearBeforeRendertrueEmpty the canvas before first render.
backgroundColor0Custom background color. (0x000000 - 0xFFFFFF)
transparentfalseSets the background color of the canvas to transparent.
preserveDrawingBufferfalse?
callbacks.preBootPhaser.utils.NOOPCallback function before boot.
callbacks.postBootPhaser.utils.NOOPCallback function after boot.
useTicker?
physicsConfigure the physics system. Ex: { system: ‘impact’, gravity: 0, cellSize: 64, }
images.defaultdata:image/pngbase64
images.missingdata:image/pngbase64