Phaser 3 Parts Template

Ultimate Game Parts Template for Phaser 3

version 3.1.4

You can find full set up instructions for this template here.

This version of the ultimate game parts template was built upon the phaser 3 project template by Richard Davey

The following comments are taken from the documentation from the phaser3 project template


Node.js is required to install dependencies and run scripts via npm.

Available Commands

Command Description
npm install Install project dependencies
npm start Build project and open web server running project
npm run build Builds code bundle with production settings (minification, uglification, etc..)

Writing Code

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm start.

After starting the development server with npm start, you can edit any files in the src folder and webpack will automatically recompile and reload your server (available at http://localhost:8080 by default).

Deploying Code

After you run the npm run build command, your code will be built into a single bundle located at dist/bundle.min.js along with any other assets you project depended.

If you put the contents of the dist folder in a publicly-accessible location (say something like, you should be able to open and play your game. “# phaser-ultimate-template”

Setting up a scene

Most of the common functions are found inside the baseScene class. You make scenes that extend this class to have access to those functions

export class SceneMain extends BaseScene {
    constructor() {
    preload() {}
    create() {

        //set up the base scene

      update(){ }


Setting up an align grid

This project works by placing game objects on a grid that scales with a dynamically sized canvas.

You can do this inside any scene that extends baseScene

create() {

        //set up the base scene

        //set the grid for the scene
        this.makeAlignGrid(11, 11);

        //show numbers for layout and debugging 


Adding Images

Use placeImage to add an image on the grid and scale it.





Adding Text

You can place text on the grid by using placeText.




this.placeText(“Game Title”,27,”TITLE_TEXT”);

Adding Reusable Text Styles


this.textStyles.regSimple(key, color, fontSize, font);


this.textStyles.regSimple(“SCORE”, “#ffff00”, TextStyles.SIZE_LARGE, “Impact”);