Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
85 lines (61 sloc) 2.79 KB
layout title date excerpt categories
Phaser Template
2018-01-20 19:11:17 -0500
<p><a href="" target="_blank">Phaser Template</a> is a boilerplate for creating Phaser games. See <a href="" target="_blank">demo</a> below.</p> <iframe src="" frameBorder="0" width="100%" height="520px"></iframe> <p>It's <em>open-source</em> so it's <em>free to use</em> and <em>modify</em>. Feedback and contributions are welcome.</p> <p>What games are you planning to build using <a href="" target="_blank">Phaser Template</a>?</p>
phaser-template phaser template es6

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


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();


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!


<iframe src="" frameBorder="0" width="100%" height="520px"></iframe>