(I also posted about this on the OpenFL discord a few hours ago)
There seems to be an issue with ColorMatrixFilter (and possibly other filters ? Haven’t tested yet) where it won’t take changes into account when those changes happen after the first frame where it’s assigned.
Here is a demo showing the issue : Feathers_tests
For the left part I set a grayscale matrix immediately, and it works.
For the right part I pre-assign the filter to the bitmap, and the grayscale matrix is set when the button is clicked and as you can see nothing happens.
Here is the demo code (using FeathersUI) :
class ColorFilterView extends LayoutGroup
{
static public final ID:String = "color-filter-view";
private var _group1:LayoutGroup;
private var _bitmap1:Bitmap;
private var _filter1:ColorMatrixFilter;
private var _button1:Button;
private var _group2:LayoutGroup;
private var _bitmap2:Bitmap;
private var _filter2:ColorMatrixFilter;
private var _button2:Button;
private var _matrix:Array<Float>;
public function new()
{
super();
// grayscale matrix
_matrix = [
0.3086, 0.6094, 0.082, 0, 0,
0.3086, 0.6094, 0.082, 0, 0,
0.3086, 0.6094, 0.082, 0, 0,
0, 0, 0, 1, 0
];
}
override function initialize():Void
{
super.initialize();
var vLayout:VerticalLayout;
var hLayout:HorizontalLayout = new HorizontalLayout();
hLayout.horizontalAlign = HorizontalAlign.LEFT;
hLayout.verticalAlign = VerticalAlign.JUSTIFY;
this.layout = hLayout;
_group1 = new LayoutGroup();
_group1.layoutData = HorizontalLayoutData.fillHorizontal(50);
vLayout = new VerticalLayout();
vLayout.horizontalAlign = HorizontalAlign.CENTER;
vLayout.verticalAlign = VerticalAlign.MIDDLE;
vLayout.gap = 8;
_group1.layout = vLayout;
addChild(_group1);
_bitmap1 = new Bitmap(Assets.getBitmapData("img/background.jpg"));
_group1.addChild(_bitmap1);
_filter1 = new ColorMatrixFilter();
_bitmap1.filters = [_filter1];
_filter1.matrix = _matrix.copy();
_bitmap1.filters = [_filter1];
_button1 = new Button("already applied");
_button1.enabled = false;
_group1.addChild(_button1);
_group2 = new LayoutGroup();
_group2.layoutData = HorizontalLayoutData.fillHorizontal(50);
vLayout = new VerticalLayout();
vLayout.horizontalAlign = HorizontalAlign.CENTER;
vLayout.verticalAlign = VerticalAlign.MIDDLE;
vLayout.gap = 8;
_group2.layout = vLayout;
addChild(_group2);
_bitmap2 = new Bitmap(Assets.getBitmapData("img/background.jpg"));
_group2.addChild(_bitmap2);
_filter2 = new ColorMatrixFilter();
_bitmap2.filters = [_filter2];
_button2 = new Button("apply grayscale");
_button2.addEventListener(TriggerEvent.TRIGGER, onButton2);
_group2.addChild(_button2);
}
private function onButton2(evt:TriggerEvent):Void
{
_filter2.matrix = _matrix.copy();
_bitmap2.filters = [_filter2];
}
}
This issue is pretty bad as it makes animating a ColorMatrixFilter properties pretty much impossible… and I just wrote a ColorFilterHelper class to do just that
I will test other filters to see if it’s specific to ColorMatrixFilter or not.