Rolling Body

Demonstrates how to simulate a rolling effect by synchronizing a physics body's angular velocity with its horizontal linear velocity.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('ball', 'assets/sprites/wizball.png');
    }

    create ()
    {
        const wheel = this.physics.add.image(50, 300, 'ball')
            .setAccelerationX(100)
            .setBounce(1)
            .setCollideWorldBounds(true);

        this.physics.world.on('worldstep', () =>
        {
            wheel.setAngularVelocity(
                Phaser.Math.RadToDeg(wheel.body.velocity.x / wheel.body.halfWidth)
            );
        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    physics: {
        default: 'arcade',
        arcade: { debug: true }
    },
    scene: Example
};

const game = new Phaser.Game(config);

More in Arcade132 examples

Rotate To PointerDemonstrates how to steer an Arcade Physics body towards the mouse pointer by calculating the shortest angle and applying angular velocity.

Scene-Specific Physics ConfigurationDemonstrates how to define Arcade Physics settings, such as gravity, within an individual Scene's configuration object rather than the global Game configuration.

Set World BoundsLearn how to define custom boundaries for the Arcade Physics world, constraining movement and collisions to a specific area smaller than the game canvas.

Simple Arcade Physics BodyA basic demonstration of creating an Arcade Physics body with velocity, gravity, and world boundary collision.