Graphical Borders Glow Effect

blablu1212 · February 26, 2015, 9:58pm

I want to achieve graphical glow effect on the outside borders of an image.

Is this possible please?

I found this code very helpful in corona forum for text glowing, but doesnt work for images:

--TEXT GLOW local snapshot = display.newSnapshot( 400, 200 ) snapshot.x = display.contentCenterX snapshot.y = display.contentCenterY-200 local txt = display.newText( "Hello!", 0, 0, native.systemFont, 100 ) txt:setFillColor( 1, 1, 0 ) snapshot.group:insert( txt ) snapshot.fill.effect = "filter.blurGaussian" snapshot.fill.effect.horizontal.blurSize = 8 snapshot.fill.effect.horizontal.sigma = 140 snapshot.fill.effect.vertical.blurSize = 8 snapshot.fill.effect.vertical.sigma = 140 local txt2 = display.newText( "Hello!", display.contentCenterX, display.contentCenterY-200, native.systemFont, 100 ) txt2:setFillColor( 1, 0, 0 )

horacebury · February 26, 2015, 10:35pm

This works for me with a plain shape. Try replacing the shape with an image:

 local shape = math.centreShape( { 25,-25 , 25,25 , -25,25 } ) local snapshot = display.newSnapshot( 400, 400 ) snapshot.x, snapshot.y = parent:localToContent( 0, 0 ) local prism = display.newGroup() local b = display.newPolygon( prism, 0, 0, shape ) b.fill = {0,0,1,.3} snapshot.group:insert( prism ) snapshot.fill.effect = "filter.blurGaussian" snapshot.fill.effect.horizontal.blurSize = 18 snapshot.fill.effect.horizontal.sigma = 140 snapshot.fill.effect.vertical.blurSize = 18 snapshot.fill.effect.vertical.sigma = 140

blablu1212 · February 26, 2015, 10:55pm

Hi @horacebury,

Thank you for your answer, just tried to replace shape by an display.newImage but doesnt work.

horacebury · February 26, 2015, 11:48pm

Downloaded an image called logo.png and used this code:

local image = display.newImage("logo.png") local snapshot = display.newSnapshot( 700, 400 ) snapshot.x, snapshot.y = 400, 300 snapshot.group:insert( image ) snapshot.fill.effect = "filter.blurGaussian" snapshot.fill.effect.horizontal.blurSize = 18 snapshot.fill.effect.horizontal.sigma = 140 snapshot.fill.effect.vertical.blurSize = 18 snapshot.fill.effect.vertical.sigma = 140

Just remember, that if you move the image to a location outside the snapshot area you won’t see anything - this could be your issue.

blablu1212 · February 26, 2015, 11:57pm

Hi @horacebury

this code made me achieve the effect but blurred the image, which i don’t want too.

If i make blurSize=0 it want show the effect anymore

What if i want to change the color shadow? For example to yellow?

if i do this:

snapshot:setFillColor(1.0,1.0,0.0)

it will mix the black glow with a yellow effect.

horacebury · February 27, 2015, 12:00am

If you want to have a blurry shadow of the image, you need to put the image in the snapshot, blur it and then put another image over the top which isn’t blurred.

blablu1212 · February 27, 2015, 12:02am

Yeah i was thinking about that trick too

But what about the color? The only shadow i can achieve is black color?

blablu1212 · February 27, 2015, 12:03am

Yeah i was thinking about that trick too

But what about the color? The only shadow i can achieve is black color?

horacebury · February 27, 2015, 12:17am

I don’t know what you’re talking about now… the “shadow” (which is actually the blurred image from the snapshot) will be it’s normal colour, just blurred.

blablu1212 · February 27, 2015, 12:26am

I used to have a red image and shadow come black, but never mind.

I dont think i can achieve the result by coding.

Thanks for your help horacebury

horacebury · February 27, 2015, 8:53am

Ok, I think I’ve got it. I need pretty much the same thing you do right now, so I’ve really looked into this. I thought that combining (compositing) effects would do it, but what I thought Corona’s compositing filters is not what it actually is. I think.

Anyway, it turns out that if you want to make an object glow, that is basically brightening the bright bits and blurring the edges. Which is exactly what the bloom filter does. Right there at the top of the list. It’s pretty much 3 effects in one.

Here’s the code I used to take an image and make it glow. I didn’t want the inner side effects, so I put another copy of the same image over the top, to make sure the glow effect is coming from beneath it, but you don’t have to do that, of course.

