如何在相位器.js中对精灵进行“闪光”效果

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

本文关键字：精灵 闪光 效果 js      更新时间：2023-09-26

我正在Phaser中创建一个RPG，我正在尝试在精灵上产生闪光效果 - 这意味着将精灵变成白色片刻，然后恢复其原始颜色 - 。

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

解决方案 1：

我尝试补间精灵的色调参数，如下所示：

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

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

解决方案 2：

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

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

此解决方案的问题在于掩码必须是 PIXI。图形对象;我正在使用精灵对象。

因此，请提供任何指导。

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

此外，您可以将色调着色为"近白色"颜色 - 只有0xffffff才能精确重置色调。但是非常接近该值的值仍然可以设置正常，并且可能会产生预期的结果。

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

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

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

编辑：我还想到，您也可以通过使用混合模式来实现所需的内容，例如减轻。您可以复制主精灵，在其上设置混合模式，将其显示在精灵的顶部，然后将其淡出。这至少在 Canvas 中工作正常。

您可以在精灵上使用 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];

如果需要平滑过渡，还可以补间矩阵值。

这个精灵闪光灯在 Phaser 3 中工作，但超时只是普通的 JavaScript。用自己的精灵替换怪物。

monster.setTint(0x000000);
            
setTimeout(()=> {
                monster.clearTint();
             }
             ,100);
相关文章：