0

我使用带有 JSON 文件的 PreloadJS 为每个精灵单独加载精灵表。现在，我想将 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？

4

1 回答 1

1

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

// 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方法中。

希望有帮助！

于 2018-01-30T18:22:26.963 回答