Phaser 3 Tweens 变化的变量值答案

【问题标题】：Phaser 3 Tweens with changing variable valuePhaser 3 Tweens 变化的变量值
【发布时间】：2022-01-13 23:04:48
【问题描述】：

我正在使用 Phaser 3 构建一个 HTML5 游戏。我有一个计数器补间，当单击游戏对象时满足某个条件时，我将其添加到场景中。（这是一个文本值，如果卡片的最大属性值低于玩家的该属性值，则会闪烁红色。）

首先，我根据点击的卡片设置变量：

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
}

一旦我得到我想要的值（在这种情况下，最大怀疑是相关变量），然后如果满足条件，我就会对其应用闪烁的彩色动画。

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);
    }
});

问题是，如果我在卡片 1 上的动画完成之前点击卡片 1，然后点击卡片 2，卡片 1 文本的动画将在卡片 2 上恢复。这是有道理的，因为变量“max_suspicion” " 被重新分配给卡片 2 上的文本对象，并且补间的 onUpdate 函数正在继续进行。

我该怎么做：

1) 防止它被重新分配（例如，将 max_suspicion 设置为在补间范围内永久表示卡片 1 的文本对象）

或

2) 将卡片 1 的值重置为其原始颜色并过早结束补间以使其不会延续到卡片 2？

我很乐意根据需要澄清任何事情。非常感谢您对此提供的任何帮助！

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

这取决于您的代码，最好的解决方案是什么。 （当然还有想要的游戏玩法）
我个人会将 tween 放在一个变量中：

  this.mytween = scene.tweens.addCounter(...);

并在我做任何其他事情之前停止点击它

  if(this.mytween) {// just checking if it exists
      this.mytween.stop();
      ... // may be reset the color 
  }

【讨论】：