v4.2.1 WebGL: sprite batch corruption when an angle tween runs on a GameObject whose position is also written every frame
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 40.3k
- Forks
- 7.2k
- PR merge metrics
- No merged PRs in 30d
Description
Version
- Phaser 4.2.1 ("Giedi"), WebGL renderer (
type: AUTO) - Observed on Linux, Chromium 149 (Playwright headless shell) — also reproduced through several independent scene setups in the same environment. Not yet verified in headed browsers.
Description
When a GameObject has a continuous angle tween running while its position is written imperatively every frame (in scene.update()), sprites in the scene render with corrupted geometry: wedge-shaped chunks missing, or the quad drawn as displaced slices — it looks like one vertex/triangle of the sprite's quad (or its UVs) is wrong for a frame.
Either behavior alone renders perfectly. The combination corrupts.
Reproduction matrix (all with 152×136 PNG textures)
| angle | position | result |
|---|---|---|
| static (0° or any fixed angle) | written every frame in update() |
✅ renders fine |
tweened (yoyo/repeat: -1) |
static | ✅ renders fine |
| tweened | written every frame | ❌ corrupted (wedges/slices) |
The corruption also reproduces when the moving object is a Container and the angle tween targets a child Image (container position written per frame, child angle tweened).
Minimal repro sketch
class Repro extends Phaser.Scene {
create() {
this.img = this.add.image(400, 300, 'anyTexture');
this.tweens.add({
targets: this.img,
angle: { from: -4, to: 4 },
duration: 1500,
yoyo: true,
repeat: -1,
});
}
update(time, delta) {
this.img.x += 20 * (delta / 1000); // any imperative per-frame movement
if (this.img.x > 900) this.img.x = 100;
}
}
With the tween removed (or replaced by a scale/y tween), rendering is clean. With movement removed, rendering is clean.
Workaround
Express "float/wobble" effects on moving objects with scale or child-y tweens instead of angle tweens, or keep rotation static while moving. That fully avoids the artifacts.
Happy to provide screenshots of the corrupted frames or a fuller runnable repro if useful.
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 minimal Repro scene, focusing on the tween setup and the imperative position write in scene.update(). Reproduce under Phaser 4.2.1 with the WebGL renderer and compare the angle-plus-movement case with the control cases in the reproduction matrix, including the Container/child Image variant. Done means moving sprites render without wedges, displaced slices, or other geometry corruption while the angle tween runs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, game-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100