Phaser: GameObjects

Apr 16, 2021

Learn how to add GameObjects in Phaser inside the create function, drawing shapes with this.add.circle and text with this.add.text and its options.

~~~

This post is part of a Phaser series. Click here to see the first post of the series.

Inside the create function we can add GameObjects to the game.

For example we can draw shapes, like a circle:

function create() {
  const circle = this.add.circle(100, 100, 90, 0xffffff)
}

This adds a white circle at position (100, 100), with a diameter of 90. Those numbers are expressed in pixels.

The circle variable contains a reference to the newly added circle.

this in the context of the function refers to the scene object.

Another example is this.add.text(), which adds text to the game:

const text = this.add.text(130, 100, 'test')

You can customize how text looks, by passing a set of options:

const text = this.add.text(50, 100, 'Test', {
  font: '20px Arial',
  fill: '#FFFFFF'
})

Any GameObject as a set of properties. For example we can access the x and y axis positions, in the 2D space, using text.x and text.y.

~~~