Layering Sprites - reset animation frame to 0 - animation out of sync

[syntaxidermy]

Hi all,

 

Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour.

The layers so far are added like so:

Cat Body

Pupil

Face/Eye shape

 

Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct.

 

This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this:

 

This is the relevant code to trigger the event:

facekey = 'catfacegoth';

create function;

player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled();

playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled();

playerface = this.physics.add.sprite(260,350,facekey).setInteractive();

 

normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); });

gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');});

 

update function:

player.anims.play('default', true); //body animation

 

if(facekey == 'catfacegoth'){

playerface.anims.play('gothblink', true); // face/eye shape

playereyes.anims.play('blink', true); //this is the pupil layer

}

 

if(facekey == 'catface'){

playerface.anims.play('faceblink', true); // face/eye shape

playereyes.anims.play('blink', true); // pupil

}

My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame.

Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?

 

 

[syntaxidermy]

Update: I've fixed the issue!

Just in case anybody else comes across this problem, heres how I fixed it:

 

function create(){

  //player layers
  player = this.physics.add.sprite(200, 370, 'catbody').setInteractive().setDataEnabled();
  playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled();
  playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); 

 //menu items
  normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive();
  gotheyeicon = this.add.image(815,185, 'catfacegoth').setScale(0.35).setInteractive();


 
  //MOUSE interactions
  normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){
     facekey = 'catface'; 
     playereyes.anims.stop(); 
     playerface.anims.stop(); 
     console.log('normal face');
  });

  gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){
     facekey = 'catfacegoth'; 
     playereyes.anims.stop(); 
     playerface.anims.stop();  
     console.log('goth face selected');
  });

}

  function playFace(facekey){
      if(facekey == 'catfacegoth'){
          playerface.anims.play('gothblink', true);
          playereyes.anims.play('blink', true);
      }

      if(facekey == 'catface'){
          playerface.anims.play('faceblink', true);
          playereyes.anims.play('blink', true);
      }
  }

  function update ()
  { 
      //sprite layers
      player.anims.play('twitch', true);    //body
      playFace(facekey);                    //face/ eyes

      menuOptions(selection);               //select section
      currentobj.setTint(colour);           //tint section
      
   }

Heres how it looks now :