Tween to modify different fields of an object

[afcruzs]

Hi, currently I am doing an animation for the appearence of an sprite. That requires to modify the scale of the sprite and its coordinates at the same time. But with the current tween API it seems like only one field can be modified at once. I've researched a bit and I came up with this:
 

var tween = this.game.add.tween(sprite.scale).
        to( { x: prevWidth * 1.5, y : prevHeigth * 1.5 }, 200, "Linear", false ).
        to( { x: prevWidth, y : prevHeigth }, 200, "Linear", false );      
      
      var tween2 = this.game.add.tween(sprite).
        to( { x : scX , y : scY }, 200, "Linear", false ).
        to( { x : orX, y : orY }, 200, "Linear", false );
      
      tween.start();
      tween2.start();

It works reasonable, but both tweens run concurrently, which I think it maybe a problem with more complex animations. Is there a better way to do this and avoid concurrency issues?

 

Thanks.

[rroylance]

That's the expected way to do it.

 

If you really want to only use a single tween you could defineProperty anything you need;

Object.defineProperty(sprite, 'scaleX', {
	get: function() {
		return this.scale.x;
	},
	set: function(value) {
		this.scale.x = value;
	}
});

Object.defineProperty(sprite, 'scaleY', {
	get: function() {
		return this.scale.y;
	},
	set: function(value) {
		this.scale.y = value;
	}
});

var tween = this.game.add.tween(sprite)
	.to( { x: prevWidth * 1.5, y : prevHeigth * 1.5, scaleX: scX, scaleY: scY }, 200, "Linear", false)
	.to( { x: prevWidth, y : prevHeigth, scaleX: orX, scaleY: orY  }, 200, "Linear", false );

tween.start();

 

 

[afcruzs]

Thank you UncleAcid, that's exactly what I was looking for.