Placing things into Phaser

Placing Text

Now, you will learn how to place things within Phaser. Look at the repl below.

Let’s first go over how to place text!

message = this.add.text(20, 10, "Hello World!", {
	font: "25px Arial",
	fill: "white"
});

These lines of code create a variable named “message.” This variable adds the text “Hello World” to the (X, Y) coordinate (20, 10) on our game window. The code also specifices that the text is created to be the color white, have font Arial, and have font size 25 px.

Put this line in your create() method at the bottom of the page and see if it pops up in your game window.

Placing a Background

Texts are very simple, but when we want to use our own custom sprites for the game (which you almost always will), you have to first load the sprite in preload() before you specify its location in create().

Let’s start by creating a background. Put this code into your preload() method.

this.load.image('background', 'assets/sky.png');

This simply loads the image into the game. Next, let’s add this image to the game with create():

this.add.image(400, 300, 'sky');

This line simply places the image on coordinate (400, 300). Try it out, and see if your background is no longer a black screen!

Placing a Character

Next, let’s put a character into our world.

The code that goes into your preload() function looks like this:

this.load.spritesheet('dude', 'assets/dude.png', {
    frameWidth: 32,
    frameHeight: 48
});

This requires a bit more code because it is a spritesheet instead of a simple sprite. Spritesheets look like this: This is the spritesheet for our character. Spritesheets are essentially a collection of sprites of a single character or thing in multiple positions. When played back to back, they will create animation for our game (which we will describe in more detail in the next lesson). Although it is obvious to us that it is a bunch of images of the same character, the computer isn’t able to easily detect this on its own. So we have to have more syntax to tell the computer how big each character sprite is in the spritesheet (in this case, 32x48).

The syntax to place this spritesheet in create() is nearly the same as with the image, but with a physics tag:

dude = this.physics.add.sprite(250, 200, 'dude');

In this line, we are creating variable “player” that adds the first image in the spritesheet at coordinate (250, 200). The image is also given the name “dude.”

In this line, player is the name of a variable that we are creating. 250 and 200 are the X and Y coordinates that we have placed the sprite, so it will be placed at the coordinate (250, 200) on our screen. “dude” is the name of our sprite, but it won’t come into play in this particular lesson.

Try adding in the character! Do you see the character on your screen?

Launch Replit