EaselJS Spritesheet 和位图 ColorFilterMatrix

Question

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

经过一些研究，我从 Lanny http://jsfiddle.net/lannymcnie/NRH5X/ 找到了这个片段，其中 JSON SpriteSheet 定义在 Javascript 代码中，并且引用了位图 cacheCanvas [bmp.cacheCanvas ]用于创建SpriteSheet。

现在，如果我使用 JSON 文件来定义 SpriteSheet，则无法引用位图 cacheCanvas。如果 SpriteSheet class 有一个可选参数来附加过滤器，这样它就必须执行以下操作但还支持 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数组，并注入一个filtered/cached图像。它需要您预加载图像，过滤它们，然后替换 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 和位图 ColorFilterMatrix

EaselJS Spritesheet and Bitmap ColorFilterMatrix

easeljs

preloadjs