[Bug] html5 dom rotation problem

#1

I’m using openfl 2.1.7 for a simple arrow shoot html5 game. I build the game with “openfl build html5 -Ddom”. When I rotate the game scene sprite by “sceneSprite.rotation = 90”. All display objects goes to (0,0) with rotation = 0.

This only happens under Safari (both desktop and mobile). Chrome doesn’t has this issue.

I found a work around for this. After reset the scene’s rotation, force reset all displayObjects’ rotation.

Hope it helps guys met the similar issue.
Thanks.

... sceneSprite.rotation = 90; refreshDisplayObjects(stage); ... private static function refreshDisplayObjects(container:DisplayObjectContainer):Void { for(i in 0...container.numChildren) { var child = container.getChildAt(i); if (Std.is(child, DisplayObjectContainer)) { refreshDisplayObjects(cast child); } 
		child.rotation += 0.0001;

	}
}
1 Like
#2

Not sure if it is related, but I just created pull-request to fix different, but similar issue - https://github.com/openfl/openfl/pull/425

#3

Yeah, I think that was related.

On HTML5, the Graphics class has both a canvas and a position. This optimization keeps the canvas sizes down, if you make a 100 x 100 rectangle at (200, 200), it will only make a 100 x 100 pixel canvas instead of a 300 x 300 pixel canvas.

In the dirty optimization for DOM rendering, it was not tracking if the translation point changed. In the repository there should be an implementation for this now, in my testing it’s working correctly now, though I didn’t thoroughly test rotation :slight_smile: