Chaining multiple animations together

[Icepig]

Hi All,

This is my first time getting into phaser and I have a question that should be easy but I could not find it anywhere on this form or on google.  I'm following the tutorial https://phaser.io/tutorials/making-your-first-phaser-3-game and I want the player to do a series of animations when he dies but I can not find a way to do this.  Can some one help point me in the right directions?

The following example is not exactly what I'm looking for https://labs.phaser.io/edit.html?src=src\animation\animation from png sequence.js since it chaining frames instead of animation.

This is just a code example of that I was expecting on death.

this.player.anims.play("left", true).then( () =>{  this.player.anims.play("right", true).then( () => {  this.player.anims.play("turn", true) }) })

Any help will be appreciated, thanks

[GreenCloversGuy]

Should be able to use the onCompleteEvent, using the name 'animationcomplete' and adding an event listenter onto your sprite. 

Example here:

 

How I would do it:

this.player.anims.play("left", true).on('animationcomplete', () => {this.player.anims.play("right", true).on('animationcomplete', () => {this.player.anims.play("turn", true)} )} )

 

Edit: Whoops, seems more complicated than this, I just tried the code and this code seems to cause an infinite loop for the third animation in the list. I think it's because I used the on on the animation and not on the sprite, which is kind of annoying, if understandable. You'll probably need to create a single 'animationcomplete' listener on the sprite that changes which animation is next based on the animation that's just ended. 

Example:

(animation) => {
  if (animation.key == "left")
    this.player.anims.play("right", true);

 

[Icepig]

Thanks for your help. 

That works fine in most cases but will not work if the key needs to be repeated.  For example, if I wanted the user spin around when the bomb hits him.  So I want the user to complete the following animation "left"=>"right"=>"turn"=>"left"=>"right"=>"turn".

And If I use the "animationcomplete" listener, can someone show me an example of a clean way to remove that listener when I'm done with it?  I can not figure out how to use the .removeListener method properly.

Thanks again,

[Icepig]

Are there any creative ways to accomplish this?

 

Thanks,

[blackhawx]

Perhaps an alternative would be to chain multiple tween sequences together with the ability of changing up the  target value? (untested).   In the given example, the same target is given the entire time, but perhaps it is possible...

 http://labs.phaser.io/edit.html?src=src/tweens\timelines\simple timeline 1.js 
http://labs.phaser.io/edit.html?src=src/tweens\timelines\simple timeline 7.js
http://labs.phaser.io/edit.html?src=src/tweens\timelines\create timeline.js

http://labs.phaser.io/edit.html?src=src/tweens\callbacks.js | an oncomplete process for a tween

You could put it all in a custom function, and call that function whenever needed.

I apologize in advance if this is off from what you are achieving.

 

 

[Icepig]

Thanks for the quick reply blackhawx,

Unfortunately, multiple tween sequence won't work for what I'm trying to achieve.  What I'm trying to do is find a way to reuse animation sequences with out having to define an entire new sequence.  I find that doing so will greatly reduce complexity and centralizes the animation (Such that you only need to update a single animation sequence instead of doing the same update everywhere the same sequence is used).  Very useful when working with sprite sheets.

Thanks,

[Icepig]

I'm new to using Phaser so if what I'm asking is impossible or if I should look into doing it external to Phaser then please let me know.

 

Thank you,

[samme]

On 10/16/2018 at 8:32 AM, Icepig said:

So I want the user to complete the following animation "left"=>"right"=>"turn"=>"left"=>"right"=>"turn".

Can you just make one long animation from all the frames?

[samme]

Or use delayedPlay to schedule them in a sequence.

[Icepig]

Thanks for your anser samme.  That's not really the same.  The delayedPlay looks interesting but is not the same also.  If I made a change in one animation, I would have to go back to all my other sequence that use that one animation and make the same change.

On sammy's note, I have build a helper function to combine animation frames in typescript.

public static createChain( id:string, scene: Phaser.Scene, KeyList: Array<string>, frameRate?:number, repeat?:number ): Promise<any> {
  return new Promise((resolve) => {
    if(KeyList) {
      let frames = [];
      for(let i = 0; i < KeyList.length; i++) {
        let entry = scene.anims.get(KeyList[i])
        for(let ii = 0; ii < entry.frames.length; ii++ ) {
          frames.push({ key: entry.frames[ii].textureKey, frame: entry.frames[ii].textureFrame });
        }
      }
      scene.anims.create({
        key: id,
        frames: frames,
        frameRate: frameRate ? frameRate : 10,
        repeat: repeat ? repeat : 1
      });
    } else {
      resolve();
    }
  });
}

Used like:

PhaserHelper.createChain( "theEnd", this, ["left", "right", "turn", "left", "right", "turn"], 10, 1 );

Thanks for all your help and time.  Seems that there is nothing build into Phaser 3 to do this, but that's not to say that I can't try to do it outside of Phaser. 

 

Cheers,

Edited October 24, 2018 by samme
code format

[Icepig]

Sorry about the formatting, can't seem to format the code properly.

[samme]

Animation queue

[Icepig]

Nice, that's exactly what I'm looking for.  Cheers