在 EaselJS 中对动画 Sprite 应用过滤器答案

【问题标题】：Apply a Filter to an animated Sprite in EaselJS在 EaselJS 中对动画 Sprite 应用过滤器
【发布时间】：2018-09-03 19:00:29
【问题描述】：

在 EaselJS 中，我有一个 Sprite，它描绘了一个可以攻击（导致播放动画）并且可以中毒（导致单位通过 ColorFilter 变为绿色）的士兵。

但是，这些动作似乎彼此不兼容：在我应用ColorFilter 后，精灵不再可以动画。这是因为 Filter 要求缓存其目标，这使得 Sprite 无法动画。如果我删除下面的 animation.cache 调用，则动画会运行，但颜色过滤器无法应用。

我怎样才能对Sprite 应用过滤器，同时仍然允许它进行动画处理？我可以以某种方式将过滤器应用于底层 spritesheet 图像，而不是直接应用于Sprite 本身吗？每次我想打开和关闭过滤器时，是否需要创建一个新的Sprite？

我有一个fiddle demo，其相关代码如下：

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) { stage.update(event); }

var url = "...";
var spriteSheet = new createjs.SpriteSheet({
    images: [url],
    frames: { width:72, height:72 },
    animations: {
        attack:[1,6]
    }
});
var animation = new createjs.Sprite(spriteSheet);
stage.addChild(animation);

attackButton.addEventListener("click", function() {
    animation.gotoAndPlay("attack");
});

poisonButton.addEventListener("click", function() {
    animation.filters = [
        new createjs.ColorFilter(0.5,1,0.5,1,0,0,0,0)
    ];
    animation.cache(0,0,72,72);
});

【问题讨论】：

奇怪的是，它似乎在后台播放。如果你再次按下毒药，它会在另一帧上。
将缓存更新移动到更新周期，但不确定这对性能有何影响：jsfiddle.net/33k21h4d/21
@Caramiriel 出色的侦探工作！这听起来确实很糟糕，但我意识到我可以在只在动画更新时触发的change event listener 中做同样的事情。对于小提琴来说，没有区别，但对于我的游戏（单位将大部分时间花在屏幕上不积极地制作动画），区别是巨大的。重新缓存的成本可能是可以承受的。

标签： javascript easeljs

【解决方案1】：

目前，每帧更新缓存是最好的（也是最简单的选择）。不过，这对性能来说并不是很好。

您还可以过滤和缓存 spritesheet 本身，尽管它有点困难。我之前用this sample回答过这个问题两次：

这是一些伪代码：

spritesheet.on("complete", function(e) {
    for (var i=0; i<spritesheet._images.length; i++) {
        // Filter Code Here
        // Then
        spritesheet.images[i] = filteredBitmap.cacheCanvas;
    }
}

希望有帮助！

【讨论】：