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.

Lessons in this unit:

0:	Introduction
1:	Setting up a project to build a JavaScript game with Phaser
2:	Phaser: The Canvas
3:	Phaser: Scenes
4:	Phaser: Multiple scenes
5:	Phaser: The game loop
6:	Phaser: Adding images
7:	Phaser: Sprites
8:	▶︎ Phaser: GameObjects
9:	Phaser: Animations
10:	Phaser: Keyboard events
11:	Phaser: Mouse input
12:	Phaser: Physics
13:	Phaser: collisions and screen boundaries
14:	Phaser: Playing sounds
15:	How to create a platformer game with Phaser.js