Phaser Template

Jan 21, 2018HomeEdit


TLDR; Phaser Template is a boilerplate for getting Phaser games up and running.

Motivation

Why did I create Phaser Template?

It was to scratch a personal itch. As a game developer, I value the following:

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

This meant I wanted to spend less time configuring and setting up the tools and more time creating the game. I built Phaser Template to solve that problem.

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 ES6 syntax instead:

import { Game, AUTO } from 'phaser';

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

  preload() {
    // preload
  }

  create() {
    // create
  }

  update() {
    // update
  }
}

const game = new MyGame();

Acknowledgements

The template is built on top of web-app-template, which is a stripped down version of create-react-app. (This is where the nice development/production configuration comes from.) In terms of deploying, it’s using gitploy to deploy to GitHub Pages.

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

Demo