Forums » Help » Damage Effect Animation

I am trying to make a damage effect where an animated fly turns red when it gets hit. The question is, how do I sync up the animations for the red tinted sprite with the normal sprite in the same sprite sheet?

Any suggestions are appreciated.

I came up with a solution, I thought I'd share. I'm open to any other solutions.

if(this.blinkTimer.delta() > 0.2){
	this.blinkTimer.set(0);
	this.currFrame = this.currentAnim.frame;
	this.currentAnim = this.anims.idle;
	this.currentAnim.frame = this.currFrame;
}
if(this.takingDmg){
	this.blinkTimer.set(0);
	this.currFrame = this.currentAnim.frame;
	this.currentAnim = this.anims.damagedIdle;
	this.currentAnim.frame = this.currFrame;

	this.takingDmg = false;
}

You could also, inside update, change the alpha of your currentAnim to some random value within a range calculated from remaining health:

update: function()
{
  if (this.health < 100)
  {
    var maxAlpha = this.health/100;
    var minAlpha = maxAlpha/10;
    this.currentAnim.alpha = Math.random().map(0,1,minAlpha, maxAlpha);
  {

  ...

I thought about that, but I didn't really like the effect. I wanted it to blink red or white to give the player the feeling of doing damage.