We’ve been making GameObjects in an existing game, but let’s take a step back and think about how to create a Phaser game from the beginning. We can do that by calling
Phaser.Game() by itself creates a new
<canvas> element and appends it to your HTML document. This element allows Phaser to draw sprites and shapes to a website.
In order to make games of our own design, we call
Phaser.Game() with an object that specifies some meta-information about the game. We define that object beforehand and conventionally name the variable
config. Here are some of the keys we can define in a
height: the height, in pixels, of the
width: the width, in pixels, of the
parent: the HTML element that Phaser will place the
<canvas>element inside of.
backgroundColor: the background color of our game, usually given in hexadecimal.
type: the Renderer Phaser will use: either
Phaser.WEBGLwhich offers some additional features while drawing or
Phaser.CANVASwhich can run on more browsers. The default,
Phaser.AUTO, checks if the browser supports WebGL and, if not, switches to canvas.
There is plenty more data that we could possibly add to configure our games, but these basics will get us pretty far. If you wish to learn more about the fields a
config supports, check out the Phaser documentation (the docs!).
We’re going to build a Phaser Game from the ground up! Start by declaring a
config object that includes the following properties:
Now let’s use that
config to create a Game! Create a new game by passing our
new Phaser.Game(). Save the results in a variable called