Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / game / Unity

Day 93 of 100 Days of VR: Endless Flyer – Creating the Invincible Power-Up Asset with Fire Particle Effects

0.00/5 (No votes)
6 Feb 2019CPOL7 min read 1.9K  
Third and final power-up for the cube flyer series: the invincible power-up!

Introduction

In this post, we’re going to start working on the third and final power-up for the cube flyer series: the invincible power-up!

The invincible power-up will speed the players and make them immune to any damage that they’ll take.

At this point, we would be beating a dead horse with just adding an asset, to spice things up a bit, we’re going to find another asset and combine it with a particle effect.

Here’s today’s plan of action:

  1. Find a rocket model for our invincible power-up
  2. Create a fire particle effect for the rocket thrusters

We’ve been doing more and more things with the particle effects, but today will be one of the more involved things that we have yet to do with particle effects!

Step 1: Add a Rocket Model to Unity

Step 1.1: Find a Rocket Model to Use

At this point, we already know the drill, let’s find a free rocket that we can use online. I went to free3d.com to look for any rocket model to use.

Here, I found a rocket that we could use. It’s called Rocket V1.

Image 1

Step 1.2: Adding the Model to Unity

Download the model. It’ll appear in a zip folder. Once you unzip it, there will be 3 files, we only care about 2 files:

  1. .obj – the model to be used
  2. .jpg – the texture we will use for our model

I renamed both files to be called rocket (for consistencies) and then dragged it to our Unity project.

Now that we have imported the asset into the game, let’s use it!

  1. Drag the obj into our scene
  2. Drag our jpg onto our rocket game object

Here’s what we have now:

Image 2

As you can see, the rocket is gigantic, but we’ll fix this later.

Note: I already adjusted the rotation of the rocket to be facing upward, normally, it’d be facing horizontally.

Step 2: Creating A Fire Particle Effect

Step 2.1: Making the Fire Particle Effect

To make a fire effect, I watched a couple of tutorials on making a fire, out all of them, I really liked: Unity VFX Tutorials – 08 – Basics (Fire)

It showed you how to make a fire effect in a step by step manner. There was a lot of good information that I won’t use for creating our own fire (we could just take the prefab that the tutorial provided us), but there were a couple of interesting things I learned:

  1. All we really need for the particle system is a texture/material, a lot of the take used to make a particle is already handled by the particle effect system by itself.
  2. We can achieve more complex particle effects by combining multiple particle systems together as shown here in the video.
  3. And overall, a lot of ways we can use the particle system such as changing the colors and the alpha to get a fading away effect.

It’s a 20-minute video, if you’re even remotely interested in seeing how to make a particle system, I recommend checking it out!

Nonetheless, let’s get started in re-creating the particle effect shown in the YouTube video, I’m only interested in creating one fire particle effect, so I’m going to omit the rest.

  1. Download the unity package from the YouTube video above.
  2. Import everything from the package into our Unity workspace, everything should be in the folder 4_Fire
  3. We’re only interested in the TXT_Fire_01 Texture, if you look at it, looks only white and that’s because the image itself is white with a transparent background (which is also white).
  4. Let’s create a new material called Fire inside our Material folder.
  5. For our Fire material, set our shader to be Particles > Additive.
  6. Then, set our Particle Texture to be TXT_Fire_01.

When we’re done, our Fire material will look like this:

Image 3

Notice that we can see the texture shape now?

We’re going to be using this material for our particle system and it’s going to generate this texture effect for us, and because we create a lot of particles, you won’t ever notice that our fire is being made by these 4 little shapes.

Here’s what I mean:

Image 4

Now let’s make our particle system.

In the game hierarchy, create a new Particle System and call it Fire Particle.

We’re going to make a large set of changes now, most of this will be taken directly from the YouTube video.

  1. Start Lifetime: 1.2 – how long each particle will live
  2. Start Speed: 2 – how fast each particle will move
  3. Start Size: 1.75 – how large each particle will be
  4. Start Rotation: a range from -45 to 45 – randomly rotate the particle with the given angle
  5. Start Color: FFDDBD – the color of the particle

Image 5

Now with these base settings, we want to go to the Shape tab, from there change the value:

  1. Angle: 5 – how spread out will the particle come from
  2. Radius: 0.1 – the shape we are using is a cone and the radius decides the size of where the particles come out from

Next up in the Color over Lifetime tab:

We want to choose a gradient of color, here’s what it looks like for a better visual understanding of the colors over time.

Image 6

To summarize, the top arrows are used to control the opacity (0 is clear, 255 is solid) and the bottom arrow controls the colors.

  • For the Color, we want to use the fire color, which consists of a yellowish color of FEFF00 and a reddish color of FF3600, try to match what I have above and feel free to play around with the color!

After colors, we have Size over Lifetime, which changes the particle size over time.

  • Here’s what we want, basically we just want to make our fire start at a 5 size and end at 1.

Image 7

Next up is Texture Sheet Animation, this will allow us to play through an animation from the texture that we provided. The texture we use can cleanly be sliced into a 2×2 grid, we’ll be animating through each of the fire shapes in the texture.

  • Change Tiles to be: X:2 Y:2 – This defines the size of the grid we want to subdivide the texture to be in:

Image 8

Here’s what 2×2 looks like:

Image 9

And here’s what 2×1 looks like:

Image 10

With 2×2, we’ll be animating through all 4 of our sections in our texture.

Finally, we’ll be going to Renderer to add our material:

In the Material slot, add Fire:

Image 11

After all of this, we should have something like this:

Image 12

Step 2.2: Adding the Fire Particle Effect to the Rocket

Now that we have our thruster particle, it’s time to add it to our rocket! We’re going to need to do some scaling around to make the rocket the same size as our other power-ups and we must scale our fire effect to match it.

  1. For the rocket, we want to change the scale to be (0.015, 0.015, 0.015) and change the Rotation to be (270, 0, 0), which will make the rocket face upwards.
  2. For the Fire Particle, make it a child of rocket and then change the scale to be (0.5, 0.5, 0.5), the rotation to be (180, 0, 0) and the position to be (-45, 0, -550)

After all of that, we will have something that looks like this:

Image 13

End of Day 93

And there we have it, we have it, our final power-up! This wasn’t a simple grab drag and drop post now, was it?!

In the end, we probably could have just used the prefab from the YouTube video, but I’ve certainly learned a lot going through all the settings and then playing around with them and hopefully you guys have too!

Next up in our series, we’ll be adding the power-up into our game!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)