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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.