Moving a Sprite

Demonstrates how to move a Sprite across the screen by manually updating its position within the scene update loop.

800 × 600

class Example extends Phaser.Scene
{
    bunny;

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('bunny', 'assets/sprites/bunny.png');
    }

    create ()
    {
        this.bunny = this.add.sprite(-150, 300, 'bunny');
    }

    update ()
    {
        this.bunny.x += 2;

        if (this.bunny.x > 950)
        {
            this.bunny.x = -150;
        }
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

More in Sprites9 examples

Multiple SpritesLoad and display multiple independent Sprite objects at different coordinates within a single scene.

Rotate Around A SpriteDemonstrates using Phaser.Math.RotateAroundDistance to create orbital motion where sprites rotate around the positions of other moving sprites.

Single SpriteA basic example showing how to load an image and display it as a Sprite game object at a specific coordinate.

Sprite AlphaSet the transparency of a Sprite using the alpha property.