local image = display.newImage("logo.png") local snapshot = display.newSnapshot( 800, 600 ) snapshot.x, snapshot.y = 400, 300 local snapshot2 = display.newSnapshot( 800, 600 ) snapshot.group:insert( snapshot2 ) snapshot2.group:insert( image ) --snapshot.fill = compositePaint --image.fill.effect = "filter.blurGaussian" --image.fill.effect.horizontal.blurSize = 38 --image.fill.effect.horizontal.sigma = 140 --image.fill.effect.vertical.blurSize = 38 --image.fill.effect.vertical.sigma = 140 snapshot2.fill.effect = "filter.bloom" snapshot2.fill.effect.levels.white = 0.8 snapshot2.fill.effect.levels.black = 0.4 snapshot2.fill.effect.levels.gamma = 1 snapshot2.fill.effect.add.alpha = 0.8 snapshot2.fill.effect.blur.horizontal.blurSize = 40 snapshot2.fill.effect.blur.horizontal.sigma = 140 snapshot2.fill.effect.blur.vertical.blurSize = 40 snapshot2.fill.effect.blur.vertical.sigma = 140 --snapshot.fill.effect = "filter.exposure" --snapshot.fill.effect.exposure = 2 local image2 = display.newImage("logo.png") image2.x, image2.y = 400, 300

So, I used this image and saved it as “logo.png”:

http://vignette4.wikia.nocookie.net/gow-fireage/images/3/3b/Wiki_logo.png/revision/latest?cb=20130923012616

That turned out to be a really dumb idea because it already has a bit of a shadow and the edges of the actual image are all dark, causing absolutely no glow effect with the bloom filter. This image works MUCH better:

http://siliconangle.com/files/2013/10/coronaicon.png

blablu1212 · February 27, 2015, 4:11pm

@horacebury this is really awesome , thank you for sharing

i was looking at all corona filters here:

http://docs.coronalabs.com/guide/graphics/effects.html

what i am trying to achieve i think its too complicated because i want the edges shadow to be dark yellow that fades to white,

here shadows play only with white,black, alpha and the glow color that comes from the effect

but this example would be helpful to know

horacebury · February 26, 2015, 10:35pm

This works for me with a plain shape. Try replacing the shape with an image:

 local shape = math.centreShape( { 25,-25 , 25,25 , -25,25 } ) local snapshot = display.newSnapshot( 400, 400 ) snapshot.x, snapshot.y = parent:localToContent( 0, 0 ) local prism = display.newGroup() local b = display.newPolygon( prism, 0, 0, shape ) b.fill = {0,0,1,.3} snapshot.group:insert( prism ) snapshot.fill.effect = "filter.blurGaussian" snapshot.fill.effect.horizontal.blurSize = 18 snapshot.fill.effect.horizontal.sigma = 140 snapshot.fill.effect.vertical.blurSize = 18 snapshot.fill.effect.vertical.sigma = 140

blablu1212 · February 26, 2015, 10:55pm

Hi @horacebury,

Thank you for your answer, just tried to replace shape by an display.newImage but doesnt work.

horacebury · February 26, 2015, 11:48pm

Downloaded an image called logo.png and used this code:

local image = display.newImage("logo.png") local snapshot = display.newSnapshot( 700, 400 ) snapshot.x, snapshot.y = 400, 300 snapshot.group:insert( image ) snapshot.fill.effect = "filter.blurGaussian" snapshot.fill.effect.horizontal.blurSize = 18 snapshot.fill.effect.horizontal.sigma = 140 snapshot.fill.effect.vertical.blurSize = 18 snapshot.fill.effect.vertical.sigma = 140

Just remember, that if you move the image to a location outside the snapshot area you won’t see anything - this could be your issue.

blablu1212 · February 26, 2015, 11:57pm

Hi @horacebury

this code made me achieve the effect but blurred the image, which i don’t want too.

If i make blurSize=0 it want show the effect anymore

What if i want to change the color shadow? For example to yellow?

if i do this:

snapshot:setFillColor(1.0,1.0,0.0)

it will mix the black glow with a yellow effect.

horacebury · February 27, 2015, 12:00am

If you want to have a blurry shadow of the image, you need to put the image in the snapshot, blur it and then put another image over the top which isn’t blurred.

blablu1212 · February 27, 2015, 12:02am

Yeah i was thinking about that trick too

But what about the color? The only shadow i can achieve is black color?

blablu1212 · February 27, 2015, 12:03am

Yeah i was thinking about that trick too

But what about the color? The only shadow i can achieve is black color?

horacebury · February 27, 2015, 12:17am

I don’t know what you’re talking about now… the “shadow” (which is actually the blurred image from the snapshot) will be it’s normal colour, just blurred.