javascript - 如何在 Phaser.js 中对 Sprite 产生 'Flash' 效果？

Question

我正在 Phaser 中创建一个 Rpg，我正在尝试在 Sprite 上产生 Flash 效果 - 这意味着将 Sprite 暂时变为全白，然后恢复其原始颜色。

所以我的问题是:实现这种效果的最佳方式是什么？。到目前为止，我已经尝试了两种解决方案，但我遗漏了一些东西:

解决方案一:

我试过补间 Sprite 的色调参数，像这样:

this.game.add.tween(enemy).to({
        tint: 0xffffff,
    }, 100, Phaser.Easing.Exponential.Out, true, 0, 0, true);

但它不起作用，因为将色调设置为 0xffffff 与将其设置为默认颜色相同。

方案二:

我的第二个可能的解决方案是添加一个与 sprite 大小相同的白色方 block ，并使用实际的 sprite 作为正方形的 mask :

var flash = this.game.add.graphics(0, 0);
flash.beginFill(0xffffff);
flash.drawRect(enemy.x, enemy.y, enemy.width, enemy.height);
flash.endFill();
flash.mask = enemy  // enemy is my Sprite

/* .. code for tweening the flash */

这个解决方案的问题是掩码 needs to be a PIXI.Graphics object ;我正在使用 Sprite 对象。

因此，如有任何指导，我们将不胜感激。

Answer 1

在 Phaser 2.2.2 使用的 Pixi 版本中，有一个“tintCache”，它基本上对色调值进行舍入，然后缓存结果。这意味着您不能像尝试使用补间一样进行微妙的色调渐变。我们在 Phaser 2.3 中删除了它，因此从那时起它就可用了，但截至目前它仍在开发中。

您还可以将色调调成“接近白色”的颜色 - 只有 0xffffff 精确地 重置色调。但是非常接近该值的值仍然可以设置，并且可能会得到预期的结果。

如果您使用的是 WebGL，我仍然会使用“尽可能接近白色”颜色值的色调，并对它们进行补间。您可以通过从 Phaser dev 分支复制那部分更改的代码来为自己禁用色调缓存。

在 Canvas 模式下它很昂贵，因为它必须在每次更新时重新计算像素。

如果您需要担心 Canvas 的性能，那么老实说，我会创建一个与您的 sprite 相匹配的新 PNG，将其着色为全白色，并根据需要将其显示在主 sprite 的顶部，然后对其进行 alpha 输出。由于需要额外的 Assets ，它不太理想，但它肯定是 Canvas 模式下最快的。一切都取决于您的游戏是否可以接受。

编辑:我还想到，您也可以通过使用混合模式(例如变亮)来实现所需的效果。你会复制你的主 Sprite ，在它上面设置混合模式，将它显示在你的 Sprite 顶部并淡出。这至少在 Canvas 中可以正常工作。