how to do actions in sequence

[ewan]

I would like to do something like this: 

this.hero.walk(15);
this.hero.turn("right");
this.hero.walk(10);

I tried this but it only works for one action:

 this.hero.body.onMoveComplete.add(this.turnRight, this);  

and this is my work function (typescript)

 walk(step){
      	let d=this.direction;
      	let direction=Phaser.ANGLE_DOWN;
      	let movement=null;
      //...
//....
      	this.body.moveFrom(step*(this.speed), this.speed, direction);
      	// movement.stop();


      }	 

this is my turn function (typescript)

turn(direction){
	  	this.animations.stop();
      this.direction=direction;
	  	this.loadTexture(Assets.KnightManager.getAsset("walk",direction,"img"));

	  }

 

https://github.com/NVME/phaser_DragonSlayer 

[mattstyles]

The way chained transitions and animations used to be handled in CSS (many still do it like this) is that you'd fire a transition and wait for the transitionend event before firing the next one, which is what it looks like you want to do, however, there are 2 pretty big issues with this approach:

* It's inconsistent and missed events can be a killer

* It's a pain to set up and manage, its fiddly and error prone and hard to abstract cross-platform

As you're not dealing with a CSS transition/animation you probably don't need to worry about missing events, the only possible case where this would happen is either forgetting to set movecomplete/end handlers or setting them too late, given that you probably set them on the same tick this isn't a real problem.

The 2nd point above is still a problem for you though.

Listening for end events is good when the end is unexpected or can not be predicted, however, this is rarely the case with transitions or animations, you say you want them to last 300ms and that's all there is to it, timing is usually more important than absolute correctness.

There is a simpler approach:

Create an array that describes each animation in your chain and fire them all off with delays:

var chain = [
  {type: 'move', duration: 200, delay: 0},
  {type: 'turnRight', duration: 100, delay: 200},
  {type: 'move', duration: 200, delay: 300}
]

function doMove (type, duration, delay) {
  return setTimeout(() => {
    // animation code
  }, delay)
}

function performMove (chain) {
  var cancels = chain.map(doMove)
  return function cancel () {
    cancels.forEach(clearTimeout)
  }
}

Something like the above (might not be completely correct!) queues up a load of timeouts based on the chain passed in to it, additionally passing back a function which can be invoked to cancel all timeouts, you might want to improve this to cancel or change in-flight animations, or change it to be promise or async/await based (note at the moment that it does not track expired animations and would work because clearTimeout(expiredTimeout) is valid, with promises or generators or some other mechanism that might be true). You would probably want to create a mechanism that counts up individual movement durations and applies delays to later movements automatically, saving you the trouble of adding them to the chain specification of the movement.