Sprite GPU Layer with Multiple Atlas Frames

Demonstrates using a Sprite GPU Layer to efficiently render many sprites using various frames from a single texture atlas.

800 × 600

GitHub

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

    create ()
    {
        const count = 1024;

        const layer = this.add.spriteGPULayer('sprites', 1 + count);
        console.log(layer);

        const template = {
            frame: 'bunny.png',
            x: {
                base: 550,
                ease: 'Linear',
                amplitude: -100,
                duration: 500
            },
            y: {
                base: 450,
                ease: 'Quad.easeOut',
                amplitude: -100,
                duration: 250
            },
            rotation: {
                base: -0.25,
                ease: 'Linear',
                amplitude: 0.5,
                duration: 500
            },
            scaleX: {
                base: 1.1,
                ease: 'Cubic.easeOut',
                amplitude: -0.1,
                duration: 250
            },
            scaleY: {
                base: 0.8,
                ease: 'Cubic.easeOut',
                amplitude: 0.2,
                duration: 250
            },
            originY: 1
        };

        layer.addMember(template);

        const frameNames = layer.texture.getFrameNames();

        for (let i = 0; i < count; i++)
        {
            const phase = Math.random() * 1000;

            template.frame = Phaser.Utils.Array.GetRandom(frameNames);
            template.x.base = Math.random() * 800;
            template.y.base = 600 - Math.random() * 100;
            template.x.delay = phase;
            template.y.delay = phase;
            template.rotation.delay = phase;
            template.scaleX.delay = phase;
            template.scaleY.delay = phase;

            layer.addMember(template);
        }
    }
}

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

const game = new Phaser.Game(config);

More in Sprite Gpu Layer16 examples

Big ForestDemonstrates the SpriteGPULayer for high-performance rendering of massive sprite counts. It features a procedurally generated environment with parallax layers, weather-based color interpolation, and individual animations for environmental elements like wind-blown leaves, lake sparkles, and rain.

Direct GPU Buffer ManipulationManually update the underlying Float32 buffer of a SpriteGPULayer to manipulate thousands of sprites simultaneously for high-performance animation and interaction.

Dynamic Sprite GPU Layer ParticlesCreate a high-performance particle effect by dynamically editing members of a Sprite GPU Layer to follow the mouse pointer with smooth interpolation and animations.

GPU Animated SpritesDemonstrates using a Sprite GPU Layer to efficiently render and animate a large number of sprites using shared animation data and individual property templates.