How do I make a simple "glow" effect?!

Hello,

I'm looking for a solution to make a simple glow effect. Look at the picture:

[attachment=0:2nuuw69m][/attachment:2nuuw69m]

In the red zone, I use the horizontal and vertical glow effect for the layer (but in the corners it does not look nice, it's to hard). The green zone is just a sprite (create with photoshop, more soft). I would like the red marked areas look like the green. how can I implement this with c2? I do not want to create this effect with photoshop.

Thanks for help!

you can use the additive Blendmode

Hey wossi,

I think what you're looking for is doable. I'll go over the problem and then two possible solutions.

The glow effect is based on a Gaussian blur, and this is where the problem arises.

Normally using two Gaussian blurs at right angles will produce a radially uniform (smooth corners) Gaussian blur, (a very cool and special mathematical property of Gaussians). Unfortunately this special property of perpendicular Gaussian blurs only works when they're combined multiplicatively. (Using a horizontal blur to blur the result of a vertical blur is effectively multiplicative.) Unfortunately, adding or "screening" them together, which is what Construct 2's "Glow" effects do when stacked in series, does not preserve this special Gaussian behavior. So the result of perpendicular "Glows" is not radially uniform.

So, stacking a regular H-blur and V-blur will give you the smooth corners you want, but it won't glow.

Stacking H-glow and V-glow will glow, but it will give you sharp corners.

What you need to do is create a blur-glow system within Construct2.

With a canvas object (maybe):

Disclaimer: I've never used the canvas plugin (3rd party I think), but if you can paste objects or layers into it then it might make a glow effect semi-simple.

1. Place a layer below the foreground objects and above the background.

(May need to set the scale and scroll rate for this new layer to "0".)

2. Stretch a canvas object across that layer to fill the window.

3. Every tick, clear the canvas to transparent, and then paste into it all the objects you want to glow.

4. To the canvas, add the effects "horizontal blur" and "vertical blur", then add the "Screen" OR "Dodge" effect.

Done.

Using only native C2 stuff - (no canvas):

Without the canvas it is still doable, but it takes a little more work and clutter.

For a given (source) object that you want to glow, you create a sprite with an identical image, and set it to match the position, angle, and animation frame (if animated) of the source object. This copy object must have a Z-index below the source, which you can set with events. To this copy object, add the effects "horizontal blur" and "vertical blur", then add the "Screen" OR "Dodge" effect.

"Dodge" vs "Screen":

Dodge and Screen are both glow-ish style blend modes, in that they will make an object transparent, such that it brightens the backdrop.

"Dodge" (sometimes "linear dodge") is literally just "Addition". It's that simple.

Blend result = BG + FG.

"Screen" is exactly the same as "multiply", but upside-down. Where "multiply" pushes all brightness values towards black, but never past black; "screen" pushes all brightness values towards white, but never past white;

Blend result = invert ( invert BG * invert FG )

i.e.

Blend result = 1 - (1 - BG * 1 - FG ), where black is 0 and white is 1.

Practically speaking why use one vs the other?

"Dodge"/"Addition" is good when you want a vibrant intense look, with the potential for blown-out overexposed areas. The results for additive blending can be brighter than white, so they will be clipped to white. This is good for fire, electricity, and other intense eye-burningly bright effects.

"Screen" is good when you want soft glow, or bright-but-smooth looking glow effects. Screen can produce pure white in cases where the FG or BG is pure white, but it will never blow-out or overexpose areas, because the mathematical result of "screen" blending is always between 0 and 1, so no clipping can occur.

Hope that helps.

If the blur is permanent (not turning on and off), I would get rid of the effect altogether and make the glow built in to the sprite. Not using the effect will save on cpu.

Load it up in photoshop, duplicate the layer, gauss blur the bottom one. It'll look exactly the same.

Spacedoubt has a good suggestion here, (and a cool name).

There is a tradeoff with this solution. Creating a built in blur in Photoshop will give you a colored halo, but not a glow, as a colored halo will be alpha blended into the backdrop rather than additively blended or screen blended into the backdrop. Alpha blending *can* look like an okay approximation of a glow in some cases, particularly when the background is quite dark and unsaturated (more grey than colored), or when the halo is pure white, or very close to pure white. Both of these special cases produce a result that is mathematically and visually close to screen blending.

As a benefit of the Photoshop method, you will not need to use a WebGL effect, and this could improve performance depending on the platform.

As a drawback, an alpha blended halo will actually darken the backdrop when the backdrop is brighter than the halo color. This darkening occurs on a per RGB channel basis, so a blue alpha blended halo will darken green and red values in any backdrop the halo overlaps, and this can look like an anti-glow. Another consideration is that since the glow is precomputed for a single image, it won't work for tile-based objects or objects that will be dramatically stretched or resized, as the glow would also be proportionally stretched.

One possibility to cut out the semi-intensive blur WebGl effect and still get a true additively blended glow, is to use a hybrid approach.

For each (source) object you want to glow, create a new object and make its image a Photoshop blur of the source object's image. Place this blurry object under the source, and match the source's position, angle, etc. Finally set the blurry object to use the additive blend mode, or give it a single dodge or screen effect.

fisholith

Thanks for putting this much thought into this. I'm trying to build a crt distortion stack that will scale from a desktop down to a mobile. Adding glow and noise to a scanline effect really sings, but my phone doesn't like it, especially glow.