HaxeFlixel / HaxeFlixel/flixel

pixelPerfectRender is not removing jittering in HTML5

Open
#2,075 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Haxe
Stars
2.2k
Forks
522
Avg merge
34m
Merged PRs (30d)
1

Description

  • 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied PlayState reproduction and run it on the HTML5 target, comparing it with the listed macOS, iOS, and Flash targets. Trace how pixelPerfectPosition and pixelPerfectRender affect HTML5 sprite rotation, then verify that the sprite rotates smoothly without visible jitter while the existing targets remain unaffected.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
game-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.