Phaser 1.2 / IE9

[Cameron Foale]

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. 

[george]

Really nice idea! I will give your solution a try as the polyfill was also for me really slow. I think the mentioned polyfill is more conform to the standard implementation than it's intended to be fast.

[george]

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. 

https://github.com/photonstorm/phaser/commit/24f2e2a46de77cbd78157e3adc7c54f537cd713c#commitcomment-6140034

 

2. Provide a polyfill for ArrayBuffer

https://gist.github.com/Benvie/5020656

 

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

 

Performance?

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

[rich]

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.