Final Delta Displacement
Visualizes the total displacement of physics bodies after all movement and collision steps are resolved using deltaXFinal and deltaYFinal, while demonstrating how platform friction affects riding objects.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('platform', 'assets/sprites/platform.png');
this.load.image('lemming', 'assets/sprites/lemming.png');
this.load.image('spikedball', 'assets/sprites/spikedball.png');
}
create ()
{
const platforms = this.physics.add.group({
key: 'platform',
frameQuantity: 3,
setXY: { x: 400, y: 150, stepY: 150 },
velocityX: 60,
immovable: true
});
const [ platform1, platform2, platform3 ] = platforms.getChildren();
platform1.setFrictionX(1);
platform2.setFrictionX(0.5);
platform3.setFrictionX(0);
const lemmings = this.physics.add.group({ gravityY: 600 });
lemmings.createMultiple([
{
key: 'lemming',
repeat: 3,
setXY: { x: 250, y: 0, stepX: 100 }
},
{
key: 'lemming',
repeat: 3,
setXY: { x: 250, y: 200, stepX: 100 }
},
{
key: 'lemming',
repeat: 3,
setXY: { x: 250, y: 350, stepX: 100 }
}
]);
this.physics.add.group({
key: 'spikedball',
frameQuantity: 6,
setXY: { x: 0, y: 625, stepX: 150 },
angularVelocity: 60
});
this.physics.add.collider(lemmings, platforms);
const graphics = this.add.graphics({ lineStyle: { color: 0xffff00 } });
this.events.on('postupdate', () =>
{
graphics.clear();
const bodies = Array.from(this.physics.world.bodies);
for (const body of bodies)
{
const { x, y } = body.center;
graphics.lineBetween(x, y, x + 100 * body.deltaXFinal(), y + 100 * body.deltaYFinal());
}
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'game-container',
physics: { default: 'arcade' },
scene: Example
};
const game = new Phaser.Game(config);