GPU Animated Spritesheet from Atlas

Demonstrates how to create a high-performance GPU sprite layer using animation frames extracted from a texture atlas spritesheet.

800 × 600

GitHub

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

    create ()
    {
        const count = 1024 * 4; // Try a million!
        const b2 = this.textures.addSpriteSheetFromAtlas(
            'bubble2',
            {
                atlas: 'testanims',
                frame: 'bubble',
                frameWidth: 34,
                frameHeight: 68
            }
        );
        const config4 = {
            key: 'bobble2',
            frames: this.anims.generateFrameNumbers('bubble2', { start: 0, end: 6 }),
            frameRate: 10
        };
        const bobble2Anim = this.anims.create(config4);

        const layer = this.add.spriteGPULayer('testanims', count);

        layer.setAnimations([bobble2Anim]);

        console.log(layer);

        const template = {
            animation: {
                base: 'bobble2',
                duration: 500,
                delay: 0
            },
            x: {
                base: -100,
                ease: 'Linear',
                amplitude: 1100,
                duration: 15000,
                yoyo: false
            }
        };

        for (let i = 0; i < count; i++)
        {
            template.animation.delay = Math.random() * 500;
            template.x.duration = (Math.random() * 10000 + 10000) / ((count + i) / (count * 2));
            template.x.delay = Math.random() * 30000;
            template.y = 50 + 550 * i / count;
            template.scaleX = (count + i) / (count * 2);
            template.scaleY = template.scaleX;

            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

GPU Layer Easing TypesDemonstrates applying various easing functions like Linear, Quad, and Smoothstep to members within a Sprite GPU Layer.

GPU Sprite LayerDemonstrates how to use Sprite GPU Layers to render and animate hundreds of thousands of sprites simultaneously using high-performance GPU-based property templates.

Incremental Sprite GPU LayerDemonstrates how to add and manage massive amounts of sprites—up to one million—by incrementally populating a Sprite GPU Layer to ensure smooth performance during large buffer updates.

One Million Pixel SpritesEfficiently renders one million sprites using the Sprite GPU Layer, demonstrating high-performance handling of massive sprite counts where each sprite represents a single pixel from a source texture.