Glowfilter for Image

(Tumetsu) #1

I’m returning to FP from Starling and porting my adventure game engine over to it. Now, the game has an inventory with selectable items. I want that everytime the player selects the item, it gets a glow effect. On Starling and in FP for Text-outlines I used GlowFilter to easily produce unique glow effect for each sprite.

However, it looks like there isn’t any easy way to assign GlowFilter to an Image? Is there some other mechanic to draw the glow-like effect on Images? Or do I have to fiddle with BitmapData and produce a separate sprite for glow on runtime?

(rostok) #2

you could override render() method, tint the bitmap, paste it in framebuffer shifting x/y and changing alpha. finally paste the right sprite’s bitmap. this can produce an outline of variable width but it will be pixel based. the outline will be in the same resolution as the rest of the sprites.

if this is the case i can provide the code.

(Tumetsu) #3

Well, if you have code for that I’m interested in seeing it!

(rostok) #4 
override public function render():void 
{
	if (whiteOutline>0) {
		var xb:Number = x;
		var yb:Number = y;
		
		sprite.whiten(1);
		sprite.alpha = whiteOutline;
		for (y = yb-1; y <= yb+1; y++)
		for (x = xb-1; x <= xb+1; x++)
		{
			super.render();
		}
		x = xb;
		y = yb;
		sprite.alpha = 1;
		sprite.normal();
		whiteOutline -= 1 / 30.0;
	}
	super.render();
}

nothing fancy here. if whiteOutline is set to 1 then it adds outline that will last for next 30 frames and fade out. note that entity has variable sprite (assigned to graphics) and Image class has some extra methods like whiten(), normal(). you can fetch them here https://github.com/rostok/FlashPunk/blob/master/net/flashpunk/graphics/Image.as#L463

A more efficient method of creating a laser
A more efficient method of creating a laser
(azrafe7) #5

Another possible solution would be to extend Image (or Spritemap, or whatever graphic class you need) and add a filters property that works directly on the _buffer property (or _source) via applyFilter(...).

Shameless plug: for a ready-to-use solution you can take a look at my punk.fx lib and simply use it like this:

var glowFX:GlowFX = new GlowFX(6, 0xffffff, 4);
var image:FXImage = new FXImage(...);
image.effects.add(glowFX);

It also supports Flash filters directly. More info on the wiki.

(Tumetsu) #6

Thanks for answers. I think I might go with punk.fx since it seems to have other effects I might need in the future. The glow effect seems to work well. Just need to add some alpha to it.