Phaser 3 Basics - Images, Text and Click

When learning any new framework or front-end language, especially for games the first three things I want to know are

How to add an image
How to add text
How to add click events

If you are coming from Phaser CE, I’m going to mention what’s changed. If you are completely new to Phaser, just ignore those parts, and it will still help you get a jump start on building games in Phaser 3.

The Game Object

There is a global game object, just as there was in Phaser CE but now it no longer handles creating things for the game. That is now a function of the scene. We can no longer use things like game.width or game.height, but the config file is a child of the game so we can use game.config.width and game.config.height to get the game’s size;

Finding the center of the game

To find the horizontal center use:

this.centerX=game.config.width/2;

To find the vertical center use:

this.centerY=game.config.height/2;

Preloading an image

To preload an image we use this code in the preload function of a scene.

this.load.image(key, path);

Here is a practical example:

this.load.image("face", "images/face.png");

Place an Image on stage

After preloading an image we can place images using code in the create function

this.face = this.add.image(x, y, key);

This example places an image in the middle of the canvas

this.face = this.add.image(game.config.width / 2, game.config.height / 2, "face");

Place Text On Stage

To create basic text

this.add.text(x,y,"Some Text");

To change the font, font size or color to the text, you can pass in an object like this

var textConfig={fontSize:'20px',color:'#ff0000',fontFamily: 'Arial'};
this.add.text(game.config.width/2,game.config.height/2,textConfig,"SomeText",textConfig);

Understanding Point of Origin

All game objects such as images, sprites, and text have origin points. In Phaser CE this was known as anchors. These values determine where the image starts in relation the x and y. An origin has an x and y property (x,y). For example, if you place the x and y to the center of the screen a origin of (0.5,0.5) the image would sit perfectly centered in the middle of the game. If we set an origin of (0,0) then the top left corner of the image would be in the center.

We can set the origin of an object by using this code:

this.image.setOrigin(x,y);

X and Y values take a decimal value between 0 and 1. Images (and sprites) by default have a centered origin 0f (0.5,0.5) and text objects have a top left corner origin of (0,0) ;

Clicking on an object

Set an object to be interactive

This code tells Phaser to listen for clicks on an object. This replaces image.inputEnabled=true from Phaser CE.

this.image.setInteractive();

Phaser 3 is very new, and I’m still going through it. There seems to be several ways to click on an object, but this one appealed to me because I could use just one listener and then set up a switch and case statement for game actions based on what was clicked. (note that we no longer have to pass scope!)

this.input.on('gameobjectdown',this.onObjectClicked);

For the callback function

onObjectClicked(pointer,gameObject)
    {
    
    }

The pointer parameter refers to either the mouse or a touch object on mobile, the game object is the element clicked on.

Here are all the examples put together in one file.

class SceneMain extends Phaser.Scene {
    constructor() {
        super('SceneMain');
    }
    preload() {
        this.load.image("face", "images/face.png");
    }
    create() {

        this.face = this.add.image(game.config.width / 2, game.config.height / 2, "face");
        this.face.angle = 25;
        
        this.face.setInteractive();


        var textConfig={fontSize:'20px',color:'#ff0000',fontFamily: 'Arial'};

        this.title=this.add.text(game.config.width/2,game.config.height*.75,"HELLO PHASER!!!",textConfig);
        
        //setOrigin() replaces anchor.set()
        //sprites now default to orign 0.5 for both x and y
        this.title.setOrigin(0.5,0.5);

       //this will listen for a down event 
       //on every object that is set interactive
       this.input.on('gameobjectdown',this.onObjectClicked);
        
    }
    onObjectClicked(pointer,gameObject)
    {
        gameObject.angle+=10;
    }
    update() {}
}