javascript - 在 EaselJS 中将滤镜应用于动画 Sprite

Question

在 EaselJS 中，我有一个 Sprite 描绘了一个可以攻击的士兵(这会导致播放动画)并且可能会中毒(这会导致该单位通过 ColorFilter).

但是，这些 Action 似乎彼此不兼容:在我应用 ColorFilter 之后， Sprite 无法再进行动画处理。这是因为 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);
});

Answer 1

目前，每帧更新缓存是最好的(也是最简单的选择)。虽然它对性能来说不是很好。

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

• Cache SpriteSheets in EaselJS
• EaselJS Spritesheet and Bitmap ColorFilterMatrix

这是一些伪代码:

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

希望对您有所帮助!