Jump to content

How to add an animation to a group sprite


Recommended Posts

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


Link to comment
Share on other sites

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');}
Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

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  :(

Link to comment
Share on other sites

  • 1 year later...

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),

function update(){



Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...