Applying a ColorMatrixFilter to Sprites in HTML5

Help
#1

Hello All,

I am trying to apply a ColorMatrixFilter to Sprites for the HTML5 target (Lime 2.0.4, OpenFL 2.2.2) - basically changing the brightness and contrast based on slider values.

Creating a ColorMatrixFilter and assigning it to a_sprite.filters ( e.g. a_sprite.filters = [a_colorMatrixFilter]) works fine in Flash but has no effect in HTML5.

Can anyone offer advice, please?

Thanks

Mark

#2

This looks like something that has not been implemented again since I made the new HTML5 backend (which is MUCH better than the old one). However, it looks like it should be hooked up to bitmapData.applyFilter, perhaps bitmapData.draw then applyFilter with ColorMatrixFilter could be used as a workaround?

#3

Thanks. I’ve tried applyFilter but that does not seem to have any effect either (works OK in Flash).

I have implemented a workaround using getPixel and setPixel and manually applying the same values in the ColorMatrixFilter to the bitmapData. That works, but I’d prefer to be able to apply filters to the displayObject rather than cloning and manipulating its bitmapData.

Do you have plans to implement support for .filters in HTML5?

(And yes, the new HTML5 backend is working well - thank you for that.)

ColorMatrixFilter on non-webgl html5 targets
#4

Also having issues with BitmapData.applyFilter() for the html5 target, there seems to be no effect. Currently using openfl 2.2.4.

ColorTransform apply not working on HTML5 :-(
#5

Had a recent fix to ColorTransform for HTML5, could be related, not sure if there’s a good way to do fast tinting on canvas or DOM rendering

#6

Hi all,

I have just tried to do:

  • bitmap.filters = [color_matrix_filter]
  • bitmapData.draw + bitmapData.applyFilters

Both methods are not working on my HTML5 target (non WebGL). Any plans to support this?
Any other way to update brightness/contrast in images using HTML5 (besides updating pixel by pixel the image)
Thank you!

#7

For the moment, I have used bitmapData.draw then bitmapData.colorTransform

I understand this a valuable feature, I am afraid of exposing colorTransform directly because I do not know an HTML5 canvas/DOM method that does not require pixel-by-pixel manipulation (which is more expected when using bitmapData than adjusting a DisplayObject).

Let me know if the above workaround helps? We need to analyze ColorMatrixFilter again, it sounds like a regression (as it did work before)

#8

@singmajesty,
if I’d like to use a specific html5/js webgl engine, how can i make a new html5 backend to do so?
I mean I don’t want to use externJS syntax; I still want to use the same openfl library, but when generating a html5/js backend build, I expect the build uses the generic openfl code that is mapped to a html5/js webgl engine I predefined.

#9

What engine? Are there other ways to make both interact?