EaselJS Spritesheet and Bitmap ColorFilterMatrix

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.

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.

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))

Or can I get the SpriteSheet img so that I can recreate the SpriteSheet using the filter using the above technique?

Solution

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.

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.

Hope that helps!