Changing value of tween property for new target

Phaser 3
1 
// I create a tween for some initial target but I intend to reuse it
let myTween = this.tweens.add({targets:firstObject,
                              paused:true,
                              y: firstObject.y+20,
                              duration:100,
                              persist:true,
                            });
                            
// then in some other part of the code I play that tween for another target
myTween.targets=[secondObject];
myTween.play(); 

// My problem is I don't know how to change the wanted value of Y 
// from firstObject.y+20 to secondObject.y+20!
// Can this be done?
2 
function addTween(Object, Value) {
    let result = this.tweens.add({
        targets: Object,
        paused: true,
        y: Object.y + Value,
        duration: 100,
        persist: true,
    });
    return result;
}

firstObject.tween = addTween(firstObject, 20);
secondObject.tween = addTween(secondObject, 20);

firstObject.tween.play(); 
secondObject.tween.play();
3

Your solution creates two tweens, one for each target. My scenario requires creating a tween for one target and then reusing that tween for a second target.

I can change the target of an already created tween. Whatā€™s missing is changing the y value of an already created tween.

4

OK, tween has an update method that changes the value of the specified key.
myTween.updateTo ("y", 200, false)
https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Tweens.Tween-updateTo

5

Thanks Qugurun.

Iā€™ve tried the solution. I was hoping I can call the ā€œupdateToā€ method in the callbacks for the ā€˜startā€™ or ā€˜updateā€™ events but it didnā€™t work. It works only if I call it in the update method of the scene. This solves the problem but it seems more like a hack than a canonical solution so Iā€™m not 100% satisfied with this.

Let me rephrase my original question: I have a scene with 1000 platforms and a character that jumps on them. Every platform must shake after the character jumps on it. Every platform shakes the same way. So my immediate thought was to reuse a tween for all the platforms but I donā€™t know how to do it in a simple way.(Currently I create a new tween for each jump but it seems unnecessary considering that every created tween is identical, only with a different target and y value.)

6

You need to change the code.

let myTween = this.tweens.add({
	targets:firstObject,
	paused:true,
	//y: firstObject.y+20,
	y: '+=20',
	duration:100,
	persist:true,
});
7

Thereā€™s no difference, using y: '+=20' works the same way as y: firstObject.y+20. The end and start values remain the same for every target.

Is it possible to change the start and end values of a tween, without using updateTo method ?

8

If you write like this, then you will just need to change the target and thatā€™s it, any target will decrease from its current y to y+20. this is exactly what you need.

9

I tested this and doesnā€™t work.
What happens: Any target after the first, goes to the y coordinate of the first target and then tweens to first target y +20. So changing the target doesnā€™t change the stard/end value.

10

Iā€™m sorry, I tested it again and saw what youā€™re talking about.

11

I would just use a new tween.

12

Currently I am creating a new tween but I was looking for an alternative.

13 
this.myImage1 = this.add.image(300, 100, "picture.png");
this.myImage2 = this.add.image(200, 300, "picture.png");

let obj = this.myImage1;
let tween = this.tweens.add({
	targets: obj,
	y: "+=20",
	paused: true,
	duration: 500,
	persist: true,
	yoyo: true,
	onComplete: () => {
		obj = (obj === this.myImage1) ? this.myImage2 : this.myImage1;
		
		tween.targets = [obj];
		tween.data[0].start = obj.y;
		tween.play();
	}
});
tween.play();

I found a solution, you need to reset the starting position additionally:
tween.data[0].start = obj.y

GIF 09.07.2024 21-17-05

2 Likes
14

Additionally, Y can be changed in this way.

y: ()=>{
    return Phaser.Math.Between(10, 200);
}

or

y: (target)=>{
    return target.y + 20;
}
15

In practice I canā€™t know in advance on what platform the player will jump. So in onComplete callback I canā€™t switch to the next obj because I donā€™t know which one will be. Also itā€™s unmanageable for 1000 objects.

16

In onComplete, I just gave an example of how to correctly change the object that the animation will work with, how you will implement this in your project depends only on you.

You need to use these three lines of code in order to assign an object and start the animation.

tween.targets = [obj];
tween.data[0].start = obj.y;
tween.play();
17

Yes, youā€™re right, this works. Thanks Qugurun !

1 Like