EaselJS Spritesheet和位图ColorFilterMatrix [英] EaselJS Spritesheet and Bitmap ColorFilterMatrix
问题描述
我使用带有JSON文件的PreloadJS根据需要分别为每个精灵加载精灵表。现在,我想将ColorMatrixFilter应用于Sprites或Spritesheet。
I am loading spritesheets individually for each sprite on demand using PreloadJS with JSON files. Now, I would like to apply a ColorMatrixFilter to the Sprites or Spritesheet.
经过一番研究,我发现了Lanny的这段代码 http ://jsfiddle.net/lannymcnie/NRH5X/ ,其中JSON SpriteSheet定义位于Javascript代码中,并且在SpriteSheet创建中使用了对位图cacheCanvas [bmp.cacheCanvas]的引用。
After some research I found this snippet from Lanny http://jsfiddle.net/lannymcnie/NRH5X/ where the JSON SpriteSheet definition is within the Javascript code and a reference to the Bitmap cacheCanvas [bmp.cacheCanvas] is used to in the SpriteSheet creation.
现在,如果我使用JSON文件定义SpriteSheet,则无法引用位图cacheCanvas。如果SpriteSheet类具有一个可选参数来附加一个过滤器,那么它将很重要,它不仅可以执行以下操作,而且还支持JSON文件加载:
Now, if I'm using JSON files to define the SpriteSheet, I can't reference the Bitmap cacheCanvas. It would be nice if the SpriteSheet class had an optional parameter to attach a filter so that it would essential do the following but also supporting JSON file loading:
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]}
});
这样类似的东西就可以工作:
So that something like this would work:
var spriteSheet = loaderQueue.getResult(spriteSheetId);
var spriteSheetNewColor = spriteSheet.filter(new createjs.BlurFilter(10,10,1))
或者我可以获取SpriteSheet img,以便使用上述技术使用过滤器重新创建SpriteSheet吗?
Or can I get the SpriteSheet img so that I can recreate the SpriteSheet using the filter using the above technique?
推荐答案
您可以直接操纵 images
数组,并注入经过过滤/缓存的图像。它要求您预加载图像,对其进行过滤,然后在SpriteSheet中替换图像。加载数组中的所有图像后,您还可以从SpriteSheet获取 complete
事件,并在那里进行工作:
You can directly manipulate the images
array, and inject a filtered/cached image. It requires you to preload the images, filter them, and then replace the image in the SpriteSheet. You can also get a complete
event from the SpriteSheet when all images in the array are loaded, and do the work there:
// pseudocode
spritesheet.on("complete", function(e) {
for (var i=0; i<spritesheet._images.length; i++) {
// Filter Code Here
// Then
spritesheet.images[i] = filteredBitmap.cacheCanvas;
}
}
如果您使用更改图像尺寸(例如模糊)的滤镜,这种方法可能会变得混乱。
This approach could get messy if you use a filter that changes the image dimensions (like blur). You can see in my demo that you referenced that the blurred image gets offset because of this.
这不是一个优雅的解决方案,但是您的建议是一个非常具体的请求,不太可能添加到SpriteSheet中更好的方法是自己扩展SpriteSheet并添加这种行为,也许可以使用 _handleImageLoad
方法。
Its not an elegant solution, but your suggestion is a pretty specific request, and unlikely to be added to SpriteSheet. A better approach is to extend SpriteSheet yourself and add this behaviour, maybe in the _handleImageLoad
method.
希望帮助!
这篇关于EaselJS Spritesheet和位图ColorFilterMatrix的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!