Twirl with Non-Exclusive Containers

Demonstrates the use of non-exclusive containers to share the same set of sprites across multiple container instances, creating a complex twirling effect through staggered tweens.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        // this.load.image('rick', 'assets/demoscene/large-raster32.png');
        // this.load.image('rick', 'assets/demoscene/raster-bw-800x16.png');
        // this.load.image('rick2', 'assets/demoscene/rastercarpet32.png');
        this.load.image('rick2', 'assets/demoscene/rastercarpet32.png');
        this.load.image('rick', 'assets/demoscene/multi-color-raster.png');
    }

    create ()
    {
        const sprite1 = this.add.sprite(0, 100, 'rick');
        const sprite2 = this.add.sprite(-100, 0, 'rick2').setAngle(90);
        const sprite3 = this.add.sprite(0, -100, 'rick').setAngle(180);
        const sprite4 = this.add.sprite(100, 0, 'rick2').setAngle(270);

        const containers = [];

        for (let i = 0; i < 128; i++)
        {
            const container = this.add.container(400, 300);

            if (i > 0)
            {
                container.setExclusive(false);
            }

            container.add([ sprite1, sprite2, sprite3, sprite4 ]);

            containers.push(container);
        }

        this.tweens.add({
            targets: sprite1,
            y: -200,
            ease: 'Sine.easeInOut',
            duration: 4000,
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: sprite2,
            x: 300,
            ease: 'Sine.easeInOut',
            duration: 4000,
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: sprite3,
            y: 200,
            ease: 'Sine.easeInOut',
            duration: 4000,
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: sprite4,
            x: -300,
            ease: 'Sine.easeInOut',
            duration: 4000,
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: containers,
            angle: { value: 360, duration: 6000 },
            scaleX: { value: 2, duration: 3000, yoyo: true, ease: 'Quad.easeInOut' },
            scaleY: { value: 4, duration: 3000, yoyo: true, ease: 'Cubic.easeInOut' },
            repeat: -1,
            delay: function (target, key, value, index, total, tween)
            {
                return index * 32;
            }
        });
    }
}

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

const game = new Phaser.Game(config);

More in Container52 examples

Add Array of Sprites to ContainerDemonstrates how to add multiple Game Objects to a Container simultaneously using an array and shows how transformations applied to the Container affect all its children collectively.

Add Array of Sprites to Container at IndexDemonstrates how to add multiple Game Objects to a Container simultaneously while specifying their insertion index in the display list.

Add Emitter to ContainerDemonstrates how to add a Particle Emitter to a Container and apply transformations like rotation to the entire group.

Add Sprite To ContainerDemonstrates how to add multiple sprites as children of a Container, showing how child positions and transformations remain relative to the parent.