Images moved by Arcade physics shake as they move

[mwiedmann]

VersionPhaser v3.22.0 (WebGL | Web Audio)

• Operating system: Windows 10 Home 1903
• Browser: Not browser specific, verified on Firefox and Chrome

Description

Images/sprites moved by Arcade physics (with setVelocity for instance) "shake" as they move. This is very obvious when using a camera follow. Even when not following with a camera though, the image still shakes even though it is a little harder to see because its moving across the screen.

I've seen similar issues reported in the past but this is still definitely an issue. I've tried all of the various anti-alias, and pixel rounding settings with no difference in the results.

I've put together an all in one html file with embedded images and code to demo the issue. You can press "L" to turn Lerping on/off, and press "F" to turn the camera follow on/off. The ball is very shakey as it moves across the field.

Example Test Code

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

Press "L" to turn Lerp on/off, press "F" to turn camera follow on/off

With Lerp on, the ball shakes a lot but the background is smooth. With Lerp off, the background shakes a lot but the ball is smooth.

With camera follow off, the ball still shakes but isn't as easy to see.

<script> const ballData= "data:image/png;base64,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"

const fieldData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAA3cSURBVHhe7do9alxnGIbhmaDChSAuVLhQkZXkZydJrUU43oNUJxsJJJCFOODCAZcqVBgmE/QSiDTqPt8wnOuCw/NOM+3hZma/uz0cdgAAAIGvZgEAAL44AQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAACZ/e72cJh7icPN8TsBOFv7u93Px3n7+GmJd8d3w7/fCcAZOr4XlvaCX0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAeOp+dpWvZwFAgADwzKfZVV7PAoAAAQAAOgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEgKfuZ1d5PQsAAgSAZz7NriJAAPiPAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBICn7mdXuZwFAAECwDOfZle5mgUAAQIAAHQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECABP3c+ucjkLAAIEgP873Ow+zbnK1SwACBAAAKAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAA45WF2if3d7nJOADZOgABwysfZVa5mAdg4AQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECACnPMyucjkLwMYJEABO+Ti7ytUsABsnQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAeCUh9lVXs0CsHECBIBTPs6u8mYWgI0TIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAHDKw+wqr2YB2DgBAsApf8+u8mYWgI0TIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQEaAAAAAGQECAABkBAgAAJARIAAAQGa/uz0c5l7l3SwA5+v74/Pd47nEH8fn98cTgDPzdnaJLxEgAAAAJ/kLFgAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABAZr+7PRzmXuXdLADn69vj88PjucSfx+e3xxOAM/N2donlAXK4OX4nAGdtf7f78Ti/PH5a4tfj++GnuQE4I8d3wtJe8BcsAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAOOXz7CqvZgHYOAECwCkfZld5MwvAxgkQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAOOXz7CoXswBsnAAB4JQPs6tczwKwcQIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAAACAjQAAAgIwAAQAAMgIEAADICBAATvk8u8rFLAAbJ0AAeOZws/sw5yrXswBsnAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgQAAMgIEAAAICNAAACAjAABAAAyAgSAxP5udzEnABsmQAB4yfvZVa5nAdgwAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECAAAkBEgAABARoAAAAAZAQIAAGQECACVi1kANkyAAPCS97OrXM8CsGECBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAAICMAAEAADICBAAAyAgQAAAgI0AAeMn72VW+mQVgwwQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgADwkr9mV/lmFoANEyAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAAJn97vZwmBsAAOCL8gsIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAABkBAgAAZAQIAACQESAAAEBGgAAAAJHd7h92kkip/uXGVwAAAABJRU5ErkJggg=="

let testObject
let isFollowing = true
let isLerping = true
let textureCount = 2

function create() {
this.physics.world.setBounds(0, 0, 800, 600)
this.physics.world.setBoundsCollision(true, true, true, true)

this.textures.addBase64('field', fieldData)
this.textures.addBase64('ball', ballData)
	
this.textures.on('onload', () => {
	textureCount--
	// Wait for both textures to be loaded
	if (textureCount == 0) {
		this.add.image(400, 300, 'field')
		
		testObject = this.physics.add.image(200, 200, 'ball')
		testObject.setCollideWorldBounds(true)
		testObject.setBounce(1, 1)
		testObject.setVelocity(200, 250)
		
		this.cameras.main.startFollow(testObject)
		this.cameras.main.setLerp(0.1, 0.1)
			
		let lerpKey = this.input.keyboard.addKey('L');
		lerpKey.on('down', () => { 
			if (isLerping) {
				this.cameras.main.setLerp(1, 1)
			} else {
				this.cameras.main.setLerp(0.1, 0.1)
			}
			isLerping = !isLerping
		})
		
		let followKey = this.input.keyboard.addKey('F');
		followKey.on('down', () => { 
			if (isFollowing) {
				this.cameras.main.stopFollow()
			} else {
				this.cameras.main.startFollow(testObject)
			}
			isFollowing = !isFollowing
		})
	}
})

}

function startGame() {
new Phaser.Game({
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
},
scene: {
create
},
parent: 'root',
})
}

startGame()
</script>

[jjcapellan]

The physics has its own time step, so sometimes it produce glitches.
Look at this pull request, I think it can help you:
#4989
Demo:
https://codepen.io/jjcapellan/full/KKpKxpG

[samme]

I think this is #5018.

[mwiedmann]

Switching to the Matter physics completely removed this issue for me so I think I'm done with Arcade physics. There are a few other weird things I've experienced with Arcade physics that all go away with Matter as well.