Icepig Posted October 15, 2018 Share Posted October 15, 2018 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 Link to comment Share on other sites More sharing options...
GreenCloversGuy Posted October 15, 2018 Share Posted October 15, 2018 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 and localtoast_zader 1 1 Link to comment Share on other sites More sharing options...
Icepig Posted October 16, 2018 Author Share Posted October 16, 2018 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, Link to comment Share on other sites More sharing options...
Icepig Posted October 18, 2018 Author Share Posted October 18, 2018 Are there any creative ways to accomplish this? Thanks, Link to comment Share on other sites More sharing options...
blackhawx Posted October 18, 2018 Share Posted October 18, 2018 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 1 Link to comment Share on other sites More sharing options...
Icepig Posted October 18, 2018 Author Share Posted October 18, 2018 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, Link to comment Share on other sites More sharing options...
Icepig Posted October 23, 2018 Author Share Posted October 23, 2018 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, Link to comment Share on other sites More sharing options...
samme Posted October 23, 2018 Share Posted October 23, 2018 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? Icepig and localtoast_zader 1 1 Link to comment Share on other sites More sharing options...
samme Posted October 23, 2018 Share Posted October 23, 2018 Or use delayedPlay to schedule them in a sequence. blackhawx and Icepig 1 1 Link to comment Share on other sites More sharing options...
Icepig Posted October 24, 2018 Author Share Posted October 24, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Icepig Posted October 24, 2018 Author Share Posted October 24, 2018 Sorry about the formatting, can't seem to format the code properly. Link to comment Share on other sites More sharing options...
samme Posted October 24, 2018 Share Posted October 24, 2018 Animation queue blackhawx, Icepig and GreenCloversGuy 2 1 Link to comment Share on other sites More sharing options...
Icepig Posted October 24, 2018 Author Share Posted October 24, 2018 Nice, that's exactly what I'm looking for. Cheers Link to comment Share on other sites More sharing options...
Recommended Posts