JoeKryog

Phaser/WebGL flickering on Chrome for Android v53

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.