Load Sprite Sheet From Object Array

Demonstrates how to load multiple sprite sheets simultaneously by passing an array of configuration objects to the loader.

Load Sprite Sheet From Object Array, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.setPath('assets/sprites');

        //  An array of sprite sheets.
        //  The URLs are automatically created based on the path and key (see documentation for details)
        this.load.spritesheet([
            { key: 'explosion', frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 } },
            { key: 'balls', frameConfig: { frameWidth: 17, frameHeight: 17 } }
        ]);
    }

    create ()
    {
        const config = {
            key: 'explodeAnimation',
            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
            frameRate: 20,
            repeat: -1
        };

        this.anims.create(config);

        this.add.sprite(400, 300, 'explosion').play('explodeAnimation');

        this.add.sprite(400, 300, 'balls', 3);
    }
}

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

const game = new Phaser.Game(config);

More in Sprite Sheet4 examples