Sign in to follow this  
syntaxidermy

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

Recommended Posts

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:

image.png.7456b910e9a9badd1aac6cba995216f3.png

 

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?

 

 

Share this post


Link to post
Share on other sites

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 :D :

qujsA0g.gif
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.