[HTML5] How to implement desaturation

I’d like to restore a visual effect I had in AS3, desaturation: how can I apply it to a DisplayObject like a Sprite? And what if I wanted to apply it with a tween? Ok, maybe I just have to apply it on the onUpdate events.

I don’t know how to do this with openfl directly but you can do that with Starling Haxe quite easily with colormatrixfilter and adjustSaturation. And yes you can also tween it.

Not using Starling for these projects, just plain OpenFl.

There is a colormatrixfilter for OpenFl as well, I didn’t try it so I can’t say but it could be just as good.

Here you go.

Edit: if you wanted to do this with a tween, you could probably tween each of the nine values individually. Or you could make a class with a variable like this:

public var greyscaleAmount(default, set):Float;

private function set_greyscaleAmount(value:Float):Float {
    Greyscale.applyPartialGreyscale(this, value);
    return greyscaleAmount = value;

Then you could just tween the amount property.

1 Like

ColorMatrixFilter is what I was used to apply in AS3,

filteredBMP.bitmapData.applyFilter(bmd, bmd.rect, new Point(0, 0), new ColorMatrixFilter(colorMatrix));

but in HTML5 I had to switch to colorTransform because the old approach wasn’t working anymore, and it doesn’t allow to desaturate colours.
Are you telling me that the latest updates restored ColorMatrixFilter?

Honestly, I have no clue if it’ll work. I’ve only ever used this code in Flash and C++.

Try it and see!

I will try, but, if I am not wrong, I haven’t seen any update regarding ColorMatrixFilter recently.