Spaceship Shield Flare

Question

I'm trying to implement a system whereby a "shield flare" will be shown whenever a projectile impacts the shield. The shield itself is one like in Star Wars, where it's more like a skin around the spaceship, rather than a simple bubble.

The problem I'm having is determining how to draw a simple flare effect where the projectile impacted the shield. I can determine the Vector2 point where the shield was hit. Right now, I'm able to show the whole shield whenever it's hit just fine.

The problem as I see it, is that I somehow need to mask out the shield, except for a few pixels around the point of impact. Either that, or I'm going about this the completely wrong way.

What I can do so far is draw the whole shield:

What I need is to be able to draw a piece of the shield on the point of impact:

Any help would be appreciated.

Answer 1

You can do this via masking on the cpu if you prefer to not use shaders yet.

You'll need these resources:

• Spaceship texture (no shield visible, left)
• Shield texture (only the shield visible, needs to fit the ship, middle)
• Empty editable Texture (pixmap) that you can draw onto (same size as shield texture, right)
• Point of impact

You can draw your ship like normal. After drawing the ship, you need to copy the shield textures pixels, which are at a certain distance (a few pixels, maybe 3 or 4) from the impact-point, to your empty texture, and render this edited texture on top of your ship. You should repeat the copying for every impact point, just copy everything to the same texture.

This image shows the textures from left to right in the same order as in my list. (the red parts are just to visualize borders and stuff)

If you want it to be fast too, you need to render it with a custom pixel-masking shader, it should be just as simple as this process, if you know how to use shaders, but i do not know how to help you there.

Edit: An easy way get this running in an approximated way is to just draw a particle effect at the point of the impact like Felsir suggested, which is also rotated towards the center of the ship (or just center of the texture). You probably won't see a huge difference between this and a masked shield texture, it'll be a lot faster too.

Answer 2

You could draw this using a multiply blendstate.

BlendState multiplyblend = new BlendState();
multiplyblend.ColorBlendFunction = BlendFunction.Add;
multiplyblend.ColorSourceBlend = Blend.DestinationColor;
multiplyblend.ColorDestinationBlend = Blend.Zero;

Create a bitmap of a white circle in a black background (mask). The white is the part of the shield that should be visible. Since you know the point of impact, you know where to put the centre of the circle. Draw the shield, multiply the graphic with the white circle (effectively drawing everything else black). Then add the spaceship sprite in normal blendmode.

Keep in mind you'll need SpriteSortMode.Immediate for this to work.

If you have a lot of shields/ships, prepare all white circles on one screen-sized texture and have the effect drawn once. The mask should be on a transparent background for this- as the mask rendertarget will be colored black:

1. Draw all shields on screen
2. Clear the mask rendertarget with black
3. Draw all white circles where shields should be visible on the rendertarget (effectively create one screen sized mask)
4. Multiply the screen and the mask rendertarget.
5. Draw the rest of the game entities.