Myth about offline asset loading

Phaser 2 / CE
1

It has been always mentioned that a Phaser game cannot be loaded properly offline because browsers restricts file protocol to quite an extend.

However I discovered that it is still possible to load assets offline under the file protocol, or at least on Windows which I tried on, with just some simple tweaks, even with Chrome. Here are the methods I found, tested on IE 9 - 11, Edge, Firefox, Chrome:

  • Use relative paths eg: ./assets/sprite.png
  • For Chrome: use Canvas renderer instead of WebGL when location.protocol === "file:"
  • To detect if is Chrome, use Phaser.Device.whenReady event to create the game, here is the code snippet:
Game startup snippet 
Phaser.Device.whenReady((device: Phaser.Device) =>
        {
            const isOffline = location.protocol === "file:"

            const config: Phaser.IGameConfig =
            {
                renderer: device.ie || isOffline && device.chrome ? Phaser.CANVAS : Phaser.AUTO, // IE cannot play videos in WebGL. Chrome will emit CORS errors if using WebGL offline.
                parent: 'content',
                width: 800,
                height: 600,
                alignH: true,
                alignV: true,
                antialias: true,
                resolution: 1,
                maxPointers: 1,
                backgroundColor: '#FFFFFF',
                state: Boot
            }

            const game = new Phaser.Game(config)
        })

So now it still boils down to some points:

  • Why it this way works for most browsers? or is it only possible on Windows?
  • Why Chrome works when use Canvas but not WebGL?

If you are curious you can also check out my boilerplate for Phaser CE which works with these along with other stuffs like TypeScript, Babel and Parcel Bundler: https://github.com/Cerlancism/Phaser-CE-TypeScript-ParcelJS

1 Like
2

Very interesting thx for the info