Glow effects on graphics

Monkey Forums/Monkey Programming/Glow effects on graphics

Sensei(Posted 2013) [#1]
Hi guys,

I've been wondering how to get Monkey to create "glow" effects on objects in my game I'm working on. I've looked at the gloworm banana and I've messed with the SetAlpha and SetBlend commands but I'm not getting anything decent at all.
The best I've come up with so far is to set an alpha level that decreases and then I redraw the image with a slight adjustment in the X or Y position to create a sort of blur effect, but it's still not what I want.

Any ideas? I could do it by drawing the graphics with a fake glow effect, but that isn't going to really help much as I am planning on creating some effects which would really work best if I could programmatically create this effect.


skape(Posted 2013) [#2]
Your best bet is going to be using shaders when 'mojo2din3d' is released. It's on the roadmap, but no time estimate. :)

Others have done various other methods as you describe, with varying levels of success.


Sensei(Posted 2013) [#3]
Thanks @Unlikely. I guess for now it might have to be a combination of graphics and alpha/blend/blur.

Anyone that's already done this on any of their games, if you have any tips, I'd appreciate it if you could advise which solution worked for you :)


Shinkiro1(Posted 2013) [#4]
If you want to animate from a blurred state, you can just decrease the alpha of the blurred image with time.

I recently did a little game where in the credits I used it like this:
https://dl.dropboxusercontent.com/u/2892658/dev/Blur-Example/index.html


ElectricBoogaloo(Posted 2013) [#5]
Here's how I did it in NeonPlat Raw (also available on OUYA! I need to add that into my Archive.. hmm..)

Make a second copy of your sprite/spritesheet in your favourite art package, make sure you've no background (so you don't blur it into black/pink/whatever) and then simply use the art package's Blur effect until you find a nice looking effect.
Next, load both the Raw and Blur spritesheets into your game, draw the original sprite first, then switch blend modes and add the blur sprite over the top.
You should get a nice effect. (Although you're using 2 sprites for everything..)

Also, be aware that (in my tests, at least) Additive Blend will cause MAJOR slowdown on some Android devices, so for sanity's sake, shove in a preprocessor that disables it on Android's! (regular Alpha blend looks just as good, but it's nice to have the option where you know it works well)




Sensei(Posted 2013) [#6]
@Shinkiro1: Thanks for that! I like the effect and how it changes.

Fantastic tip @ElectricBoogaloo. That's pretty much identical to the effect i want. Crisp, with a blurry edge :)

I'm excited to do this now!


Midimaster(Posted 2013) [#7]
Thank you ElectricBoogaloo, nice description. I will try this too! But one question: Combining the two images already in an painting tool... then use only one image... Would this not bring the same effect? And Why not?


Sensei(Posted 2013) [#8]
That's what I ended up doing, combining both images within Photoshop and the results in-game are excellent. Saved my spritesheet as a 24-bit transparent PNG and images overlapping each other look really good with this effect.


ElectricBoogaloo(Posted 2013) [#9]
Yes, you can do it simply, and it does work "enough", but depending on what your sprites look like, it can get a bit messy when things get crowded.

What I tend to do is separate ALL the Raw and Glow sprite drawing..
Essentially, you make a list of your drawings, then go through twice, the first time drawing all the Raw, the second time drawing all the Glow over the top.

This means that if, say, you have 3 solid orbs sitting next to one another, the third orb won't draw over the top of the glow of the first two orbs.



By separating out the Glow sprite, and then drawing it all over the top, you get a much cleaner effect on your glow.
... It could just be me being picky, though!


Sensei(Posted 2013) [#10]
That's a very valid point @ElectricBoogaloo. Again, thanks for that tip. I might need to do that at some point, but so far it seems ok the (lazy) way I've done it :)
I suppose I'm just a little weary of not drawing too many objects, especially double for the above effect, as I don't want to risk slow-down. And since this game will be a multi-platform I want to keep it simple in that regard. Yes, I can do target specific things too, which I might do, but for now, trying to keep it simple.


SLotman(Posted 2013) [#11]
Only do the separate glow thing if you have just a few object on screen... specially in the mobile world, overdraw is a very expensive operation, and should be avoided as much as possible! (Ok, it's not as bad as it was 2-3 years ago, but "better safe than sorry")


Midimaster(Posted 2013) [#12]
Ah! Thank you!


Blitus(Posted 2014) [#13]
I know the post is a little old, but I thought this might be helpful for others trying to use paintshop pro x4 or similar. (tip found on another site but modified a bit)

Easiest way I've found to create the blur in psp is this:

- copy the sprite layer of the object to another layer.
- add a gaussian blur to this layer, radius between 2 and 6
- once you have blurred the layer, duplicate it 4 or 5 times - the more times the bigger the blur will be
- merge the duplicate blur layers
- put the blur layer underneath the main layer, play with the transparency of each layer to your liking
- then either merge all layers to create a sprite with blur, or use the blur layer to create just the blur if you want it as a separate sprite.

Cheers