First Beams effect

This weekend I finally had time to finish my code for auto aiming beams. Have a look:


Beams from Jan Tepelmann on Vimeo.

Not perfect yet, but a good start! When the beam has no target, the effect looks a little bit ugly. That surely needs improvement.

Calculating the beam curve
Every beam consists of a starting- and end-point. Firstly, I create a local coordinate system to make things easier. In the local coordinate system the starting point is at (0, 0) and the endpoint is at (1, 1). Now I use the XNA Curve Class to define a smooth curve between those two points. This is simply done by specifying the wanted values at the positions. The curve class can then interpolate between those position-value pairs (just use curve.Evaluate(position)). In the sketch below I defined five position-value pairs. The pairs are called CurveKeys:

• (0, 0)
• (0.25, 0.25²)
• (0.50, 0.50²)
• (0.75, 0.75²)
• (1, 1)

You can see that this is simply a quadratic curve. So why then bother and use the curve class? Because now I can add an oscillation to the curve easily, by simply modifying the CurveKey values depending on the current time. This allows adding a wave effect on the beam.

A good sketch is half the battle :-)

Rendering the beam curve
To render the beam curve I  break the beam curve down into N line segments (in the video N=30). Those line segments are drawn with the help of a custom vertex shader (with hardware instancing! cool :-). The drawing code is based on the XNA RoundLine example (describing blog post). Since the original vertex shader draws on the XY-plane, I had to modify the shader to draw on the XZ-plane. I also did some other changes to the pixel shader to have a smoother glow effect. I think I will do some more tweaking in the pixel shader to make the beam look more like plasma.

Bolts

Last week I stumbled upon this blog post about generating and rendering Lightning Bolts. Really cool stuff. I was searching for such an effect for my missile interception weapon (see video below). So I implemented my own lighting effect generator. Have a look:


Missile Shield on Vimeo.

At first I wanted to implement the lightning effects straight forward and simply use a spritebatch for rendering. But then it came to me, that it would be really nice to integrate the lighting effect in the Mercury Particle Engine which I already use in my game. This allows to customize the bolt effect by adding all kind of Controllers and Modifiers, without changing any source code. Also Mercury has a really good particle editor and the effects can be saved and loaded from xml. Some useful modifiers are for example:

• OpacityInterpolator: Adds a fading out effect.
• ColourInterpolator: Bolt can change color depending on its age.
• ScaleInterpolator: Bolt can change size.

Also its easy to add your own modifier. I created a simple jitter modifier, which you can see in the video above. The modifier moves all emitted particles randomly along their normal in the XZ plane. Implementing the modifier took me only a few minutes.

Needed Changes in Mercury
Now lets talk about the necessary changes to integrate the lightning effects in Mercury. Mercury provides Controllers and Modifiers to customize your particle effects.
Modifiers: They iterate over all active particles of an emitter and modify particle data like position, scale, color, velocity and so on.
Controllers: Those add logic which is executed before the particle trigger event. They get a TriggerContext which allows them for example to cancel a trigger event or change a trigger position where the particles get released.
The TriggerContext looks like this:

public struct TriggerContext
    {
        /// 

        /// True if the trigger should be cancelled.
        /// 
        public Boolean Cancelled;

        /// 

        /// Gets or sets the position of the trigger.
        /// 
        public Vector3 Position;

        ...

        /// 

        /// ADDED.
        /// The texture the emitter should use.
        /// 
        public Texture2D ParticleTexture;
    }
}

I added a field for the particle texture to the TriggerContext. This allows me to create controllers which can change the emitters particle textures dynamically. If the controller sets the ParticleTexture field, the emitters old texture reference is overwritten by the one provided by the controller (this is done in ParticleEffect.Trigger).
I created an abstract dynamic texture creation controller which can be used as base class for all texture changing controllers. All derived classes have to provide a DrawTexture method which gets called periodically (TextureRecalculatePeriod can be defined in the xml description of the controller).

Bolt generation controller
Bolt generation and rendering is done in the BoltParticleTextureController which is right now the only from the abstract controller derived class. Right now there are only a few parameters that tweak the particle textures look:

• Two parameters to control the random placement of the start and end point of the bolt
• GenerationCount: Number of times the line between start and end will be halved
• BoltCount: Number of bolts to render into the particle texture

In the future I want to add more parameters to customize the created glow textures. Here two example textures created by the controller:

In the last texture three bolts were rendered. But with more then one bolt there are some problems with artifacts I could not fix yet. Write a comment if you have an idea :-)

Edit. In the last few days I improved the bolt effect a little bit. The new effect can be seen in the video at the top. The old videos are still here:

Red Bolt on Vimeo.


Missile Shield on Vimeo.