Phaser: GameObjects

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

In the create function of Phaser, we have the ability to add GameObjects to the game. These GameObjects can include shapes like circles or text.

For example, to add a circle to the game, we can use the this.add.circle method:

1
2
3

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

This code will add a white circle at position (100, 100) with a diameter of 90 pixels. The circle variable holds a reference to the newly created circle.

To add text to the game, we can use the this.add.text method:

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

This will add the text “test” at position (130, 100) on the screen.

We can also customize the appearance of the text by passing a set of options:

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

This code will create text with a font size of 20 pixels using the Arial font and a white fill color.

Every GameObject has a set of properties that we can access. For example, we can get the x and y positions of the GameObject in the 2D space using text.x and text.y.

Tags: Phaser, GameObjects, shape, circle, text