Jump to content

Phaser 1.2 / IE9

Cameron Foale

Recommended Posts

Hi All,


We had a game which unfortunately we left making sure it worked in IE9 until too late in the project.


Unfortunately, P2 physics in Phaser 1.2 doesn't work in IE9, as it uses JS TypedArrays.


Close to deadline, migrating to Phaser 2 was out of the question, and the TypedArrays polyfills/shims available have *terrible* performance. In particular, switching to https://github.com/inexorabletash/polyfill yielded < 1 FPS.


So here's a micro wrapper for Float32Array and Int16Array that covers the use cases in PIXI and P2.js:

(function(global, undefined) {    /**     * Low-budget Float32Array knock-off, suitable for use with P2.js     */    if(typeof global.Float32Array !== "function")     {        var CheapArray = function(type)        {            var proto = new Array();            global[type] = function(arg) {                if(typeof(arg) === "number")                {                    Array.call(this, arg);                    this.length = arg;                    for (var i = 0; i < this.length; i++) {                        this[i] = 0;                    };                } else {                    Array.call(this, arg.length);                    this.length = arg.length;                    for (var i = 0; i < this.length; i++) {                        this[i] = arg[i];                    };                }            }            global[type].prototype = proto;            global[type].constructor = global[type];        }        CheapArray('Float32Array');        CheapArray('Int16Array');    }    /**     * Also fix for the absent console in IE9     */    if(!window.console) {        window.console={};        window.console.log = window.console.assert = function(){};    }    })(this);

The biggest quirk is that Array.length is somehow special in IE9, so simply setting the right prototype isn't enough.


Thankfully, in P2 and PIXI all TypedArrays are known, fixed length at init time, so this implementation just caches the length at creation time. 

Link to comment
Share on other sites

Just for completeness. I do not know if this apply to 1.2 but it's definitely worth to know for Phaser 2.x

P2 supports IE9 virtually out of the box :) There is only one bug that prevents it from working. I fixed it here:

https://github.com/schteppe/p2.js/issues/82. Than only Phaser is to blame for IE9 errors.

To fix phaser:
1. There is an error with xml, which I fixed by removing a code block that is only used for IE9 and empty xml values. 
2. Provide a polyfill for ArrayBuffer
3. Provide a polyfill for Uint32Array
I used your code and modified it to polyfill only Uint32Array & Int16Array as I do not want Float32Array to be polyfilled. I am not sure if Int16Array is still required- I couldn't something related in Phaser core.
See here for the code I use: https://gist.github.com/georgiee/11368709
Nearly no difference between IE10 and IE9. Awesomeness! :) (Compared to 1 FPS in IE9 with the big polyfill from inexorabletash - I just deleted it with joy :)

Regards George

Link to comment
Share on other sites

Just to say for anyone else reading this:


Phaser 2.0.4 includes the (modified) polyfill for TypedArrays and P2. It also removed the erroring xml parser block.


The ArrayBuffer polyfill for IE9 is now bundled in the resources folder, as it's quite hefty to include in the core - especially as such a small % of browsers need it. But it's there :)


All in all, this should hopefully nail IE9 and P2 use directly in 2.0.4 and above.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...