Animate group

I’m trying to animate a group like:

var forward;
    function preload() {
        this.load.multiatlas('forward', 'assets/forward.json', 'assets');
    }
    function create() {
        forward = this.physics.add.staticGroup();
        forward.create(200, 534, 'forward', 'forward.png'); //creates sprite with default image (forward.png)
        var frameNames = this.anims.generateFrameNames('forward', {
            start: 2, end: 4, zeroPad: 1,
            prefix: 'forward', suffix: '.png' //loads forward2.png, forward3.png, forward4.png from spritesheet
        });

        this.anims.create({ key: 'disappear', frames: frameNames, frameRate: 10, repeat: -1 }); //infinite animation
        forward.playAnimation('disappear');
    }

But no animation plays, the sprites remain with their originally assigned image

Hey @froggomad,
I’m not sure about this solution but as far as know you should call every child from your group so you might use something like this:

Phaser.Actions.Call(forward.getChildren(), child => {
	child.anims.play('disappear');
});

As i said, i’m not sure about this but let me know if it’s working :slight_smile:

Thanks @hcakar, but it’s the same result. I don’t have much experience with Phaser, but read that groupName.playAnimation() is a shortcut for groupName.callAll which is supposed to be a shortcut for the method you’re using (https://phaser.io/examples/v2/groups/call-all-animations) - but when I try, throws an error that callAll isn’t a function - maybe phased out in v3?

I see, i just checked the Group.js and yes there is a function called playAnimation() which this function leads to Actions.PlayAnimation and then it’s here:

/**
 * @author       Richard Davey <rich@photonstorm.com>
 * @copyright    2019 Photon Storm Ltd.
 * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
 */

/**
 * Play an animation with the given key, starting at the given startFrame on all Game Objects in items.
 *
 * @function Phaser.Actions.PlayAnimation
 * @since 3.0.0
 *
 * @generic {Phaser.GameObjects.GameObject[]} G - [items,$return]
 *
 * @param {(array|Phaser.GameObjects.GameObject[])} items - An array of Game Objects. The contents of this array are updated by this Action.
 * @param {string} key - The name of the animation to play.
 * @param {(string|integer)} [startFrame] - The starting frame of the animation with the given key.
 *
 * @return {(array|Phaser.GameObjects.GameObject[])} The array of Game Objects that was passed to this Action.
 */
var PlayAnimation = function (items, key, startFrame)
{
    for (var i = 0; i < items.length; i++)
    {
        items[i].anims.play(key, startFrame);
    }

    return items;
};

module.exports = PlayAnimation;

And as you said it’s same funciton. But there is one problem. I never saw callAll function in this path…

Maybe you have some else error ?

And can you please check if your frameNames are correct or not ?

Regarding the callAll error - I’m saying that was the error I got when I tried to use callAll

Using your method is the same result as my method - no animation and no errors

Sorry I wasn’t more clear

Update: The animation works as I’m able to call it in update on pressing a key like:

if (cursors.left.isDown || aKey.isDown)
{
  forward.playAnimation('disappear');
}

How can I call it so it runs automatically? I’ve put forward.playAnimation('disappear'); in the root of update() but it doesn’t seem to work unless it’s triggered by something else

I see, yea sorry it wasn’t that clear for me either :slight_smile:

About this, I actually doesn’t have anything to say maybe we could ask for help from @samme, he was always a good help :slight_smile: