Spell Effects/Shaders

Question

I want to be able to achieve spell effects that cause a fragmenting/discoloring effect on the sprite. The first couple seconds of this video http://www.youtube.com/watch?v=HNCFh7mkvuc shows what I mean. When the enemy gets hit by an electric attack, the effect I'd like to achieve activates (in yellow).

I'll have to use shaders to do this (if I don't, other, practical ways to do it would be extremely helpful). I have no idea where to start with a shader like this (beyond the obvious - using time and base color as parameters), and was curious if someone had something similar I could use as a base, or had a good idea where to start. I know the basic of glsl, but was hoping to spare myself some pain if someone has something like this already or could provide a starting point.

Any help would be appreciated,

thanks

Just to clarify, I'm looking to apply this against a 2D texture in OpenGL using glsl shaders

Answer 1

Looking at the animation, the enemy seems to flash straight to yellow, and it king of 'melts' downwards over time. If you look, the darker and lighter parts of the sprite are inversed during the fade.

I would personally use a shader with the base colour and the time as uniforms.

To tint the sprites colour to yellow, you can first convert it to grayscale :

grayscale = (0.299*red + 0.587*green + 0.114*blue)

Then simply multiply it by your input colour; here, yellow.

For the fade over time, you could try saturating the grayscale by multiplying it by a base colour over time, say gray, and don't clamp it, make it loop. You could add an effect from 'top to bottom' by also multiplying by time * uv.y.

You could make this more interesting by using a smoothed perlin noise texture to add randomness.

This is just a quick idea, so I don't know what it would really look like.

I would prefer using shaders that changing the palette (even though that's a great idea) because it is more suitable to an effect that is useable on different enemies, each with their own palette.

Answer 2

An old trick is to use color indexed images and cycling the color table for some pixels (this gives pretty good animations, you can see an example here and it's explained there.

Using the same idea, you could use simple hue shift or even color mapping in a shader.

Of course to have more control on the graphic output, i'd suggest an animated sprite (ie : making an image sequence for your effect).

Answer 3

I've created something like it in 3d. Youtube movie is at http://www.youtube.com/watch?v=-j442OTfSmM . The trick behind this is to apply a selected color from a gradient to your object, moving through the gradient based on location and time. In other words, if the effect starts from the top, you use the color from the end of the effect at the top and the start of the effect at the bottom to make it appear as if it's going down. You also add a little bit of perlin noise based on the local x/y/z coordinate to get a slightly more perturbed effect - makes it look less synthetic. All three effects are in fact the very same effect routine, just different locations, speeds, gradients and so on.

I can post the code online tonight (in 8 hours or so) if it would help you. It does look a lot better on 3d models as they have depth information, making the effect look like it's not a flat moving image :-).

Answer 4

That effect is 2D frame by frame pixel art.

You could achieve something similar but I do not think it will be possible emulate that exact effect without doing it manually in a raster art program.