Question

我正在使用带有JSON文件的PreloadJS按需为每个sprite单独加载spritesheets。现在，我想将ColorMatrixFilter应用于Sprites或Spritesheet。

经过一些研究后，我发现了Lanny http://jsfiddle.net/lannymcnie/NRH5X/的这个片段，其中JSON SpriteSheet定义在Javascript代码中，并且在SpriteSheet创建中使用了对Bitmap cacheCanvas [bmp.cacheCanvas]的引用。

现在，如果我使用JSON文件来定义SpriteSheet，我就无法引用Bitmap cacheCanvas。如果SpriteSheet类有一个可选参数来附加过滤器，那么它将是必要的，它必须执行以下操作，但也支持JSON文件加载：

var bmp = new createjs.Bitmap(<"Image Defined in JSON SpriteSheet file">);
bmp.filters = [new createjs.BlurFilter(10,10,1)];
bmp.cache(0,0,img.width,img.height);

var data2 = new createjs.SpriteSheet({
    "images": [bmp.cacheCanvas], // Note we are using the bitmap's cache
    "frames": {"height": 292, "width": 165},
    "animations": {"run": [0, 25, "run", 2]}
});

所以这样的事情会起作用：

var spriteSheet = loaderQueue.getResult(spriteSheetId);

var spriteSheetNewColor = spriteSheet.filter(new createjs.BlurFilter(10,10,1))

或者我可以获取SpriteSheet img以便我可以使用上述技术使用过滤器重新创建SpriteSheet吗？

Answer 1

您可以直接操作images数组，并注入过滤/缓存的图像。它需要您预加载图像，过滤它们，然后替换SpriteSheet中的图像。当加载数组中的所有图像时，您也可以从SpriteSheet中获取complete事件，并在那里完成工作：

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

如果使用更改图像尺寸的滤镜（如模糊），此方法可能会变得混乱。您可以在我的演示中看到您引用模糊图像因此而偏移。

它不是一个优雅的解决方案，但你的建议是一个非常具体的请求，不太可能被添加到SpriteSheet。更好的方法是自己扩展SpriteSheet并添加此行为，可能在_handleImageLoad方法中。

希望有所帮助！

EaselJS Spritesheet和Bitmap ColorFilterMatrix

1 个答案: