Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1034569 Posts in 41734 Topics- by 33332 Members - Latest Member: peteandwally

August 21, 2014, 08:01:03 AM
TIGSource ForumsDeveloperTutorialsGlow effect for sprites without using shaders
Pages: [1]
Print
Author Topic: Glow effect for sprites without using shaders  (Read 9086 times)
drChengele
Level 2
**


if (status = UNDER_ATTACK) launch_nukes();


View Profile Email
« on: September 11, 2010, 06:15:47 AM »

Here's a relatively quick tutorial on how to achieve a decent glow effect for sprites without using shaders. It requires that your rendering engine supports render states or blending states. OpenGL, DirectX, SFML (and I think SDL) all support render states.

The gist of the method is to draw a special "glow-sprite" over the original sprite, using additive blending. I will show you an easy way to make a glow-sprite for your regular sprites using a few transformations in GIMP.

Let's say this is your sprite:




To make a glow sprite, first save a copy of the regular sprite under a new name (call it spritename_glow.bmp, for example). All our work will be done on this copy.

We must first paint all the transparent parts of your sprite black, and all the opaque parts white. (Note that this will not work as well if your sprite has per-pixel alpha values; it needs to have sharply defined contours to get the glow going).



[This "silhouette view" is easily achieved in GIMP by using the Magic Wand tool (with antialiasing off), selecting the mask color (magenta in this case), filling the selection with black, then inverting selection (Ctrl-I) and filling the new selection with white.]



Now, let's make that silhouette glow. Select the entire image (Ctrl-A). In the main menu go to Filters->Edge Detection->Difference of Gaussians.



When you get the dialogue, deselect Invert, select Normalize, make sure Preview is on, and experiment with border values until you are satisfied with the glow. To generate outward glow (which is our goal here) "Radius 1" should be at least 10.0, depending on how large you want your glow, whereas "Radius 2" should be left at zero. Inward glow (which you might also need for some reason) is achieved by keeping Radius 1 at zero and increasing Radius 2.



When you are satisfied with the preview click on "ok" and presto - you have your glow sprite.




That's it! Now all that's left is to use the sprite in-game to get the glow effect.

In-game, when ever you render the regular sprite, you ALSO render the glow sprite immediately over it, with the exact same parameters (location, scaling, etc.) except the glow sprite's blending method must be set to additive blending.

Naturally this step depends on the particular graphical library you are using, but pseudocode would go somewhat like this:

Code:
// draw the regular sprite:
draw_sprite("airplane_sprite.bmp", x, y, rotation, scale, color, sprite_alpha, blend::normal);
// now draw the glow sprite "above" it
draw_sprite("airplane_glow.bmp"  , x, y, rotation, scale, glow_color, glow_alpha * sprite_alpha, blend::additive);

Note that the glowsprite inherits the same scale, rotation, and position, so that the two sprites will be drawn the same and over one another. On the other hand, glow should have its own distinct color value, which can be anything you want, yellow, red, white, etc. One possible use for this method would be, for instance, if you have only one kind of soldier sprite and need it to render both allies and enemies, you can surround the enemy soldiers with a red glow and the allied ones with a green one.

An example of this in action:



Well, that's it! Hopefully you can now include glow in your games without the need for shaders. Here's some other technical stuff:

- please note that due to the nature of additive blending you can't have "black" or "grey" glow; this method only serves to give a bright, colorful glow, which should be enough for your needs. I have a method of achieving a "black" glow as well if anyone is interested, but it is a bit more complicated and is beyond the scope of this tutorial.

- note that by varying the glowsprite's alpha value you can achieve a fuller or more subtle glow. By changing the alpha value dynamically (in a sawtooth wave or a sine wave, say, from 0.2 to 1.0 and back again) you can achieve very nice pulsating effects.

- is the glow too weak for you even at full alpha? One solution is to increase the radius of Difference of Gausians when creating the glow sprite. Another is to always draw the glowsprite TWICE in the same spot. Due to the way additive blending works, and the gradient of the glow sprite, this will act like increasing the "intensity" of the glow.

