Search code examples
javascriptgoogle-chromehtml5-canvaseaseljscreatejs

EaselJS colorMatrixFilter won't work on Chrome


I'm trying to use EaselJS's colorMatrixFilter on a Bitmap object, cache and then use it as the source image for a SpriteSheet object, but it won't work on Chrome. It works on Firefox and Safari through.

Chrome (Should be a blue fox):

an orange fox

Safari:

a blue fox

Here's my code:

lr.SpriteSheet = function (sSprite, nFrameWidth, nFrameHeight, oAnimations) {
    var _cacheBmp = new createjs.Bitmap(sSprite);

    return {
        Sprite: function (oArgs) {
            oArgs = oArgs || {};

            _cacheBmp.filters = oArgs.aFilters || [];
            _cacheBmp.cache(0, 0, _cacheBmp.image.width, _cacheBmp.image.height);
            var spriteSheet = new createjs.SpriteSheet({
                images: [_cacheBmp.cacheCanvas],
                frames: {width: nFrameWidth, height: nFrameHeight},
                animations: oAnimations
            });
            this.self = new createjs.Sprite(spriteSheet, oArgs.sAction || 0);
            this.self.set({
                x: (oArgs.nX || 0) * lr.GRID,
                y: (oArgs.nY || 0) * lr.GRID
            }).set(oArgs.oProps || {});
            lr.scene.addChild(this.self);
        }
    }
}

var fox = new lr.SpriteSheet("Graphics/Fox.png", 30, 40, {
        stand: 0,
        run: {
            frames: [0,0,0,0,1,1,2,3,3,4,4,4,4,3,3,2,1,1,0,0,0,0,5,5,6,7,7,8,8,8,8,7,7,6,5,5], // Easing
            next: true
        },
        jump: [10, 14, "neutral", 0.5],
        runJump: [5, 7, "split", 0.666],
        neutral: 15,
        split: 8,
        fall: 16,
        land: [16, 20, "stand", 0.5],
        almostFalling: [9, 9, true, 0.1]
    });

var matrix = new createjs.ColorMatrix().adjustColor(-25, 10, -25, -180);
var player = new fox.Sprite({
    nX: 1, nY: 1,
    oProps: {regX: 7, regY: 6},
    nWidth: 11, nHeight: 30,
    aFilters: [new createjs.ColorMatrixFilter(matrix)],
    sAction: "run",
    aPush: [lr.movable, lr.collidable]
});

I've tried checking _cacheBmp.filters value and it returns [colorMatrixFilter], which I think is correct. Can someone help me?


Solution

  • Looks like I'm going to answer my own question again. It was a silly mistake anyway...

    After lots of time spent trying to solve a non-existing problem of cross-origin security, I discovered that the problem was occurring because I was testing locally (file:///), and filters or caching don't work in this case for some browsers.

    If you are having the exact same problem, just go localhost.