ColorTransform apply not working on HTML5 :-(

Hi, I was trying to apply a ColorTransform object to a Shape one. While on the Flash target everything works fine, but on HTML5 nothing happens. Could this be related to this issue?

This is the code I’m using:

this._bg = new Shape();
this._bg.graphics.beginFill(0);
this._bg.graphics.drawRect(0, 0, 1920, 1080);
this._bg.graphics.endFill();
this.addChild(this._bg);
this._bg.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0, 200, 0, 0);

Use webgl to compile your HTML5 target.
You do that by simply adding “-Dwebgl” to your compiler variables.

1 Like

Hey, it worked! Thank you so much!

Are there drawbacks in using webgl?

Many mobile browsers don’t support webgl.

The color transform worked as expected on html5 target with webgl, however it seems I can’t update it too often… I’m using actuate to tween the color change. It works well on flash target, but when I try to do the same thing on html5, the changing stops at random times. Is this expected?

Perhaps it isn’t flagging the object as dirty, as a test, try setting the object x to a new value (like adding x: sprite.x + 0.000000001 to your tween properties) and see if it makes a difference.

The only way to do a color transform in canvas (I believe) is to make a complete copy of the canvas. This would be very expensive to do every frame, so its currently disabled. When we push blend mode and filter further, perhaps we’ll have the architecture to support color transform in canvas as well

As a workaround you can also bitmapData.draw then colorTransform the BitmapData

The position change trick worked! Thank you a lot, Joshua! I can live with the color change woking only on webgl for now :wink:

Please update the docs with this info, I actually had this problem multiple times when testing my apps for HTML5 target :frowning:

I think I may have just fixed the render flag on GIT, so it should set it to render each time the color transform is changed (without having to set the x value as well) :slight_smile:

1 Like

While this is working great on HTML5,
I cant get color transform / skew to work on Android… :sweat:

Is there any workaround?

GL should support colorTransform, and should support BitmapData as well, though both (unless you use legacy) have the same display list code, so skew (as mentioned in the other post) should be consistent. Is colorTransform working on Android?

1 Like

Ran the test again, and color transform does work on android!
The issue came from another bug (byte array’s .readFloat on Android target) that got this not to work, i am now investigating and will update on that bug.

Thank you, looking into skewing soon, and would like to hear more about what you’re getting with ByteArray :slight_smile:

1 Like

Opened a new thread regarding the byte array issue:
here

Raising an issue back from the graveyard… From the latest OpenFL updates, is there now a way to apply the color transformations on HTML5/canvas target?

Reviving this because I am also interested in getting color transforms working in canvas, and I can’t seem to find a solution.

It seems the colortransform is now broken even on webgl. It doesn’t seem to be working for html5 at all (tested on weblg and canvas as well). Using flash target it works as expected.

There’s more information here

Oh, I see the problem. Well, let’s wait and see if the cacheAsBitmap really helps with the issue. Fow now, I’m using a colored overlay (Shape) on html5. The result isn’t that good, but helps.

You can also do the following:

var bitmapData = new BitmapData (Math.ceil (shape.width), Math.ceil (shape.height), true, 0);
bitmapData.draw (shape);
bitmapData.colorTransform (...);