HaxeFlixel / HaxeFlixel/flixel
pixelPerfectRender is not removing jittering in HTML5
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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