[solved] ColorMatrixFilter not working properly except on flash target

(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 :sweat_smile:

I will test other filters to see if it’s specific to ColorMatrixFilter or not.

Update : I tested other filters (except ShaderFilter) and they work fine, there are graphic issues with .knockout property as you can see here on GlowFilter ValEditorTest but it is minor

I got some answers on the Discord, tested some workarounds but none worked, Chris is looking into a sample file

edit : that’s with .inner, not .knockout

edit2 : opened an isue on github ColorMatrixFilter properties won't change dynamically except on flash target · Issue #2604 · openfl/openfl · GitHub

Thanks to @Dimensionscape for fixing this issue !

Here is a demo of the ColorMatrixFilter with editable values through my ColorFilterHelper class (will share that code when it’s complete) to celebrate :slight_smile:
https://matse.skwatt.com/haxe/valedit/filter/ColorFilterHelper/