Input on Scaled Container Sprites

Demonstrates interactive input detection on a sprite with negative scaling and a custom origin inside a Container.

800 × 600

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        const container = this.add.container(0, 0);

        const sprite = this.add.image(200, 200, 'eye').setInteractive();

        sprite.setScale(-1, 1);
        sprite.setOrigin(0);
        
        container.add(sprite);

        sprite.on('pointerover', function ()
        {
            console.log('over');
            this.setTint(0xff0000);
        });

        sprite.on('pointerout', function ()
        {
            console.log('out');
            this.clearTint();
        });
    }
}

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

const game = new Phaser.Game(config);

More in Container52 examples

Input Overlap in Nested ContainersDemonstrates pointer input detection and hover events for interactive Sprites nested within multiple levels of Containers.

Inside Container Vs Outside ContainerA visual comparison of how rotation and scale transformations affect Game Objects when they are placed directly in the Scene versus when they are nested inside single or multiple parent Containers.

Matter Physics ContainerDemonstrates how to apply a Matter Physics body to a Container. Note that you must define the container size using setSize before enabling the physics body.

Matter Physics Container and Camera FollowDemonstrates how to apply a Matter physics body to a Container by setting an explicit size and configuring the camera to follow the container as it moves through the world.