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:
- Images
- Sounds
- Text
- Bitmap Text (with customizeable fonts)
- Rectangles
- HTML Elements (scrollable)
This reference covers the following functionalities:
- Sprite sizes
- Anchor points
- 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")
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")
create()
soundSprite.play()
Text
Add highlightable text to your Phaser 3 scene.Add Text
create()
this.add.text(x, y, YOUR_TEXT, textConfigObj);
create()
const textSprite = this.add.text(0, 0, 'Hello World', { fontFamily: 'Georgia', fontSize: "22px", fill: "#000000" });
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)
create()
const bitmapTextSprite = scene.add.bitmapText(0, 0, "montserratFont", "Hello World", 22)
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)
create()
this.add.rectangle(0, 0, 200, 100, 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")
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
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()
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 })
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 })