- caveat for advanced users: if you intend to render a lot of sprites with the glow effect on, you should probably bunch your "base" sprites in a single layer, and their "glow texture" draws in another, to avoid the overhead of constant changing of render states.

- you should take care that your sprite has at least some distance from all the texture edges, ideally as many pixels as you specified in Radius 1, otherwise glow can look blocky.
Logged

Praetor
Currently working on : tactical battles.
MindEraser
Level 4
****



View Profile
« Reply #1 on: September 11, 2010, 04:33:43 PM »

If you're using at least GM7 or higher (I'm not sure if it requires Pro or not) a better way using GIMP for if you want to have one of the colors you can't get with alphablending would be to

1. Open the image in gimp
2. If it's got a solid bg color like the example sprite, right click on it in the layer window and click "add alpha channel"
3. Grab the color selector tool and pick the color you want transparent
4. Press delete
5. Select -> none or press ctrl+shift+a
6. Right click on the layer and click "alpha to selection"
7. Create a new layer and fill it with whatever you want your glow color to be
8. Deselect again
9. Filters -> blur -> gaussian blur -> preview the sprite and play with the blurring until you're satisfied
10. Save as an image that supports alpha channels like png (make sure you hide your main ship layer first so you just save the glow...)

This way you create an image with an alpha channel at a pre-set color. It's meant for if you want one of the colors the OP said you can't get with alpha blending, just remember the limitations of having the image a solid color vs. colorizing it in GM.
Logged
moi
Level 10
*****


DILF SANTA


View Profile WWW
« Reply #2 on: September 11, 2010, 08:52:51 PM »

Here's how I do it in Paint shop pro:
-copy the layer of the object to another layer.
-add a gaussian blur to this layer, soomething between 2 and 6 depending on the type of effect that you want (be careful no to go over the borders of the sprite or the blur will be cut off, if necessary increase the size of the canvas)
-once you have blurred the layer, duplicate it 4 or 5 times to give more consistance to the blur.
-put all the blurred layers underneath the main layer, play with the transparency to your liking, and mix all the layers to one.
Logged

subsystems   subsystems   subsystems
Dlaor
Level 0
*


Premium Member


View Profile Email
« Reply #3 on: September 12, 2010, 02:33:44 AM »

You can also do this by not making another sprite, but instead drawing the original sprite in circles in increasing distances around the original sprite (with varying alpha values and different color blending). This might hurt performance but you don't have to go through the hassle of making a glow texture.
Logged
bart_the_13th
Level 2
**


View Profile Email
« Reply #4 on: September 12, 2010, 11:23:35 PM »

An easier way to create glow in GIMP is using the softglow filter. It also 'glow' your main sprite however, so the picture will look brighter and blurry.
Logged
drChengele
Level 2
**


if (status = UNDER_ATTACK) launch_nukes();


View Profile Email
« Reply #5 on: September 13, 2010, 02:22:03 AM »

Thanks for the feedback, guys.

Yes, there are other ways, this is just how I do my glow because since it doesn't affect the main sprite the glow can be pulsating and scalable. I understand making a whole different sprite for the sake of glow can be a bit too much hassle for some who just want to get to the down and dirty.

If anyone has any more tips, please, do share them.
Logged

Praetor
Currently working on : tactical battles.
TobiasW
Level 8
***


This can only end brilliantly!


View Profile WWW Email
« Reply #6 on: September 13, 2010, 07:10:19 AM »

Thanks again for the tutorial! The version with screenshots sure is easier to follow Smiley
Logged

Polly
Level 4
****


View Profile
« Reply #7 on: September 20, 2010, 09:25:12 AM »

Or when you use something like ZGameEditor, simply use the build-in blur instead. Here is a ( 16kb ) example.

http://www.filedropper.com/glow_1

Coffee
Logged
include<Luka>
Level 0
***


[Insert personal text]


View Profile WWW Email
« Reply #8 on: September 22, 2010, 11:01:25 PM »

Awesome, I was always searching for a way to do this without shaders :D I  love it  Coffee
Logged

[Blog]

Programming is the closest thing I have to magic.
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic