Tweening multiple objects, change texture and tween back (alpha)

[grumpygamer]

Hello again.

I've just completed weapon swapping on my game, but I'd like to add a bit of eye candy to it, so I thought I could do this:

(shipWeapons is a sprite instance array)

for (y=0; y<shipWeapons.length; y++){    for (x=0; x<shipWeapons[y].length; x++){               game.add.tween(shipWeapons[y][x]).to({alpha: 0}, 200).onCompleteCallback(function(){          shipWeapons[y][x].loadTexture(reference);          game.add.tween(shipWeapons[y][x]).to({alpha: 0}, 200);       });        }   }

but obviously it's not working.

First thing that comes to mind is that I would have to assign a variable to each tween (for the callback to work LOL), but URGH! it's going to be a nightmare as it's a grid and then I'd have to keep track of them all.

 

Is there a quick and dirty solution?

It's a nightmare also because each weapon also has two boxes layered on top that also should alpha in and out so I'm going to DIE if I have to keep track of all those tweens!

 

Thanks for your support!

[drhayes]

I know it's an array of arrays, but you said it's also a grid. Could you overlay an image on top of the grid as a whole and transition that, instead? Are the sprites all in a group, and you could tween the group's alpha?

[XekeDeath]

Which part is not working...?

The onComplete callback is just called onComplete, and you need to put .add in there because it is a Phaser.Signal, not a function...
Also, I see no start calls there to kick off the tweens...

for (y=0; y<shipWeapons.length; y++){    for (x=0; x<shipWeapons[y].length; x++){        var t = game.add.tween(shipWeapons[y][x]).to({alpha: 0}, 200);        t.onComplete.add(function(){          shipWeapons[y][x].loadTexture(reference);          game.add.tween(shipWeapons[y][x]).to({alpha: 0}, 200).start();       });        t.start();    }  }

Or you could use the chaining functionality instead of the onComplete callback...

http://phaser.io/docs/2.3.0/Phaser.Tween.html#chain

Docco link provided because I have no time for an example...

[boolean]

First thing that comes to mind is that I would have to assign a variable to each tween (for the callback to work LOL), 

 

You should be able to just join .onComplete to the tween without setting up a new variable.

 

I think the issue is that .onComplete.add is losing access to your shipWeapons property. Your code should look like:

   game.add.tween(shipWeapons[y][x]).to({            alpha: 0        }, 200).onComplete.add(function (shipWeapon) { //shipWeapon is the shipWeapons[y][x] property you gave your tween. shipWeapons is no longer in scope so you can't access it directly.                shipWeapon.loadTexture(this.reference);                game.add.tween(shipWeapon).to({alpha: 1}, 200); //Is this supposed to be 1?        }, this);

I'm not 100% sure why the tween loses access to the outer variables, but I think it's because the function which has your shipWeapons property isn't the one actually calling the onComplete, the tween is, so it loses access to any variables not directly passed to the tween. Maybe someone with more JS experience can fill in here.

[grumpygamer]

Thanks for your input guys.

I've tried this (based on boolean's suggestion):

reference = "hangar_weapon_placeholder";game.add.tween(shipWeapons[y][x]).to({ alpha: 0 }, 200).start().onComplete.add(function(shipWeapon){    shipWeapon.loadTexture(reference);    game.add.tween(shipWeapon).to({ alpha: 1 }, 200).start();})

The fade out works only in the cases where there is no new loaded weapon.

I'll explain better:

When moving to a ship that does not have a weapon on the same slot of the current one, the fade out works and it's pretty neat.
When the texture actually gets replaced the change is instant and no fade is applied.

 

I think this is because the texture has been replaced loosing all alpha properties?

 

Maybe I should make it alpha = 0 right away and then tween it to 1. Seems a bit of a wacky way to do it though.

 

Edit: apologies, it's working, I hadn't updated a piece of code.