Trouble chaining animations in a sprite

[jojomanzo]

I have a bit of code that cycles through my TILED file to find any object I declared as an NPC. I am not sure if this is important, but I wanted to mention how it found the location of the sprite. (And it is designed to work with multiple sprites, but the code fails with a single sprite and multiple sprites)

 

 result.forEach(function(element){
      this.createFromTiledObjectMove(element, this.doors);
	  //alert (this.doors);
    }, this);

The code above works correctly again it is just for reference on how the next part of the code is found.

The code below was INTENDED to have a character mill around. Starts walking right. Stops. Faces forward (with a tiny movement), Stops, Faces left and walks, Stops, Face right and repeat pattern.

Hopefully it is easy to read, and I could probably clean it up. The MOTION is fine. He goes back and forth, stopping at each end point. But the animations do not sync correctly. I even tried stopping ALL animations as seen in the code below but eventually he gets stuck in one animation, even though the tween movement continues.  Any ideas?

 

  //create a sprite from an object WITH ANIMATION!
  createFromTiledObjectMove: function(element, group) {
    var sprite = group.create(element.x, element.y, element.properties.sprite);
	var tweenNPC = this.add.tween(sprite);

        //I eliminated the randomness for testing - it did work, but same problem

	//var randomValue = this.rnd.integerInRange(200, 500);
	//var randomTime = this.rnd.integerInRange(1000, 3000);
        //var keepRnd = randomValue;

	var randomTime = 1000;
	var keepRnd = 40; 
      
     //copy all properties to the sprite
      Object.keys(element.properties).forEach(function(key){
        sprite[key] = element.properties[key];
				
	
	
	
	sprite.frame = 6;
	sprite.animations.add('down', [6, 7, 8], 10, true);
	sprite.animations.add('right', [3, 4, 5], 10, true);
	sprite.animations.add('left', [9, 10, 11], 10, true);
	sprite.animations.play('right');
	
	
	tweenNPC.to({ x: (element.x + keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false);
	
	tweenNPC.onComplete.add(StopRightandChat, this);
    
	
function StopRightandChat() {
  
	sprite.animations.stop('down');
	sprite.animations.stop('left');
	sprite.animations.stop('right');
	sprite.animations.play('down');
        tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false);
	tweenNPC.onComplete.add(goLeft, this);
}	
	
function goLeft() {
        sprite.animations.stop('down');
	sprite.animations.stop('left');
	sprite.animations.stop('right');
	
	sprite.animations.play('left');
	tweenNPC.to({ x: (element.x - keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false);
	tweenNPC.onComplete.add(StopLeftandChat, this);
}

function StopLeftandChat() {
        sprite.animations.stop('down');
	sprite.animations.stop('left');
	sprite.animations.stop('right');
	
	sprite.animations.play('down');
	tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false);
        tweenNPC.onComplete.add(goRight, this);
}

function goRight() {
        sprite.animations.stop('down');
	sprite.animations.stop('left');
	sprite.animations.stop('right');
	
	sprite.animations.play('right');
	tweenNPC.to({ x: (element.x + keepRnd ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false);
	tweenNPC.onComplete.add(StopRightandChat, this);
}



	
	
	
	
    
	

		
		
      });
  },

 

[samme]

I'm not sure but the "complete" events may be stacking up: try changing all onComplete.add to onComplete.addOnce.

Also try logging, e.g., 

function StopRightandChat() {
  // …
  console.log('StopRightandChat:', sprite.animations.currentAnim.name);
}

// etc.

 

[jojomanzo]

OK wow. Yes it is definitely stacking.  I added an alert before you replied and it was firing the alert 3 or 4 times in a single function -- even though I would think it would only alert once (however I am very new to Phaser)

So I added your log suggestion. And its a world of unknown. I pasted it below... I assume the fact that it has multiple js+s means it is stacking?

Anyway.  Perhaps I am doing this wrong. What I want to do seems like it should be common. 
To simplify:I want my character to walk in a box. Coordinates (0,0; 0,100; 100,100;  100,0)  For each direction, I want to play the correct animation he is facing.

I saw some phaser examples of the box tween using a single tween.to with an array of points... but it didn't account for changing animation. SO I assumed I needed to break each point into a new tween.Is there a better way?  Can phaser tell which way the character is moving and swap animations based on that? This is a basic patrol bad guy patrol but all my search results for patrol style movement only cover movement -- so way to PAUSE and SWAP animation.

 

 

 

Phaser.Tween.to cannot be called after Tween.start
to @ phaser.min.js:18
(anonymous) @ Game.js:169
createFromTiledObjectMove @ Game.js:151
(anonymous) @ Game.js:90
createDoors @ Game.js:89
create @ Game.js:29
loadComplete @ phaser.min.js:11
preUpdate @ phaser.min.js:11
updateLogic @ phaser.min.js:13
update @ phaser.min.js:13
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
Game.js:178 StopRightandChat: right
Game.js:192 StopRightandChat: down
Game.js:178 StopRightandChat: down
Game.js:192 StopRightandChat: down
Game.js:178 StopRightandChat: down
Game.js:192 StopRightandChat: down
Game.js:178 StopRightandChat: down
Game.js:192 StopRightandChat: down
Game.js:178 StopRightandChat: down
Game.js:192 StopRightandChat: down
Game.js:197 goLeft: down
Game.js:209 goLeft: left
Game.js:197 goLeft: left
phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start
to @ phaser.min.js:18
goLeft @ Game.js:204
execute @ phaser.min.js:11
dispatch @ phaser.min.js:11
update @ phaser.min.js:18
update @ phaser.min.js:18
updateLogic @ phaser.min.js:13
update @ phaser.min.js:13
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
Game.js:209 goLeft: left
Game.js:197 goLeft: left
phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start
to @ phaser.min.js:18
goLeft @ Game.js:204
execute @ phaser.min.js:11
dispatch @ phaser.min.js:11
update @ phaser.min.js:18
update @ phaser.min.js:18
updateLogic @ phaser.min.js:13
update @ phaser.min.js:13
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
Game.js:209 goLeft: left
Game.js:197 goLeft: left
phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start
to @ phaser.min.js:18
goLeft @ Game.js:204
execute @ phaser.min.js:11
dispatch @ phaser.min.js:11
update @ phaser.min.js:18
update @ phaser.min.js:18
updateLogic @ phaser.min.js:13
update @ phaser.min.js:13
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
Game.js:209 goLeft: left
Game.js:197 goLeft: left
phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start
to @ phaser.min.js:18
goLeft @ Game.js:204
execute @ phaser.min.js:11
dispatch @ phaser.min.js:11
update @ phaser.min.js:18
update @ phaser.min.js:18
updateLogic @ phaser.min.js:13
update @ phaser.min.js:13
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
Game.js:209 goLeft: left

 

[jojomanzo]

I changed code to below... so that I would delete the pending flag - but it is still taking extra movement tweens. It should only go 1000 right, 5left, back to start, 5left, repeat. But the guy is flying back and forth and all timing is sped up.

I am calling it in this order

 

STOP

DELETE PENDING

CREATE NEW TWEEN

CALL ADDONCE

CALL START

 

Should I change that order?
 

tweenNPC.to({ x: (element.x + keepRnd) }, randomTime, "Sine.easeInOut", false, 1000, 0, false);
		tweenNPC.onComplete.addOnce(StopRightandChat, this);
	    tweenNPC.start();
	
	
	
function StopRightandChat() {
	console.log('StopRightandChat:', sprite.animations.currentAnim.name);
    
	tweenNPC.stop();
	tweenNPC.pendingDelete = false;
	alert (element.x);
	tweenNPC.to({ x: (element.x + 5 + keepRnd ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false);
		tweenNPC.onComplete.addOnce(goLeft, this);		
		tweenNPC.start();
		
	console.log('StopRightandChat:', sprite.animations.currentAnim.name);
		
}	
	
	function goLeft() {
		console.log('goLeft:', sprite.animations.currentAnim.name);
   
	
	tweenNPC.stop();
	tweenNPC.pendingDelete = false;
	alert (element.x);		
	tweenNPC.to({ x: element.x  }, randomTime, "Sine.easeInOut", false, 1000, 0, false);
		
			tweenNPC.onComplete.addOnce(StopLeftandChat, this);
			tweenNPC.start();
		
		console.log('goLeft:', sprite.animations.currentAnim.name);
}

	function StopLeftandChat() {
    
	tweenNPC.stop();
	tweenNPC.pendingDelete = false;
	tweenNPC.to({ x: (element.x + 5 ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false);
			tweenNPC.onComplete.addOnce(goRight, this);
			
			tweenNPC.start();
		
}

		function goRight() {
   
	tweenNPC.stop();
	tweenNPC.pendingDelete = false;
			tweenNPC.to({ x: (element.x + keepRnd ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false);
			
		tweenNPC.onComplete.addOnce(StopRightandChat, this);
			tweenNPC.start();
		
}

 

[samme]

5 hours ago, jojomanzo said:

I want my character to walk in a box. Coordinates (0,0; 0,100; 100,100;  100,0)  For each direction, I want to play the correct animation he is facing.

I think there should be a way, I'll try…

[samme]

 

[jojomanzo]

samme! Yes, genius - DeltaX/Y is it and so clean.  I am going to plug that into my code!

[jojomanzo]

Got it

[jojomanzo]

My code uses "this" so it took a bit of figuring out what that meant, but I finally grasp it.

 

I got the code to work for a single instance of a playerA... now I need to see if I can do it for multiples ! THANKS

[jojomanzo]

OK, so it is perfect when I can define a single named player.

However, I am using a TILED json file to pull in multiple instances of objects named player.  Since the sprite and the tween are only defined during the loop, they can't be referenced from the update to check on movement.  OR do they become an array of sprites / tweenNPC and I can do another loop check their movement delta in update.

Again your code is perfect - can it be applied to dynamically generated sprites?

  //create a sprite from an object WITH ANIMATION!
  createFromTiledObjectMove: function(element, group) {
   // this.playerA = this.game.add.sprite(result[0].x, result[0].y, 'walking');
   // the code below find all objects named NPC and then places them in the map and makes them move in a box
    var sprite = group.create(element.x, element.y, element.properties.sprite);
	
	//var tweenA = this.add.tween(this.playerA);
	var tweenNPC = this.add.tween(sprite);
		var randomTime = 1000;
	var keepRnd = 40; 
      //copy all properties to the sprite
      Object.keys(element.properties).forEach(function(key){
        sprite[key] = element.properties[key];
		//alert (sprite);
		
		
		
	
	
	sprite.animations.add('walking');
	
	 
	sprite.animations.add('down', [6, 7, 8], 10, true);
	sprite.animations.add('right', [3, 4, 5], 10, true);
	sprite.animations.add('left', [9, 10, 11], 10, true);
	 
  tweenNPC.to({ x: [(element.x + 50),(element.x + 50),(element.x ),(element.x )], y: [(element.y ),(element.y + 50),(element.y + 50),(element.y )] }, 2000, "Sine.easeInOut", true, 1000, -1, false);

//this works fine, all guys start moving.

	

	




		
		
      });
  },
  update: function() {
    //collision
    this.game.physics.arcade.collide(this.player, this.blockedLayer);
    this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this);
    this.game.physics.arcade.overlap(this.player, this.doors, this.enterDoor, null, this);

    //player movement
  
  
    var animations = this.playerA.animations;
  
   //var animationsX = this.sprite.animations;
 //var.animationsXX = sprite.animations;

//clearly the two lines above CAN'T work because they can no longer be called "sprite" outside of the creation loop... so how can I find them to check for delta change?
    
var deltaX = this.playerA.deltaX;
  var deltaY = this.playerA.deltaY;
  
 // if      (deltaX > 0) alert('right');
  
  
if      (deltaX > 0) animations.play('right');
  else if (deltaX < 0) animations.play('left');
  else if (deltaY > 0) animations.play('down');
  else if (deltaY < 0) animations.play('down');
  else                 animations.stop();