JAVASCRIPT

phaser animation repeat event

preload ()
    {
        this.load.image('poo', 'assets/sprites/poo.png');
        this.load.spritesheet('mummy', 'assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
    }

    create ()
    {
        const mummyAnimation = this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('mummy'),
            frameRate: 16
        });

        const sprite = this.add.sprite(50, 300, 'mummy').setScale(4);

        sprite.play({ key: 'walk', repeat: 7 });

        this.tweens.add({
            targets: sprite,
            x: 750,
            duration: 8800,
            ease: 'Linear'
        });

        sprite.on('animationrepeat', function () {

            const poop = this.add.image(sprite.x - 32, 300, 'poo').setScale(0.5);

            this.tweens.add({
                targets: poop,
                props: {
                    x: {
                        value: '-=64', ease: 'Power1'
                    },
                    y: {
                        value: '+=50', ease: 'Bounce.easeOut'
                    }
                },
                duration: 750
            });

        }, this);
    }

phaser animation on repeat event

 preload ()
    {
        this.load.atlas('knight', 'assets/animations/knight.png', 'assets/animations/knight.json');
        this.load.image('bg', 'assets/skies/clouds.png');
        this.load.spritesheet('tiles', 'assets/tilemaps/tiles/fantasy-tiles.png', { frameWidth: 64, frameHeight: 64 });
    }

    create ()
    {
        //  The background and floor
        this.add.image(400, 16, 'bg').setOrigin(0.5, 0);

        for (var i = 0; i < 13; i++)
        {
            this.add.image(64 * i, 536, 'tiles', 1).setOrigin(0);
        }

        this.add.image(576, 472, 'tiles', 27).setOrigin(0);
        this.add.image(576, 408, 'tiles', 27).setOrigin(0);
        this.add.image(576, 344, 'tiles', 57).setOrigin(0);

        this.add.text(400, 8, 'Click to repeat animation', { color: '#ffffff' }).setOrigin(0.5, 0);

        //  Our attack animation
        const attackConfig = {
            key: 'attack',
            frames: this.anims.generateFrameNames('knight', { prefix: 'attack_C/frame', start: 0, end: 13, zeroPad: 4 }),
            frameRate: 16,
            repeat: -1
        };

        this.anims.create(attackConfig);

        //  Our coin animation
        const coinConfig = {
            key: 'coin',
            frames: this.anims.generateFrameNumbers('tiles', { start: 42, end: 47 }),
            frameRate: 12,
            repeat: -1
        };

        this.anims.create(coinConfig);

        const lancelot = this.add.sprite(300, 536, 'knight', 'attack_C/frame0000')

        lancelot.setOrigin(0.5, 1);
        lancelot.setScale(8);

        //  Event handler for when the animation completes on our sprite
        lancelot.on(Phaser.Animations.Events.ANIMATION_REPEAT, function () {

            this.releaseItem();

        }, this);

        //  And a click handler to start the animation playing
        this.input.once('pointerdown', function () {

            lancelot.play('attack');

        });
    }

    releaseItem ()
    {
        const item = this.add.sprite(600, 370).play('coin');

        this.tweens.add({
            targets: item,
            props: {
                y: {
                    value: -64,
                    ease: 'Linear',
                    duration: 3000,
                },
                x: {
                    value: '+=128',
                    ease: 'Sine.inOut',
                    duration: 500,
                    yoyo: true,
                    repeat: 4
                }
            },
            onComplete: function () {
                item.destroy();
            }
        });
    }

phaser play animation after delay

 preload ()
    {
        this.load.atlas('zombie', 'assets/animations/zombie.png', 'assets/animations/zombie.json');
        this.load.image('bg', 'assets/textures/soil.png');
    }

    create ()
    {
        this.bg = this.add.tileSprite(400, 300, 800, 600, 'bg').setAlpha(0.8);
        const text = this.add.text(400, 32, "Click to run playAfterDelay('death', 2000)", { color: '#00ff00' }).setOrigin(0.5, 0);

        //  Our global animations, as defined in the texture atlas
        this.anims.create({ key: 'walk', frames: this.anims.generateFrameNames('zombie', { prefix: 'walk_', end: 8, zeroPad: 3 }), repeat: -1, frameRate: 8 });
        this.anims.create({ key: 'death', frames: this.anims.generateFrameNames('zombie', { prefix: 'Death_', end: 5, zeroPad: 3 }), frameRate: 12 });

        this.rob = this.add.sprite(400, 560, 'zombie').setOrigin(0.5, 1).play('walk');

        this.input.once('pointerdown', function () {
            text.setText('Playing death animation in 2000 ms');

            this.rob.anims.playAfterDelay('death', 2000);

        }, this);
    }

    update ()
    {
        if (this.rob.anims.getName() === 'walk')
        {
            this.bg.tilePositionY++;
        }
    }

phaser play animation after repeat

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

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

        const text = this.add.text(400, 32, "Click to toggle sequence", { color: '#00ff00' }).setOrigin(0.5, 0);

        //  Our global animations, as defined in the texture atlas
        this.anims.create({ key: 'idle', frames: this.anims.generateFrameNames('alien', { prefix: '01_Idle_', end: 17, zeroPad: 3 }), repeat: -1, repeatDelay: 500, frameRate: 18 });
        this.anims.create({ key: 'turn', frames: this.anims.generateFrameNames('alien', { prefix: '02_Turn_to_walk_', end: 3, zeroPad: 3 }), frameRate: 12 });
        this.anims.create({ key: 'walk', frames: this.anims.generateFrameNames('alien', { prefix: '03_Walk_', end: 12, zeroPad: 3 }), repeat: -1, frameRate: 18 });

        const ripley = this.add.sprite(400, 300, 'alien').play('idle');

        this.input.on('pointerdown', function () {

            if (ripley.anims.getName() === 'idle')
            {
                //  When the current animation repeat ends, we'll play the 'turn' animation
                ripley.anims.playAfterRepeat('turn');

                //  And after that, the 'walk' look
                ripley.anims.chain('walk');
            }
            else
            {
                ripley.anims.play('idle');
            }

        });
    }