Question

在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);
});

Answer 1

目前，每帧更新缓存是最好的（也是最简单的选项）。尽管如此，它并不适合表现。

你也可以过滤＆amp;缓存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;
    }
}

希望有所帮助！

将滤镜应用于EaselJS中的动画精灵

1 个答案: