I’m building an HTML5 game with Phaser 3. I have a counter tween that I add to the scene upon a certain if condition being met on click of a game object. (It is a text value that flashes red if the card’s maximum stat value is lower than the player’s value of that stat.)
First, I set the variable based on which card was clicked:
if (this == action1_card) {
action = action1
energy_cost = action1_energy_cost
max_suspicion = action1_suspicion_threshold
selected_card = action1_card_selected
} else if (this == action2_card) {
action = action2
energy_cost = action2_energy_cost
max_suspicion = action2_suspicion_threshold
selected_card = action2_card_selected
}
Once I have the values I want (max suspicion is the relevant variable in this case), I then apply the flashing color animation to it if the condition is met.
if (action.suspicion_threshold < game_data.player.stats.suspicion) {
t.tweens.addCounter({
from: 0,
to: 100,
duration: 250,
repeat: 1,
yoyo: true,
ease: Phaser.Math.Easing.Sine.InOut,
onUpdate: function(tween) {
const value = Math.floor(tween.getValue());
const colorObject = Phaser.Display.Color.Interpolate.ColorWithColor(
Phaser.Display.Color.ValueToColor('#000000'),
Phaser.Display.Color.ValueToColor('#FF0000'),
100,
value
)
const color = Phaser.Display.Color.RGBToString(colorObject.r, colorObject.g, colorObject.b)
max_suspicion.setColor(color);
}
});
The issue is that, if I was to click on card 1 and then card 2 before the animation was finished on card 1, the animation from card 1’s text would resume on card 2. This makes sense, as the variable “max_suspicion” was reassigned to the text object on card 2, and the tween’s onUpdate function is continuing as it should.
How do I either:
1) prevent this from being reassigned (e.g. setting max_suspicion to permanently represent card 1’s text object for the scope of the tween)
or
2) reset card 1’s value to it’s original color and end the tween prematurely so it doesn’t carry over to card 2?
I will gladly clarify anything as needed. Thank you so much for any help on this!