Phaser Template

• Home • Edit

TLDR;: Phaser Template allows you to create Phaser games quickly.

2021-12-20: Migrated Phaser Template to TypeScript.

Motivation

Why did I create Phaser Template?

It was to scratch an itch because as a developer, I value:

  • the ease of building and releasing a game,
  • the maintainability and readability of the good code, and
  • the ability to learn something new while having fun.

I wanted to spend less time configuring and setting up the tools and more time creating the game. I built Phaser Template with that in mind.

Modern Syntax

Instead of the usual ES5 syntax:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
  preload: preload,
  create: create,
  update: update,
});

function preload() {
  // preload
}

function create() {
  // create
}

function update() {
  // update
}

You can use TypeScript with the latest syntax:

import Phaser from 'phaser';

class MyGame extends Phaser.Game {
  constructor() {
    super(800, 600, Phaser.AUTO, '');
  }

  preload() {
    // preload
  }

  create() {
    // create
  }

  update() {
    // update
  }
}

const game = new MyGame();

Acknowledgements

This template is built with Vite and uses a GitHub Action to deploy to GitHub Pages.

I’d love to hear how you plan to use Phaser Template. Contributions are welcome!

Demo