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

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.

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.

1 Like

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

I will check these out tomorrow.

1 Like

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.

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.

1 Like

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;

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

What’s the status of glow filter? I still can’t get it working on a sprite on html target.

I believe outer glow is working, inner glow is not implemented. The implementation is not perfect, still could use improvements to the blur.

I am using openfl 8.9.1, lime 7.5.0
using white color 0xFFFFFF for text in glow is not working however, other colors works normally.

I have tried to use lime/_internal/graphics/ImageDataUtil.hx of version 7.3.0 and I can confirm that glow of white color is working normally at that version, however, I had this issue: https://github.com/openfl/openfl/issues/2184 which is solved at lime 7.5.0

here is the result for lime 7.5.0
41%20AM
and here is the result of lime 7.3.0
00%20AM

for above snapshots, please look at text 2.82 A at wires
also, the glow effect at lamp is changed!

I’ve opened an issue here:

Do you think a basic TextField plus a GlowFilter set on white would reproduce the issue?

Yes, basic TextField with GlowFilter set in white will reproduce the issue, that is there is no white glow seen around the text.

I have updated openFL and lime to latest version, can you please tell me how to create an effect of creating outline around a shape?

I used to create new GlowFilter(0xffffff, 1, 5, 5, 12); but it does not work as before :face_with_head_bandage: , strength is has no effect after lime 7.3.0

Any advice?

@singmajesty I found that if I build the project with webgl key , the filters will work, however, if I build using-Dcanvas, the GlowFilter is barely noticed…