I moved to a new URL! Check it out!

Dev Log: Impact Effects

Dev Log: Impact Effects
Whoops, been kinda neglecting my poor blog for a week. I've been making some progress on my fancy game project though! Just have been forgetting to post about it.

Image


One of the things I tackled over the last couple of days was adding more visual effects for stuff like damage impacts. I want damage to feel over the top juicy at all times so that every impact is really felt by the player. The effect I ended up with for damage impacts is an inverted flash combined with some red colored mixing and additive blending.

Image


Right now I'm using one utility shader that has a bunch of parameters on it for various effects. Check it out:
#version 120
uniform sampler2D texture;
uniform sampler2D noiseTexture;
uniform vec4 overlayColor;
uniform vec4 additiveColor;
uniform vec4 subtractiveColor;
uniform float overlayNoise;
uniform float inverted;
uniform float noiseX;
uniform float noiseY;

void main() {
//get color of this pixel
vec2 pixpos = gl_TexCoord[0].xy;
vec4 pixcol = texture2D(texture, pixpos);

vec4 outcol = abs(inverted-pixcol);
outcol.a = pixcol.a;

//mix in the overlay color
outcol = mix(outcol, overlayColor, overlayColor.a);

//add the additive color
outcol += additiveColor * additiveColor.a;

//subtract the subtractive color (DUH)
outcol -= subtractiveColor;

vec4 noiseColor = texture2D(noiseTexture, mod(pixpos, 1) + vec2(noiseX, noiseY));
outcol = mix(outcol, noiseColor, overlayNoise);

//reset alpha to prevent coloring transparent pixels
outcol.a = pixcol.a;

//output the final color
gl_FragColor = outcol;
}
I'm still learning the ins and outs of shaders so this probably isn't the best way to do this, but for now it seems to be working out fine.

Along with this shader there is some code in my "Combatant" component to control the shader. The Combatant has a timer that is set whenever it takes damage. This timer is then used to control various parameters on the shader. Every 2 frames the image is inverted using the shader. When the image is inverted there's a red additive color blend applied to the image, and when the image is not inverted there is a normal red color mix applied. The intensity of the color mix is determined by the timer. It starts very intense then fades away.

On top of that another texture is blended with the image. The other texture is just a simple image of generated noise. I'm not totally sure why, but for some reason I like the noise texture along with the rest of the effects. It kind of represents a disruption to the target taking damage, or something poetic like that.

Last but not least the image also shakes around a bit. This is something I first noticed a lot while playing Street Fighter 4. An action freeze along with sprite shaking is an incredibly useful way to convey an intense impact.

Here's the little blurb of code that handles the effects for Combatants
//Handle graphics
foreach (var img in Images) {
var overlay = Util.ScaleClamp(StunEffect, 0, StunEffectMax, 0, 0.5f);
var color = new Color(Color.Black) { A = overlay };
var addColor = new Color(StunColor) { A = overlay };

img.Shader.SetParameter("overlayNoise", overlay * 0.5f);
img.Shader.SetParameter("noiseX", Rand.Float(0, 0.25f));
img.Shader.SetParameter("noiseY", Rand.Float(0, 0.25f));

if (StunEffect > StunEffectMax * 0.25f) {
addColor.A = 0.5f;
color = G.Colors.Dark;
color.A = 0.25f;
img.Shader.SetParameter("inverted", StunEffect % 4 > 1 ? 1 : 0);
}
else {
img.Shader.SetParameter("inverted", 0);
}

img.Shader.SetParameter("overlayColor", color);
img.Shader.SetParameter("additiveColor", addColor);

img.Shake = Util.ScaleClamp(StunEffect, 0, StunEffectMax, 0, 30);
}
Along with the impact effects the Bullet entities have an impact effect to help show damage. If bullets hit something and deal damage they spawn a small red and yellow explosion, and if they don't do damage then the particle is blue and cyan. This is something I saw when I played a lot of Thunder Force III as a kid!

Comments

Oliver
Oliver
Super-juicy! Drool.
Posted April 23rd 2014 9:13 AM
new comment!

Post your comment!

Name
Email
Comment