How to create a Mega-Rainbow-Lazer in Unity2D

Every time we thought about cool special attacks we could include in Shooting Stars, the mighty Mega-Rainbow-Lazer came into our minds first. So now I will describe how we created that awesome piece of destruction.

When I thought about how to build that weapon, I feared that it will be quite complicated. My first approach was to use a LineRenderer with an animated texture for the lazer itself. But here we stumpled upon some difficulties by combining animated textures with a dynamic lazer height. After some tests with the LineRenderer we realized that we don't necessarily need an expandable lazer which made things a lot easier. So, I decided to switch to a Sprite Renderer that is stretched bigger than our screen will ever get.

But we still had a problem with the animated lazer "stripe"-thingies to give the lazer more juicyness. The easiest solution to solve that was to handle those white stripes (haha) like bullets that even deal damage to enemies – which fortunately solved the problem on how we deal damage to enemies on the fly. 

Basically the solution I used for the lazer is to create a stretched Game Object with a Sprite Renderer that renders the rainbow texture and just move the bullets up on the rainbow sprite. The dynamic lightning is created by a Sprite Renderer behind the actual lazer with a mobile/particle/additive shader. To give the lazer some additional dynamics I changed the width and opacity of the sprites randomly.

To pimp the launch area of the lazer a bit, I simply used a white circle with colored border and animated the strength of the border. 

Our lazer consists of five main parts:

Here is the code that adds the mentioned dynamic effect to our fancy lazer:

float scaleX=Random.Range (0.8f, 1.2f);
laserGO.transform.localScale=new Vector3(scaleX, 1f);

float lightOpacity=Random.Range (-0.1f, 0f);
Color newColor=lightMiddleSpriteRenderer.color;
newColor.a=startLightOpacity+lightOpacity;

lightMiddleSpriteRenderer.color=newColor;
lightStartSpriteRenderer.color=newColor;

Everything mixed together results in a cool looking Mega-Rainbow-Lazer:

Update #1 
gobgobs asked us:

"Is it possible if you can expand a little on the light created?"

Sure, creating the dynamic light was pretty easy. 

1. Create a new GameObject, add a Sprite Renderer with a Sprite like the Rainbow Light Texture from above. Your object will look like #1.
2. Create a new Material, in our case we named it "AdditiveLight", and set the Shader to "Particles/Additive (Soft)" or "Mobile/Particles/Additive". Now all you have to do is to drag the new material into the material slot at the Sprite Renderer (replace the "Sprite-Default" material) The rendered GameObject will look like #2.
3. Since we are using a black/white Sprite we can make use of the "Color" option to tint the Sprite in whatever color we prefer. Play around with the color and opacity settings and you get an effect like #3

In our case we just scaled the light a lot up and turned the alpha channel of the "color" option pretty low. While shooting the lazer beam we dynamically randomize the width of the lazer which gives us this nice dynamic light effect. (see the script above)

We are using the same technique quite often, e.g. as a permanent light effect for our main character Tscherno or to give our bullets and rockets more atmosphere.

Update #2
We've been asked on Reddit to share a sample project on how to create the lazer and the dynamic light. There is nothing we love more than to share what we've learned in the last couple of months. – Please be fair and don't use our graphic assets in your own project.