Animating generated sprites from within a group

[gnarf]

Hello,

 

I'm new to Phaser and Javascript but I'm slowly getting the hang of things. I ran into a problem while messing with the first tutorial ("Making your first game"). I'm trying to play through a sprite sheet based on the x velocity of each object created within a certain group. I've tried messing with all the values, changing the names of variables, etc. I searched the docs and looked for examples that were similar but the closest I got was finding the forEach method. I'm not sure if I'm using it correctly, though.

 

I created an enemies group and added a series of baddie objects to it. All of that works, but when I go to the update function to try and animate them, the console returns:

 

Uncaught TypeError: Cannot read property 'play' of undefined.

 

Here's my code (I left out some things like collision checks because that all works correctly):

var baddie;function createBaddie() {	baddie = enemies.create(game.world.randomX, game.world.RandomY, 'baddie');	baddie.body.gravity.y = 300;	baddie.body.bounce.set(0.8);	baddie.body.velocity.x = Math.floor((Math.random() * 100) + 1);	baddie.body.collideWorldBounds = true;	baddie.animations.add('left', [0, 1], 10, true);	baddie.animations.add('right', [2, 3], 10, true);};// in the create functionenemies = game.add.group();enemies.enableBody = true;game.physics.arcade.enable(enemies);for (var i = 0; i < 5; i++) {	createBaddie();                //logging baddies to check what they're named        console.log(baddie);	};// in the update function (none of this works)enemies.forEach(function() {	if (baddie.body.velocity.x > 0) {		this.animation.play('right');		} else if (baddie.body.velocity.x < 0) {		this.animation.play('left');		}	}, this);

I'd appreciate any help I can get on this topic or how to do this in a better way. Thanks! 

[jmp909]

Wrong forum! This is for Phaser 3 discussion

You only have one baddie, but you're trying to use this to refer to multiple enemies.

Also your enemies variable seems to be local to the create function, so I doubt your update function can see it.

Please put this in the correct forum and we can discuss this in more detail

Thanks

[gnarf]

Whoops, sorry about that. I'll ask a mod to move it over. Thanks for the reply, I think it's already putting me in the right direction.

[jmp909]

i've fixed up your example and explained the code as best I can

http://phaser.io/sandbox/ysPvxbWu

 

i've separated out your update function for clarity. hopefully it's close enough to your original code to not add any confusion!

 

you need to be careful with your variable scope, and make sure "this" refers the correct thing. (not an issue here, but it'll likely come up later when you start adding tween/timer callbacks)

[gnarf]

You know, variable scope was confusing me and I remember reading through it and thinking I'd figure it out when it came up. That didn't happen, but I understand it now. Thanks a ton, the example does exactly what I wanted and it makes sense to me.

 

This was particularly helpful:

createdBaddie.name = "alien_" + i;

 Part of the reason I was logging the created baddies was because I wanted to know how they were being named when out of my control. Should have thought of this though.

 

Thanks again!

[jmp909]

they're not actually named anything when they're created. you can check this by console.log(createdBaddie.name)before you assign a name

 

also note you can swap out 'createdBaddie' and 'baddieToUpdate' for the word 'baddie' , but all 3 will be separate variables local to their respective functions. I just gave them different names to show that I was using different references

 

what happened with your code, was by the time you got to your update function, 'baddie' only pointed to the last-created sprite.

 

the 'enemies' variable you can see i've defined outside of the functions so it can be seen from anywhere. actually that's not entirely true.. in your original code, because you defined enemies without var, it makes it global, so it was actually visible in your update function, it's just the other references were incorrect

[gnarf]

Ah, that explains a ton. I kept wondering why "enemies" was being found, but suddenly there was an error when it reached "baddie". It helps to split them up the way you did, so I'll keep that in mind as I update my code. Thanks!