A while ago I searched for simple fragment shaders to enhance the gameplay. Most 2d fragment shader tutorials and examples focus on lightning, which is cool as lightning makes huge part of visual atmosphere, but I was looking for something else. On my quest I stumbled on noise algorithms and decided to give one a try.

I found this simple one-liner, which I used as a base for my shaders:

float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

The noise generated by the one-liner was good enough, but static unless the object was moving. I should add that I pass texture’s coordinates to rand() function – Sometimes x axis, sometimes y, sometimes both. Adding randomized float (uniform float rnd; between 0 – 1) from main program helps to create a non-static random noise when the character isn’t moving.

Along with randomized float I pass the effect intensity to the shader, a float between 0 – 1, to determine how visible the effect should be.

The rest is basically just coloring. My method was “plan what you’re able (maybe blue for this one?), iterate until stable (looks good enough)”. So yeah, trying random values always sometimes works given you have enough time and patience.

The results can be seen below.

.

Electric hit effect

electricThis effect is for electro cannon (I need to come up with better weapon names). The shader adds the blue horizontal lines, which are calculated from texture’s y coordinates. Electric sparks are just sprite animations to add some detail and visibility.

Source

.

 

Invisibility / cloaking

invisibilityI wanted to create an invisibility without making the character disappear completely. This way players could hide well against some background, but not well against others.

The shader is basically just a copy of electric hit effect, but with different coloring. During the fade in / fade out part you can actually see outlines of separate body parts, which can be avoided by rendering the character into a texture buffer before rendering it to the screen.

Source

 

.

 

Pixel boosts

jetpackStupid names for ugly effects. I use the first one for jetpack boost effect and the second one for rage / blood lust. I’m not really that happy with the result, but haven’t yet had the patience to write anything better looking either.

For the yellow shader I use bigger fragments of texture coordinates for noise. The noise is applied only to black (dark enough) areas, which in this case means outlines.

Source

 

.

rage

This effect should be more visible, shouldn’t it?

Source

 

.

 

Spawning effect

spawnDying plays a big part in PvP, so respawning should look acceptable at least. I tried to go for a ‘falling numbers’ style effect. If you use your imagination hard enough, you may be able to spot some similarities in Matrix’s effect and my spawning effect.

Source

 

Death ray

deathrayThis one is just bright vertical lines, fast visual effect for death ray damage. Instead of blood there should be some smoke and falling ash – Maybe in next versions?

Looks better with sound effect.

Source

 

 

 

 

 

.

Feel free to criticize, to point out obvious design flaws and to post other suggestions and ideas.

Thanks for reading!

 

3 thoughts on “5 simple fragment shaders for 2D games (GLSL)

  1. Pingback: solars.biz

Comments are closed.