Can’t Have a Space Game Without Giant Beams, Am I Right?

For the purposes of this article I’ll be going over the creation of the beam itself. There are several ways to implement how it causes damage, but I want to keep this one short because VFX has a surprisingly amount of details in it.

I created the sprite for the Laser Beam in Photopea which and it looks like this. Feel free to take it if you like:

First things first, let’s breakdown the behaviour of the beam itself step by step, just like we do with our code.

1. Show a telegraph and start the charge up particle effects
2. Charge up particles spawn every 1 second for 3 seconds and play a sound to warn the player
3. On the 4th second, fire the laser and hold it for 3 seconds
4. Fade out for 1 Second

Now, since we’re doing VFX, let’s go ahead and breakdown the parts of the beam:

1. The Charge Up Particles
2. The Telegraph
3. The Beam

With all of that in mind, we can now get started

Step 1: The Telegraph

Before we start putting things together, we need to make sure we have a center point for all of these pieces to sync around. In my case, since the particles are centered to where the Beam comes out, I also decided to make it the center of the effect and Child the other pieces to it. However, it is not uncommon to use an empty Transform/GameObject just for the position and then have all of the parts of effect be a child of that empty GameObject.

Now that we have our center piece we can make the telegraph (and the beam) a child of it and simply adjust the y scale to an enormous size so that it looks like it’s infinite because it goes off screen.

Scene View vs. Game View

Then we need to adjust the y position to offset it because the pivot of the Sprite is set to Center

We can actually change the pivot for a sprite and I’ll get to that when we go over the Beam, but I was honestly just too lazy to bother for this one because it doesn’t move and simply follows the rotation of the Boss.

That’s the telegraph done!

Step 2: The Charge Up Particles

Unfortunately, there isn’t a dynamic to do this without using VFX graph so you’ll have to a lot of experimenting in order to get it just right. Here are the properties we’ll be working with and their settings for my case. I won’t go into a huge amount of detail on each one because then this would become an essay. The setup looks like this:

1. Duration = 7.5: So that the animation attached has time to fadeout effects and sound properly
2. Start Lifetime = 1: Because we need to play them every second so they can’t be lingering around after that or it will look crowded. There will be lots of fiddling with this, Start Speed, and Radius in order to sync the particles disappearing at the right time
3. Start Speed = 4: The speed at which the particles approach the center. There will be lots of fiddling with this, Start Lifetime, and Radius in order to sync the particles disappearing at the right time
4. Start Colour = Yellow: Purely aesthetic. Whatever colour you need
5. Simulation Space = Local: Unlike with the Afterimage effect, we want the particles to follow the Transform this time
6. Stop Action = Destroy: The action that the Particle System will take when the Duration is finished and Loop is set to false. In this case, we want to destroy the GameObject.
7. Emission > Rate Over Time = 0: We’ll be using bursts to sync them
8. Emission > Rate Over Distance = 0: We’ll be using bursts to sync them
9. Emission > Bursts[0] = {Time : 0, Count : 20, Cycles : 3, Interval : 1, Probability : 1}: What this translates to is “Start the bursts with 0 delay (Time = 0) with 20 particles each (Count = 20) and do it 3 times (Cycles = 3) with 1 second in between (Interval = 1) 100% of the time (Probability = 1)”
10. Shape > Circle: Because we’re in 2D
11. Shape > Radius = 2: What radius away the particles will spawn from the center. There will be lots of fiddling with this, Start Speed, and Start Lifetime in order to sync the particles disappearing at the right time
12. Shape > Radius Thickness = 0: So that they spawn on the line of circumference instead of anywhere in between
13. Shape > Arc = 360: So that the particles spawn using the entirety of the circle’s circumference
14. Shape > Mode = Burst Spread: So that the particles all spawn at the same time evenly along the circumference
15. Velocity Over Lifetime > Speed Modifier = -1: So that the particles go backwards. You could also set start speed to a negative number

And that’s the particles done! Here’s the inspector window. Luckily, it all fit on one screenshot:

Step 3: Fire The Laser

The set up for the laser is quite simple. Since we want it to extend downwards we can simply set the pivot as TOP in your sprite’s import settings like so:

You can find the import settings for your sprite by simply clicking on it in your project folder. It will show up in your inspector

And then increase the y scale in the transform from there. Like so:

Since we’re going downwards make sure you also set the colliders center accordingly as well or the collider will not scale with the laser’s visual. In my case it’s -2.56

Now that we have all of our parts configured, it’s time to start syncing. We could sync them through code, but using an animation will be much easier.

Step 4: Syncing Everything Together And Fading It Out

We’ll place the Animator on the object that all of the parts are children of so that we can animate everything together. With that being said the animation looks like this:

And that’s job done! As long as we remember to set the ParticleSystem’s Stop Action to Destroy and the Duration to the same length as the animation then the ParticleSystem will destroy the effect for us. No extra scripts needed!

Conclusion

There are a lot of details that go into VFX so remember to be patient and take your time learning them piece by piece. Playing around with particle systems or downloading VFX assets to see how they’re set up is a great way to learn as well!

Hope that helps! ^_^b