Phaser 3 Reference

May 5, 2020

Here’s a reference for creating components in your game using Phaser 3 using purely functional approach (no objects).

If you want to learn how to use Phaser 3, visit Phaser 3 tutorial.

Contents

This reference covers the following components:

1. Images
2. Sounds
3. Text
4. Bitmap Text (with customizeable fonts)
5. Rectangles
6. HTML Elements (scrollable)

This reference covers the following functionalities:

1. Sprite sizes
2. Anchor points
3. Interactivity

Components

The following are code samples on how to use common Phaser 3 components.

Images

Add an image (e.g. jpeg, jpg, png) to your Phaser 3 scene and adjust image size.

Add image

preload()

this.load.image("IMAGE_KEY", "images/IMAGE_FILE.png")

create()

const imageSprite = this.add.image(x, y, "IMAGE_KEY")

Adjust image size
In fact, this code works for just about any sprite.

create()

imageSprite.displayHeight = height
imageSprite.displayWidth = width

Sounds

Add short sound effect (e.g. mp3, wav) to your Phaser 3 scene and play it during the game.

Add sound

preload()

this.load.audio("SOUND_KEY", ["sounds/SOUND_FILE.wav"])

create()

const soundSprite = this.sound.add("SOUND_KEY")

Play sound

create()

soundSprite.play()

Text

Add highlightable text to your Phaser 3 scene.

Add Text

create()

this.add.text(x, y, YOUR_TEXT, textConfigObj);

Example

create()

const textSprite = this.add.text(0, 0, 'Hello World', { fontFamily: 'Georgia', fontSize: "22px", fill: "#000000" });

Center text

create()

textSprite.setOrigin(0.5, 0.5)

Bitmap Text

Add Bitmap text to your Phaser 3 scene which uses your own font.

Prerequisite
1. Download a .ttf of your font
2. Go to Littera (Flash must be enabled), upload the .ttf file and obtain a font.fnt and font.bmp version of your font.

Add font

preload()

this.load.bitmapFont("FONT_KEY", "fonts/FONT_NAME.png", "fonts/FONT_NAME.fnt")

create()

const bitmapTextSprite = scene.add.bitmapText(x, y, "FONT_KEY", message, font_size)

Example

create()

const bitmapTextSprite = scene.add.bitmapText(0, 0, "montserratFont", "Hello World", 22)

Center Bitmap text

create()

bitmapTextSprite.setOrigin(0.5, 0.5)

Rectangles

Draw a rectangle into your Phaser scene, perhaps for a button or a frame.

Add rectangle

create()

this.add.rectangle(x, y, width, height, color)

Example

create()

this.add.rectangle(0, 0, 200, 100, 0xff0000)

Take careful note of how to format colors in hexadecimal 0xff0000.

HTML Elements

Add an HTML page (e.g instructions panel, or menu) into your Phaser Game. This loads the element on top of the Phaser canvas.

Add HTML element
Add this code to your main game config.

main.js

var config = {
  ...,
  /* Enable dom creation within Phaser game */
  dom: {
    createContainer: true
  }
}

preload()

this.load.html("HTML_KEY", "htmls/HTML_FILE.html")

create()

const instructionSprite = scene.add.dom(x, y).createFromCache("HTML_KEY")

Make HTML element scrollable
Perhaps your HTML element is a large page, and you want to make it fit into a small rectangle. In that case, you need format the element into a scrollable little element.

HTML_FILE.html

<style>
  .wrapper {
    overflow: auto;
  }
</style>

<div class="wrapper">
  <!-- YOUR HTML CONTENT GOES HERE -->
</div>

Functionalities

Here’s a reference for some of the common functionalities we want in our game components.

Anchor Points

Anchor point is the point where the location of your sprite is based on.

Adjust Anchor Point
The following works for imageSprite, textSprite, rectangleSprite, and so on. This causes the anchor point of your sprite to shift.

create()

sprite.setOrigin(0.5, 0.5)

Sprite Sizes

Sprites, especially images, may not take up the correct size. The following code resizes the sprite to desired size.

Change Sprite Size.
The following works for imageSprite, textSprite, rectangleSprite, and so on. This causes the sprite to have a different display size.

create()

imageSprite.displayHeight = height // in pixels
imageSprite.displayWidth = width // in pixels

Example

create()

imageSprite.displayHeight = 500
imageSprite.displayWidth = 200

Interactivity

Add buttons and interactions to your game, to trigger functions when clicked.

Adding Interactivity
The following works for imageSprite, textSprite, rectangleSprite, and so on.

create()

sprite.setInteractive()

Follow Object/Image Shape
If you want the click not to follow a rectangular bounding-box, and instead follow the shape of the object, then try altering the pixelPerfect property.

create()

sprite.setInteractive({ pixelPerfect: true })

Hand Cursor
If you want the cursor to turn into a hand when clicking the button, then change the useHandCursor this property.

create()

sprite.setInteractive({ useHandCursor: true })

---