PixelSnapping problem in HTML5

I have rotating images on stage, made from Bitmap, centered and put inside Sprites.
When instancing Bitmaps I set PixelSnapping as AUTO.
When targeting Flash the rotation is very smooth, as expected, while in HTML5 the rotation is crappy, and the images trembles a bit.
What’s the problem?

PixelSnapping is ignored on HTML5, have you tried setting the smoothing to true?

Yes, smoothing is active. If snapping is disabled in HTML5 rotation will always be trembling, I think.
I am testing the exact same project made with Pixi and OpenFl, and targeting HTML5 with the Pixi version the rotation is perfect: how does Pixi manage to rotate images without this problem?

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:

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