JAVASCRIPT

phaser create animation on sprite

preload ()
    {
        this.load.atlas('soldier', 'assets/animations/soldier.png', 'assets/animations/soldier.json');
        this.load.image('bg', 'assets/pics/town-wreck.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const rambo = this.add.sprite(500, 500, 'soldier');

        //  The following animation is created directly on the 'rambo' Sprite.

        //  It cannot be used by any other sprite, and the key ('walk') is never added to
        //  the global Animation Manager, as it's kept local to this Sprite.
        rambo.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNames('soldier', { prefix: 'soldier_3_walk_', start: 1, end: 8 }),
            frameRate: 12,
            repeat: -1
        });

        //  Now let's create a new 'walk' animation that is stored in the global Animation Manager:
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNames('soldier', { prefix: 'Soldier_2_walk_', start: 1, end: 8 }),
            frameRate: 12,
            repeat: -1
        });

        //  Because the rambo Sprite has its own 'walk' animation, it will play it:
        rambo.play('walk');

        //  However, this Sprite will play the global 'walk' animation, because it doesn't have its own:
        this.add.sprite(200, 500, 'soldier')
            .play('walk');
    }

phaser create animation from sprite config.js

function preload ()
{
    this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
}

function create ()
{
    //  Define the animations first

    this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
    this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });

    //  The Sprite config

    const config = {
        key: 'gems',
        x: { randInt: [ 0, 800 ] },
        y: { randInt: [ 0, 300 ] },
        scale: { randFloat: [ 0.5, 1.5 ] },
        anims: 'ruby'
    };

    //  Make 16 sprites using the config above
    for (var i = 0; i < 16; i++)
    {
        this.make.sprite(config);
    }

    //  A more complex animation config object.
    //  This time with a call to delayedPlay that's a function.
    const config2 = {
        key: 'gems',
        frame: 'square_0000',
        x: { randInt: [ 0, 800 ] },
        y: { randInt: [ 300, 600 ] },
        scale: { randFloat: [ 0.5, 1.5 ] },
        anims: {
            key: 'square',
            repeat: -1,
            repeatDelay: { randInt: [ 1000, 4000 ] },
            delayedPlay: function ()
            {
                return Math.random() * 6000;
            }
        }
    };

    //  Make 16 sprites using the config above
    for (let i = 0; i < 16; i++)
    {
        this.make.sprite(config2);
    }
}