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.url;
// = this.crossOrigin;
// = 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,'+
'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.

6 thoughts on “How to Run Phaser HTML5 Game Engine Without a Web Server

  1. angel Reply

    In this case you can’t use window.localStorage in phaser.
    but otherwise it is great way to start without server. Thanks

    • Kevin Post authorReply

      Why do you say that? I’m using window.localStorage to save highscores for my current game with no problems.

      • angel Reply

        My bad, I found the problem- IE 9,10,11 doesn’t support localStorage for local files (in offline mode), but Firefox and Chrome support it.

  2. Berndt Reply

    I can not get this to work with audio. Woud you please be so kind and post your changes for a .wav file?

    • Angel Reply

      Berndt, I assume you use IE10. Just convert wav to mp3. Other solution is to use Firefox, Chrome, etc

  3. Shreedhara Reply

    Well I assume it would definitely hamper the game performance. Given the case people normally use the dirty IE browser.

Leave a Reply

Your email address will not be published. Required fields are marked *