Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pixelPerfectRender is not removing jittering in HTML5 #2075

Open
besserwisser opened this issue May 26, 2017 · 2 comments
Open

pixelPerfectRender is not removing jittering in HTML5 #2075

besserwisser opened this issue May 26, 2017 · 2 comments

Comments

@besserwisser
Copy link

besserwisser commented May 26, 2017

  • Haxe version: 3.4.2
  • Flixel version: 4.2.1
  • OpenFL version: 3.6.1
  • Lime version: 2.9.1
  • Affected targets: HTML5

Code snippet reproducing the issue:

package;

import flixel.util.FlxColor;
import flixel.FlxSprite;
import flixel.FlxState;

class PlayState extends FlxState
{

	public var testSprite: FlxSprite;

	override public function create():Void
	{
		super.create();
		this.bgColor = FlxColor.WHITE;
		this.camera.antialiasing = true;
		this.testSprite = new FlxSprite(null, null, "assets/images/pig.png");
		this.testSprite.x += this.testSprite.width / 2;
		this.testSprite.y += this.testSprite.height / 2;
		this.testSprite.pixelPerfectRender = false;
		add(this.testSprite);
	}

	override public function update(elapsed:Float):Void
	{
		super.update(elapsed);
		this.testSprite.angle += 0.1;
	}
}

Observed behavior:

Sprite is obviously jitting during rotation. This happens only on HTML5 target (tried Chrome, Chrome Canary, Safari, Safari for iOS, Chrome for Android, Flash). Compiling it to mac or ios does not produce this issue. Adjusting the properties pixelPerfectPosition and pixelPerfectRender do not have any effect on the jittering in HTML5. Also downgrading Flixel to 4.1, upgrading to Lime 5.0.3 or changing the code mentioned in this post had no effect. The FPS are constantly 60, it is not a performance issue. It looks more like that the image is being moved in the x/y position in a small way. Like a 1 pixel or so. But according to _player.x, _player.y, _player.width, _player.height, this is not happening.

Expected behavior:
Smooth rotation like when I am targeting ios or mac.

@Gama11
Copy link
Member

Gama11 commented May 26, 2017

What about Flash?

@besserwisser
Copy link
Author

besserwisser commented May 29, 2017

I just tried Flash and there is jittering with Flash. But if I set
this.testSprite.pixelPerfectRender = false;
the rotation is smooth in Flash! But the HTML5 Output ist still jittering. Maybe this function has no effect on HTML5?

I made a video to demonstrate the issue. I enabled antialiasing to make it more clear:
https://www.youtube.com/watch?v=E7iD3cTx1tQ

This is the link to the example from the video:
https://github.com/besserwisser/jitterexampleflixel

I just build it with
lime build html5

When building it as an "mac" application, it is very smooth!

@besserwisser besserwisser changed the title Sprites jitter when rotated in HTML5 pixelPerfectRender not removing jittering in HTML5 May 29, 2017
@besserwisser besserwisser changed the title pixelPerfectRender not removing jittering in HTML5 pixelPerfectRender is not removing jittering in HTML5 May 29, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants