images with preFX jitter

[Antriel]

Demo: https://phaser.io/sandbox/oWd6hjDQ
See the every second white square. The discriminating factor seems to be camera having roundPixels: false, it does happen regardless of camera zoom or pixelArt mode. Happens on any Phaser version since preFX was added.

My best guess is that some rounding happens in a different place across the rendering pipeline for images with preFX, than it does for standard ones, which results in them getting out of sync as camera scrolls around.

[greptile-apps]

For internal use only

To resolve the jitter issue with images using preFX when roundPixels is set to false, ensure consistent rounding across the rendering pipeline. Specifically, update the Camera.preRender method to use Math.floor instead of Math.round for matrix positions. This change aligns with the renderer's behavior and reduces noticeable jitters.

Implementation Steps:

1. Open /src/cameras/2d/Camera.js.
2. Locate the preRender method.
3. Replace Math.round with Math.floor for matrix position calculations.

// Before
this.matrix.applyITRS(Math.round(this.scrollX), Math.round(this.scrollY), this.rotation, this.zoomX, this.zoomY);

// After
this.matrix.applyITRS(Math.floor(this.scrollX), Math.floor(this.scrollY), this.rotation, this.zoomX, this.zoomY);

This ensures that the rounding behavior is consistent, reducing the jitter effect for images with preFX.

References

/src/fx/Pixelate.js
/.github/ISSUE_TEMPLATE
/changelog/3.60/FX.md
/changelog/3.1.1
/.github/ISSUE_TEMPLATE/bug_report.md
/changelog/3.5
/changelog/3.5/CHANGELOG-v3.5.md
/changelog/3.13/CHANGELOG-v3.13.md
/changelog/3.1.1/CHANGELOG-v3.1.1.md
/types/phaser.d.ts
/.github
/changelog/3.54
/changelog/3.60/Spector.md
/changelog/3.60/Camera.md
/src/fx
/.github/CONTRIBUTING.md
/changelog/3.15/CHANGELOG-v3.15.md
/changelog/3.13
/src/fx/Blur.js
/changelog/3.54/CHANGELOG-v3.54.md
/changelog/3.60/CanvasRenderer.md
/changelog/3.60/NineSliceGameObject.md
/changelog/3.80/CHANGELOG-v3.80.md
/src/gameobjects/image
/src/cameras/2d/events/SHAKE_START_EVENT.js

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[Antriel]

This improved it a lot, but there's still 1 pixel offset happening, seems like it depends on relative position to camera. E.g. camera scroll (midpoint or something) being above vs below the objects will shift them 1 px in y axis.
I would say it's issue of flooring negative numbers, but the code is using rounding, so not sure.

[es-lynn]

Tested on latest master branch build and can confirm it's working