Phaser/WebGL flickering on Chrome for Android v53

[Kanthi]

I guess this issue is with specific set of hardware. In our case we are facing this issue with Mali 400 series GPU's .

Can we expect any fix in Phaser? As there is no issue when testing a sample application using pixi.js ( WEBGL )

thanks,

Kanthi.

[AGulev]

the same issue with:

• Samsung Galaxy S3 mini (GT-I8190N, Android 4.1.2) 
• Huawei P8 lite (ALE-L02)

Maybe somebody know some workaround? (except change render mode to CANVAS) 

[Shtoltz]

I have same issue.
A quick workaround worked in my case:

Detect Mali-400

function MaliDetect() {
    var canv = document.createElement('canvas');
    canv.setAttribute("width", "1");
    canv.setAttribute("height", "1");
    document.body.appendChild(canv);

    var canvas = document.getElementsByTagName('canvas');
    var gl = canvas[0].getContext('webgl', { stencil: true });
    canvas[0].parentNode.removeChild(canvas[0]);

    if (!gl)
        return false;

    var dbgRenderInfo = gl.getExtension("WEBGL_debug_renderer_info");
    var renderer;
    if (dbgRenderInfo != null)
        renderer = gl.getParameter(dbgRenderInfo.UNMASKED_RENDERER_WEBGL);
    else return false;

    var n = renderer.search("Mali-400");
    if (n != -1)
        return true;
    else
        return false;
}

For more information see https://github.com/AnalyticalGraphicsInc/webglreport

Create game:

if (MaliDetect()) {
            this.game = new Phaser.Game(480, 720, Phaser.CANVAS, '', { preload: this.preload, create: this.create, update: this.update, render: this.render });
        } else {
            this.game = new Phaser.Game(480, 720, Phaser.AUTO, '', { preload: this.preload, create: this.create, update: this.update, render: this.render });
        }

 

I am new to Javascript. Perhaps you can make a more elegant solution.

[Jc Mulit]

registered just to help people how i solved my problem. the flickering seems to be caused by webGL. if your rendering is set to auto. chances are it picked up webGL. just change it to canvas "Phaser.CANVAS" and problem is solved. it worked for me

[Bikas]

Same issue with Samsung Galaxy S3, did work well with Pixi though.

[LaczkoUr]

Stumbled into this problem with a Lenovo A1000 (Mali400 gpu)

[Tom Atom]

Hi, testers found some of our games blinking on some devices in Chrome and all of them are blinking in Android's native webview.

For now it seems, that setting "preservedrawingbuffer" parameter to true solves it. When you are creating game you can do this instead of commented line (code taken from TypeScript game class derived from Phaser.Game:

            // init game
            // super(800, 600, Phaser.AUTO, "content", null /* , transparent, antialias, physicsConfig */);

            super({
                width: 800,
                height: 600,
                renderer: Phaser.AUTO,
                parent: "content",

                transparent: false,
                antialias: true,
                physicsConfig: null,

                preserveDrawingBuffer: true
            });

@LaczkoUr @Bikas can you, please, confirm, whether it helped?

 

[LaczkoUr]

4 minutes ago, Tom Atom said:

Hi, testers found some of our games blinking on some devices in Chrome and all of them are blinking in Android's native webview.

For now it seems, that setting "preservedrawingbuffer" parameter to true solves it. When you are creating game you can do this instead of commented line (code taken from TypeScript game class derived from Phaser.Game:

            // init game
            // super(800, 600, Phaser.AUTO, "content", null /* , transparent, antialias, physicsConfig */);

            super({
                width: 800,
                height: 600,
                renderer: Phaser.AUTO,
                parent: "content",

                transparent: false,
                antialias: true,
                physicsConfig: null,

                preserveDrawingBuffer: true
            });

@LaczkoUr @Bikas can you, please, confirm, whether it helped?

 

Setting preserveDrawing to true buffer works, and the game no longer flickers on the tested phone. Thanks!

[LaczkoUr]

although this drops the fps significantly. Switching to canvas mode seems better at the moment

[playtwice]

On 3/15/2017 at 4:37 PM, Tom Atom said:

Hi, testers found some of our games blinking on some devices in Chrome and all of them are blinking in Android's native webview.

For now it seems, that setting "preservedrawingbuffer" parameter to true solves it. When you are creating game you can do this instead of commented line (code taken from TypeScript game class derived from Phaser.Game:

            // init game
            // super(800, 600, Phaser.AUTO, "content", null /* , transparent, antialias, physicsConfig */);

            super({
                width: 800,
                height: 600,
                renderer: Phaser.AUTO,
                parent: "content",

                transparent: false,
                antialias: true,
                physicsConfig: null,

                preserveDrawingBuffer: true
            });

@LaczkoUr @Bikas can you, please, confirm, whether it helped?

 

4

I get much better fps in a game I'm currently working on from this than switching to canvas mode, thanks a lot for finding this fix!

[ivan.popelyshev]

We had something like that in PIXI, I think "renderer.gl.flush()" after each frame helps.

Its also possible that if you use preserveDrawingBuffer, you HAVE TO ENABLE ANTIALIAS. I saw very strange things on ipad4.

[My Evil Pony]

Have same issues on my Samsung G3. This problem is solved by added 

preserveDrawingBuffer: true

in game configs. But there realy some issues with performance.