如何对 Phaser.js 中的精灵制作 'Flash' 效果？

Question

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

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

解决方案 1：

我试过补间精灵的色调参数，像这样：

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

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

解决方案 2：

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

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 */

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

所以，如果有任何指导，我们将不胜感激。

Answer 1

您可以在 Sprite 上使用 ColorMatrixFilter。在 Phaser 中，您可能需要先手动加载 PIXI 脚本：

game.load.script('filter', 'js/filters/ColorMatrixFilter.js');

白色用这个：

var filter = new PIXI.ColorMatrixFilter();
filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1];
this.game.filter = [filter];

如果您想要平滑过渡，也可以对矩阵值进行补间。

Answer 2

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

您也可以调整为 'near white' 颜色 - 只有 0xffffff 精确地 重置色调。但是非常接近该值的值仍然可以设置，并且可能会得到所需的结果。

如果您使用的是 WebGL，我仍会使用具有 'as near as white as possible' 颜色值的色调并对它们进行补间。您可以通过从 Phaser dev 分支复制那部分更改的代码来为自己禁用色调缓存。

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

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

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

如何对 Phaser.js 中的精灵制作 'Flash' 效果？

How to make a 'Flash' effect over a Sprite in Phaser.js?

javascript

phaser-framework

pixi.js

解决方案 1：

解决方案 2：