Cannot get BlurFilter / applyFilter to work (for any target)

Haxe
#1

I am very new to OpenFL. I cannot get BlurFilter / applyFilter to work (for any target: tested with html5, neko, win, flash). OpenFL 8.1.1, Haxe 3.4.7.

import openfl.display.Bitmap;
import openfl.display.Sprite;
import openfl.Assets;
import openfl.filters.BlurFilter;
import openfl.geom.Point;
import openfl.geom.Rectangle;

class Main extends Sprite {

	public function new () {   
		super ();

		var bitmapData = Assets.getBitmapData ("assets/HELLO.png");

		var blurFilter = new BlurFilter(); // with default params, BlurFilter should be visible enough
		bitmapData.applyFilter(bitmapData, new Rectangle(200, 200), new Point(0, 0), blurFilter); // should blur helloBitmapData
		bitmapData.setPixel(100, 20, 0xFF0000); // should add a red pixel to helloBitmapData

		var bitmapShown = new Bitmap (bitmapData);

		addChild (bitmapShown); // shows bitmap, with the red pixel, but without blur (tested on html5, neko, win, flash targets).
	}

}

On the IRC channel, it was suggested that perhaps the blur is not visible because the Bitmap does not notice that its BitmapData has changed. But in this example, since the red pixel does show up, and the Bitmap is defined after the blur has already been applied to the BitmapData, that should not be the problem.

Am I simply misusing applyFilter somehow? Do let me know!

the HELLO.png : https://i.imgur.com/NjuCaxi.png

#2

Hi Ciuder.

You need to apply the filter to another instance of BitmapData - not the one you actually want to blur.
Try this:

import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Sprite;
import openfl.Assets;
import openfl.filters.BlurFilter;
import openfl.geom.Point;
import openfl.geom.Rectangle;

class Main extends Sprite {

	public function new () {   
		super ();

		var bitmapData = Assets.getBitmapData ("assets/HELLO.png");

		var blurFilter = new BlurFilter(); // with default params, BlurFilter should be visible enough
		var tempBitmapData:BitmapData = bitmapData.clone();
		tempBitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(0, 0), blurFilter);

		var bitmapShown = new Bitmap (tempBitmapData);

		addChild (bitmapShown); // shows bitmap, with the red pixel, but without blur (tested on html5, neko, win, flash targets).
	}

}
2 Likes
#3

Thank you, that works!

But http://api.openfl.org/openfl/display/BitmapData.html#applyFilter says:

The source image can be a different BitmapData object or it can refer to the current BitmapData instance.

The docs are mistaken then?

#4

Actually it should work that way - yes.
I had a little trouble with BlurFilter + applyFilter too and this workaround
got rid of the problem. In my case though applying a Blur to a Bitmap caused
some random visual artefacts if targeting HTML5.
As a side note - I think with OpenFL 8+ it works as expected - so I assume you’re
using OpenFL 7.x.x or lower, are you?

#5

You can also do bitmap.filters = [ blurFilter ]

#6

No: OpenFL 8.1.1, Haxe 3.4.7, lime 6.3.1.