如何制作一个Flash'对Phaser.js中的Sprite有什么影响?

时间:2015-03-11 21:03:47

标签: javascript phaser-framework pixi.js

我正在Phaser中创建一个Rpg,我试图在Sprite上创建一个Flash效果 - 这意味着将Sprite全部变为白色,然后恢复原来的颜色 - 。

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

解决方案1:

我尝试补间精灵的tint参数,如下所示:

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

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

所以请,任何指导都将不胜感激。

2 个答案:

答案 0 :(得分:7)

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

此外,你可以着色到一个白色的'颜色 - 仅0xffffff 正好重置色调。但是非常接近的值仍然可以设置好并且可能具有期望的结果。

如果您正在使用WebGL,我仍然会使用尽可能接近白色的色调'颜色值和补间它们。您可以通过从Phaser dev分支复制已更改代码的那部分来为自己禁用色调缓存。

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

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

编辑:我也想到你也可以通过混合模式实现你所需要的,比如减轻。您复制了主精灵,在其上设置混合模式,将其显示在精灵顶部并淡出。这在Canvas中至少可以正常工作。

答案 1 :(得分: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];

如果想要平滑过渡,也可以补间矩阵值。