JackBid Posted December 27, 2013 Share Posted December 27, 2013 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 More sharing options...
rich Posted December 31, 2013 Share Posted December 31, 2013 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');} haden, Fred Sprinkle, Robert O'Rourke and 2 others 5 Link to comment Share on other sites More sharing options...
Arlefreak Posted December 31, 2013 Share Posted December 31, 2013 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 More sharing options...
rich Posted December 31, 2013 Share Posted December 31, 2013 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 1 Link to comment Share on other sites More sharing options...
Arlefreak Posted December 31, 2013 Share Posted December 31, 2013 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! Link to comment Share on other sites More sharing options...
GourmetGorilla Posted May 7, 2015 Share Posted May 7, 2015 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 More sharing options...
rich Posted May 8, 2015 Share Posted May 8, 2015 group.callAll('animations.add', 'animations', 'fly3', [0,1,2,3], 20, true); Link to comment Share on other sites More sharing options...
GourmetGorilla Posted May 8, 2015 Share Posted May 8, 2015 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'); Link to comment Share on other sites More sharing options...
rich Posted May 8, 2015 Share Posted May 8, 2015 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. Link to comment Share on other sites More sharing options...
GourmetGorilla Posted May 8, 2015 Share Posted May 8, 2015 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 More sharing options...
GourmetGorilla Posted May 8, 2015 Share Posted May 8, 2015 Doh, :facepalm: got it. Sorry Link to comment Share on other sites More sharing options...
Caveman1217 Posted August 25, 2016 Share Posted August 25, 2016 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(){ } Link to comment Share on other sites More sharing options...
Recommended Posts