How to Run Phaser HTML5 Game Engine Without a Web Server

The Phaser engine forces you to load your app in a web server because it uses Cross-Origin-Resource-Sharing to load assets. This is a problem if you want to run your HTML5 game locally or wrap it up and run it in a native PhoneGap App.

The solution for me was to simply encode the sprites/audio I was using in base64 and include that in my js. I only had to change a few lines in the Phaser.Loader module:

file.data.src = file.url;
// file.data.crossOrigin = this.crossOrigin;
// file.data.src = this.baseURL + file.url;

Then instead of passing in the URL to the file, pass in the data itself like so:

game.load.spritesheet(
  'birdie',
  'data:image/png;base64,' +
    'iVBORw0KGgoAAAANSUhEUgAAAGAAAAATCAYAAABvLghXAAABZElEQVR42u2YUQrCMAyGdwjB13kP' +
    'z7GrCJ5qexC8mw8VnZOsa5K/TXAbthDEKV/+Jk3Wtmn0ERjzGpWvAU99tzCDs8qX4BRyvJ5nnxRM' +
    'R4aTpNiU8L3xpxhZ+Kp4OokIHkqTm/q+B753fFihXKll9j1Y/B74NEZxokv4LKDrL1+TJqk4E1em' +
    'NIkSPuIj/j2X753sZB+jwZcS8Hr+CEsjTsziET4NajukWe3HNqa/EVe+lAAOHjmBVnmO+BSfC/gi' +
    'AcPm9M8rwJIApszU6or59L8oH1lArUE/ukDjdyjA9y8xrYdOAkpbHMK3tFBUP3oeUPhyGRe+ZCA+' +
    'MoFSvpZgabeH6neKz+iE2zkgvQ/Y55omUcrPTLC7/uhwhh2xDdnN5mfup2E+x0o9t+h3js/Sibaf' +
    'LrjrCLknyj/jzy+bnC+xVuML/d7MVw519Zp4x/xx3G+HQD8r/4f8Gpx1+W8wtcr35z8BKzsYemDt' +
    'gtgAAAAASUVORK5CYII=',
  24,
  19
);

You can use the same trick to load audio and other assets if you need too. Just read over that switch to see the ways Phaser loads each filetype, and replace it with the data. Obviously this is a quick fix, but it did everything I needed.

I used this tool to encode my sprites into base64.