How does Pixi.js perform in Android stock browser?

[aportale]

Hi,

 

no doubt that Pixi.js performs beautifully on my iPad 2 in Safari (e.g. http://www.goodboydigital.com/runpixierun/ ) . Now I would like to know how it does rock on Android, and since my Nexus 7 broke after falling from 20 cm on conrete, I need to ask here. Sorry

 

So, did anyone test http://www.goodboydigital.com/runpixierun/ on Andorids stock browser (not Chrome)? I assume that it would use the Canvas renderer and somehow I have slight doubts that canvas drawImage is as optimized as on iOS.

 

Thanks!

[mwatt]

Hello there,

 

I don't own an Android device either, but I got tired of seeing your lonely post go unanswered.

 

I did a little searching on the Web and found some documented information that supports what I have read here and there... the performance of graphics and canvas graphics on the stock Android browser is ABYSMAL.  Chrome is a huge improvement, but Apple Safari is still faster yet.

 

Here is one link:

http://www.codefessions.com/2012/03/what-is-fastest-mobile-browser-html5.html

 

I might have provided more but I am too lame to be able to figure out how to make pasting work in this forum software.

 

Addendum to the pasting issue:  I finally figured out that pasting is simply broken in I.E.  - even version 11.

[1-800-STAR-WARS]

I used pixi on a project at work and we've done testing on a tonne of devices.

 

Android stock browser's canvas implementation is buggy as hell and we recommend that our customers don't use it and instead use Chrome or Firefox on their devices.

 

Aside from the performance being terrible (on a modern device, eg on Nexus 4 any reasonably complex game will render at < 20 fps, chrome on the same device is a smooth 60), the implementation of clearRect in the browser is fundamentally broken and will frequently start pasting a cached image of the screen instead of clearing, which causes ghost images, weird trails etc.

 

You can fix this by resizing the canvas on each tick (resizing the canvas is an old way of clearing from the early days of its implementation) but this can cut the frame rate by a lot too.

 

Worst of all, swiping/scrolling the page (even a tiny amount) and sometimes even touching the screen breaks the requestAnimationFrame operation causing the renderer to freeze until the screen is touched again

 

So the problems aren't with pixi - the browser is just broken in the first place.

 

You can detect the stock browser using the user agent string (though using that isn't 100% reliable) and do horrible hacks to get it to work slightly better using this snippet because it uses a REALLY outdated version of webkit that all other browsers have long since surpassed:

if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {    // resize canvas, hide particle effects, etc}

[aportale]

Thanks for the input! Although I assumed that canvas on Android's WebView component (which is used in the stock browser) had it s issues here and there I hoped that the subset of commands that Pixi.js uses would at least be implemented in a decent way. But apparently that is not the case. Hacks on top of hacks are needed and still do not give a satisfying solution. No surprise that Androids stock browser is called the IE6 of mobile

 

So, who wants to create fancy standalone HTML apps cannot use PhoneGap or friends but has to resort to things like CocoonJS.

 

Anyways, the good news here is that the WebView component will be Chrome based from Android 4.4 on. So, in just a few Years that situation should be good.

[flaboy]

 Chrome based from Android 4.4 on. So, in just a few Years that situation should be good.

 

And it's not good. Few years in mobile industry means generation of new devices... 

I'm just destroyed by the fact my pixi game works great in Chrome and it's <20fps as Cordova app. Why why why....  Maybe something changed, please update me if there is a plugin or simple implementation of better webview. Cheers

[sombriks]

It's 2016 and most android devices have 5.0

indeed things are changing.