How to add an animation to a group sprite

[JackBid]

when I am creating a new group of sprites, if it possible to add an animation to these sprites? I could not find an example of it, or a previous post in the forums. I tried doing this:

explosions.create(x, y, 'explosion');explosions.forEach(function(item){     item.animations.add("explode", [0,1]);     item.animations.play("explode", 7, true);});

However it responds with the error: 

 

Uncaught TypeError: Cannot read property 'uuid' of null

 

[rich]

Here this is an easier way to do it. This is a fully self-contained example (that is part of the 1.1.4 release):

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');    game.load.image('undersea', 'assets/pics/undersea.jpg');    game.load.image('coral', 'assets/pics/seabed.png');}function create() {    game.add.sprite(0, 0, 'undersea');    //  Here we create our group and populate it with 6 sprites    var group = game.add.group();    for (var i = 0; i < 6; i++)    {        //  They are evenly spaced out on the X coordinate, with a random Y coordinate    	sprite = group.create(120 * i, game.rnd.integerInRange(100, 400), 'seacreatures', 'octopus0000');    }    //  These are the frame names for the octopus animation. We use the generateFrames function to help create the array.    var frameNames = Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4);    //  Here is the important part. Group.callAll will call a method that exists on every child in the Group.    //  In this case we're saying: child.animations.add('swim', frameNames, 30, true, false)    //  The second parameter ('animations') is really important and is the context in which the method is called.    //  For animations the context is the Phaser.AnimationManager, which is linked to the child.animations property.    //  Everything after the 2nd parameter is just the usual values you'd pass to the animations.add method.    group.callAll('animations.add', 'animations', 'swim', frameNames, 30, true, false);    //  Here we just say 'play the swim animation', this time the 'play' method exists on the child itself, so we can set the context to null.    group.callAll('play', null, 'swim');    game.add.sprite(0, 466, 'coral');}

[Arlefreak]

I was doing this on 1.1.3 this way:

gballs.forEach(this.resetGballs,this,true,true);resetGballs: function (child, firstTime){		if (firstTime){			child.frameName = 'ball01.ase';			child.animations.add('blue_ball', Phaser.Animation.generateFrameNames('ball', 0, 0, '.ase', 2), 60, true);			child.animations.add('red_ball', Phaser.Animation.generateFrameNames('ball', 8, 15, '.ase', 2), 60, true);		}		child.animations.play('blue_ball', 1, true);		child.name = 'normal';	},

but 1.1.4 sounds better  

[rich]

You can do the above method I posted in 1.1.3 I just meant that the example above is part of 1.1.4, before there was no example showing it.

[Arlefreak]

You can do the above method I posted in 1.1.3 I just meant that the example above is part of 1.1.4, before there was no example showing it.

Oh! didn't know that I will try it thanks!

[GourmetGorilla]

This ones got me completely stumped, surely there's a simple way to add animation to a sprite in a group?  Here's my group.

 // The enemy's bullets    enemyBullets = game.add.group();    enemyBullets.enableBody = true;    enemyBullets.physicsBodyType = Phaser.Physics.ARCADE;    enemyBullets.createMultiple(30, 'enemyBullet');    enemyBullets.setAll('anchor.x', 0.5);    enemyBullets.setAll('anchor.y', 1);    enemyBullets.setAll('outOfBoundsKill', true);    enemyBullets.setAll('checkWorldBounds', true);

Here's what I would add if I was adding animation to a sprite NOT in a group.

enemyBullets.animations.add('fly3', [ 0, 1, 2, 3], 20, true);enemyBullets.play('fly3');

When I try the following: 

 enemyBullets.callAll(Phaser.Sprite.animation.add('fly3', [ 0, 1, 2, 3], 20, true));   enemyBullets.callAll(Phaser.Sprite.prototype.play, null, 'fly3');

I get the error TypeError: Phaser.Sprite.animation is undefined . Hmmm... what's the correct syntax for this? What am I doing wrong?

[rich]

group.callAll('animations.add', 'animations', 'fly3', [0,1,2,3], 20, true);

[GourmetGorilla]

Thanks, I'm still getting an error with the 2nd line: TypeError: a.split is not a function

    enemyBullets.callAll('animations.add', 'animations', 'fly3', [0,1,2,3], 10, true);    enemyBullets.callAll(Phaser.Sprite.prototype.play, null, 'fly3');

[rich]

Look at the code I posted - you'll see the function needs to be passed as a string. The 2nd parameter is the context in which to run the function.

[GourmetGorilla]

I don't understand (sorry, new to this). Which part is the function?  I did try something like that on the 2nd line as well. 

   enemyBullets.callAll('play', 'null', 'fly3');

But it's just being ignored, not throwing an error but not animating the sprite.

 

and If I try 

 enemyBullets.callAll.play('null', 'fly3');

I get the error TypeError: enemyBullets.callAll.play is not a function  

[GourmetGorilla]

Doh,  :facepalm: got it. Sorry

[Caveman1217]

For some reason my code wont work for trying to load an animation. Im new to coding, so please excuse my lack of knowledge if this is an easy fix or if it's screaming out. Please help?

this is my code....

 

var game = new Phaser.Game(728, 1280, Phaser.CANVAS, 'Bombs_Away', { preload: preload, create: create });

function preload() { 
    game.load.atlas('assets', 'assets/Images/assets.png', 'assets/Images/assets.json');
    game.load.image('background', 'assets/Images/Background.png');
   
   
}

function create() {
   var bg = game.add.sprite(0, 0, 'background');
    bg.width = 728;
    bg.height = 1280;
    
    var herobase = game.add.sprite (0, 450, 'assets', 'herobase.png');
    //var sprite1 = game.add.sprite (190, 700, 'assets', 'healthframe.png');
        //sprite1.width = 100;
        //sprite1.hight = 5;
   //var bomb = this.game.add.sprite (400, 0, 'assets', 'bomb1.png');
       // game.physics.enable( bomb, Phaser.Physics.ARCADE);
       //bomb.body.velocity.y= 50 + Math.random() * 600;
}
    function bomb(){
        
        var bomb = game.add.sprite (200, 0, 'assets', 'bomb2.png');
        game.physics.enable( bomb, Phaser.Physics.ARCADE);
        bomb.body.velocity.y= 50 + Math.random() * 600;
        
    
        this.bomb.animations.add("fall", Phaser.Animation.generateFrameNames("bomb", 1, 2, "bomb1.png", 1),15,true),
           this.bomb.animations.play('fall',13,false,false);    
    
        
        
    }                    

function update(){
    

    
}