[HTML5] Glow filter color doesn't seem to have effect


#1

Is GlowFilter not fully implemented for HTML5 yet?
Regardless of what color I pass in the first parameter, it is always dark.

var gf:GlowFilter = new GlowFilter(0xFABD33, 1, 3, 3, 1, BitmapFilterQuality.MEDIUM, false, false)
textField.filters = [gf];

This is the result:
glow

For now I switched to DropShadowFilter, which does react to the color parameter.


#2

I’ve got a fix waiting for this matter as I also found out about this issue. So it will be fixed in the next release or maybe the one after. I’ll post this fix to develop today but it is up to @singmajesty when this will be released. It is related to both Lime and OpenFL.


#3

I have replaced GlowFilter.hx and DropShadowFilter.hx in openfl and ImageDataUtil.hx in lime from GitHub repos.

The glow filter got fixed!
The drop shadow filter got broken. :disappointed_relieved:

dropshadow

Since 7.1.1 ImageDataUtil.hx has also been modified by this commit


#4

I will check these out tomorrow.


#5

While you’re looking into this, could you also investigate why the ‘inner’ param for GlowFilter doesn’t work? Setting it to true has no affect.


#6

So regarding these filters. I’ve commited changes to OpenFL and this requires my pull request I’ve posted on discord to: https://github.com/openfl/lime/pull/1266

I had to revert recent changes regarding that strength parameter because it made DropShadowFilter to display as a really small shadow instead of actual, flash-like one.

This is my sample code:

package;

import openfl.display.Sprite;
import openfl.filters.BlurFilter;
import openfl.filters.DropShadowFilter;
import openfl.text.TextFormat;
import openfl.filters.GlowFilter;
import openfl.text.TextField;

class Main extends Sprite {
	private var text_field_1(null, null):TextField;
	private var text_field_2(null, null):TextField;
	private var text_field_3(null, null):TextField;

	public function new() {
		super();

		var blur:BlurFilter = new BlurFilter(4.0, 4.0);
		var glow:GlowFilter = new GlowFilter(0x00FF00);
		var shadow:DropShadowFilter = new DropShadowFilter(4, 45, 0xFF0000, 1.0, 0.0, 0.0);

		var format:TextFormat = new TextFormat('Arial', 40);

		this.addChild(this.text_field_1 = new TextField());
		this.text_field_1.defaultTextFormat = format;
		this.text_field_1.width = 300.0;
		this.text_field_1.height = 50.0;
		this.text_field_1.x = 0.0;
		this.text_field_1.y = 0.0;
		this.text_field_1.text = 'Sample Text';

		this.text_field_1.filters = [glow];

		this.addChild(this.text_field_2 = new TextField());
		this.text_field_2.defaultTextFormat = format;
		this.text_field_2.width = 300.0;
		this.text_field_2.height = 50.0;
		this.text_field_2.x = 320.0;
		this.text_field_2.y = 0.0;
		this.text_field_2.text = 'Sample Text';

		this.text_field_2.filters = [shadow];

		this.addChild(this.text_field_3 = new TextField());
		this.text_field_3.defaultTextFormat = format;
		this.text_field_3.width = 300.0;
		this.text_field_3.height = 50.0;
		this.text_field_3.x = 620.0;
		this.text_field_3.y = 0.0;
		this.text_field_3.text = 'Sample Text';

		this.text_field_3.filters = [blur];
	}
}

and these are the results. Flash on top, from left: Glow, Drop Shadow, Blur filters. HTML5 is beneath.


#7

Not working for me.

I have GlowFilter.hx and DropShadowFilter.hx from the dev branch and ImageDataUtil.hx from your pull request.

Edit: I’ve manged to make both filters working by switching to DropShadowFilter.hx from 8.6.4 and reverting the change in ImageDataUtil.hx on lines 816-817:

if (imgA == sourceImage.data) return image;
return sourceImage;

#8

I’m on latest OpenFL and Lime dev, and can confirm that running the test code looks like the above screenshots