Phaser 3 Reference
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.
This reference covers the following components:
- Bitmap Text (with customizeable fonts)
- HTML Elements (scrollable)
This reference covers the following functionalities:
- Sprite sizes
- Anchor points
The following are code samples on how to use common Phaser 3 components.
ImagesAdd an image (e.g. jpeg, jpg, png) to your Phaser 3 scene and adjust image size.
In fact, this code works for just about any sprite.
SoundsAdd short sound effect (e.g. mp3, wav) to your Phaser 3 scene and play it during the game.
TextAdd highlightable text to your Phaser 3 scene.
Bitmap TextAdd Bitmap text to your Phaser 3 scene which uses your own font.
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.
RectanglesDraw a rectangle into your Phaser scene, perhaps for a button or a frame.
HTML ElementsAdd 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.
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.
Here’s a reference for some of the common functionalities we want in our game components.
Anchor PointsAnchor 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.
Sprite SizesSprites, 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.
InteractivityAdd buttons and interactions to your game, to trigger functions when clicked.
The following works for imageSprite, textSprite, rectangleSprite, and so on.
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.
If you want the cursor to turn into a hand when clicking the button, then change the useHandCursor this property.