s4m_ur4i

WebGL mode flickering, is unsmoothed. Canvas crisp&clear.

Recommended Posts

Sorry for the long post, but I have to be sure that you got all the informations:
Was testing a lot to be sure that there is no mistake on my side.

So I took some time and tried different cases WebGL / Canvas
including all that smoothing = false stuff and also different approaches:

game.stage.smoothed = false;
PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;
Phaser.Canvas.setImageRenderingCrisp(game.canvas);
game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;  
game.scale.setUserScale(1,1);
game.renderer.renderSession.roundPixels = true;  
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas)  

The CSS image-rendering works for Canvas, even for 4k dispalys and stuff. But webGL is really blurry (it gets better with some configuration but not even close to canvas quality).
So I tested a bit more. You can reproduce it any time, just by setting up a blank game and animate one spritesheet which is: standing still and waving just one part (a hand or s.t.).

Just make a Person who shakes a hand and does not move anything else.
In Canvas: the sprite stands perfectly still and shaking the hand
in WebGL: the sprite flickers - in fact the graphic itself isn't able to do that since it is pixel perfect aligned. But WebGL mode seems like to render it that way.
I attached two files: Notice the flickering of the dwarf graphic in webGL (webGLbug.gif - that one with the purple minions in it)?

First gif attached is canvas,
second is webGL (with purple minions in it)


I do not know if this is only related to 2.7.x or even before. I am familiar with browser support of image-rendering and stuff. But it is already there.
I am testing on a Mac OSX 10.11, Win 10, via Chrome: Chromium 51, V8; NwJS 15.03, NwJS 13.0;

tested with phaser 2.7.x, but also appearing in older versions, oldest I tested; 2.4.8

So the thing is, you can optimize the webGL output with some code from above (some not working; tested it one after another).
But WebGL does not even get close to the sharpness of Canvas. This applies for 1920x1080 resolution, 2100 x 1280, 2560x1440 and 1024x 768 on mac / pc, m3 / i7, blank game, one animated spritesheet - reproducable.

It's nothing that you see on first sight, it's more like... - something is wrong, isn't it? - and when you take a closer look, you see this.

canvasclear.gif

webGLbug.gif

Share this post


Link to post
Share on other sites

no. I think it relies deeper, since this is reproduceable. don't know if it's pixiJS or phaser related, maybe both.  But it's not an issue of code. It appears and is reproduceable on every phaser installation. no fix found. now one responded yet.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.