PixelSnapping problem in HTML5

Oh, could you try -Ddom and -Dwebgl, I’m curious if it looks different in DOM or WebGL rendering than the default canvas renderer

Where do I specify these parameters?

In the command line: openfl test html5 -Ddom and openfl test html5 -Dwebgl.

Alternatively you can add <haxedef name="dom" /> in your project.xml file before including openfl if you want it to be permanent.

You can specify them when compiling the project, ie.
lime build html5 -Dwebgl

If you’re using FlashDevelop then just edit the “html5” string in the target’s dropdown menu. ie.
“html5” -> “html5 -Dwebgl”

What do you mean “before including openfl”?

Where do I edit the dropdown menu?

In your project.xml you must have a <haxelib name="openfl" /> (or a lib that includes openfl), you have to put the haxedef before in order for it to be taken into account.

You can edit the text on the menu itself, like so:

OK!
Using DOM the trembling effect is still there, the stage is not resized to window and performances in Chrome are 2x (!!!).
Using webgl in Chrome I can’t see anything, it is not supported.

I recreated the same test in Pixi and Flambe too.
In both Pixi and Flambe there is an anchorXY method and I centered the image:

  • in Pixi the rotation is perfect
  • in Flambe the rotation is trembling

So do you think that manually setting rotation center will always lead to trembling animations in HTML5? Or there is some trick to fix it? I could create spritesheets for rotations, but I think I can’t always rely on them.

Did you solved you PixelSnapping problem? Or switched to pixi?

I am still on Openfl, but I didn’t test rotation anymore because noone gave me an explanation.
I should try again.
Did you try it?

I tried, but not rotation. I have parallax layers and on openfl rendering they looks bad because of pixel snapping. On pixi render they looks good, but i want one codebase for mobile version and html5 one. That issue is party stopper :frowning:

Is -Dwebgl any different?

As I said a few months ago, I tested webgl in Chrome but it was not supported. I don’t know if it is now.

-Dwebgl isn’t different for me

Hi, guys!
I solved this by using renderSession.roundPixels = false;
at GLRenderer.hx

1 Like

Nice… so much more smoother results!
…but why is this on by default and not a configurable option…?

Wow! Thanks for solution!

Exact same solution in CanvasRenderer! But… why TRUE by default?!