Creating Fire with the Particle System

In this tutorial I'll be showing how to create a particle system which displays a fire, some smoke and heat distortion. As an addition we'll be adding small sparks flying around it. For this we need a simple base map, particle materials and a particle system. The complexity of the base map is up to you. You can open a retail map if you want to.

I'll try to be as helpful as I can, so this wont turn into a "do-this-do-that" tutorial, in which you'll only learn the do the exact thing the tutorial describes. I hope you'll learn how to create various particle systems based on the knowledge applied in this tutorial.

For your info: this tutorial will use only retail content, no need to import anything you've created in external applications, unless you want to and know how to. I also expect you to know the basic functions of the editor. I will not guide how to create a first room, or open the generic browser. You can learn that stuff elsewhere. Thanks.

1. Open you editor.

If you opened a premade level, you can skip section 1.

Inside the editor, create a simple map, in which you can see your particle system properly. I suggest adding some simple materials, as the default block material might make the emitter looks silly. Feel free to do what you want and for how long you want. This tutorial will wait for you here.

Save your map, effectively creating the map's own .upk-file, in which we will create the new particle system. To be safe, add the DM-/CTF-/etc. prefix to avoid funkyness from happening if no gametype is specified (although there might be none).

2. Creating the particle materials.

The materials particles use are effectively the very same materials as the other "normal" ones. But materials used with particles need to have bUsedWithParticleSprites checkbox checked. This allows us to use this material with particle systems. Two other checkboxes underneath the first one (bUsedWithBeamTrails and bUsedWithParticleSubUV) are related to particle systems too. The first one should be checked if you want to use this material on a beam emitter (e.g. a bolt of lightning) and the second is for materials which are split into rows and columns of images, usually playing as an "animation" when read in a certain order. This allows one particle sprite to change it's form as the user wishes.

Material 1: The flames.

The first material we're creating is the one used for the fire itself. You can use what ever material you wish for it, but for the sake of creating fire, you could search for a texture which actually looks like flames. There are good ones in the Envy_Effects packages. To see actual textures (bordered red) you should check the checkbox in the generic browser to see them. Browse the packages until you find a good one.

I found a good one in the Envy_Effects package: Envy_Effects.Fire.Materials.T_EFX_Fire_Base_01. In other words, open the Envy_Effects package, browse to the group Fire, open subgroup Materials and select the texture named T_EFX_Fire_Base_01. Remember where this material is, we'll need it again in a few moments.

Browse to your map's package (has the exact same name as your level has). Open it, right-click on a free space in the browser and select "New Material". Name it how ever you wish, and assign it to a group if you want to. I grouped mine into "Effects" and named it "MAT_Fire_01". Click "OK".

Remember to check the needed checkbox in the material's properties (bUsedWithParticleSprites). Because fire emits light, we do not need anything black or darkening areas in our material. In this case, continue looking at the properties, and change the BlendMode to Additive (works a bit like "Screen" in Photoshop, only light values are applied to the layer underneath). Because fire emits light, change the LightingModel to Unlit.

Still remember where the good fire texture was? Good, we'll be needing it right now. Without closing the material window we just created (minimize it perhaps), browse to where the flame texture resides (my selection was Envy_Effects.Fire.Materials.T_EFX_Fire_Base_01). Select it so it is highlighted. Now close the Generic Browser and open the material window. Right-click on the empty gray area and add a "New TextureSample".

If everything went correctly, you now have a sample of your flame texture in your material, which has been enabled to work with particle systems. Next we will add nodes and make the flames visible in our preview.

Add a "VertexColor" node besides your texture sample. With particles, using a VertexColor allows you to change the color and opacity inside the particle system. Connect the VertexColor and your texture with a "Multiply". After that connect the alpha connector or the VertexColor to the materials Opacity connector. Connect the multiply to the Emissive connector.

My flame looked a bit dull and dark, so I added another multiply (before multiplying the VertexColor) with 5 to the original TextureSample. Now it looks a bit better. If you're looks "bad" too, you can modify the original texture how you wish (even change the original color to something else).

Check that everything is okay, and save the material. Exit the material window. Now we have the flame material done.

Material 2: The smoke.

No smoke without fire, or vice versa ... or whatever. To make our flames look good we need some smoke. The workflow for this material is quite the same. We only need a smoke texture.

Create a new material where you made the flame material, check the checkboxes and change needed settings. If you forgot what they were, read the section in which we covered the flame material. In the material window, add a new texture sample using a smoke texture. I used Envy_Effects.Smoke.Materials.T_EFX_GoodSmoke_01.

Add a VertexColor, multiply the texture with it and connect the dots (remember the opacity connector!). Change the outlook if you want to. When you're satisfied, save the material and we'll continue.

Material 3: The distortion.

When heat rises from flames or another heat source, it distorts things behind it. This happens when denser cool air mixes with the hot and expanded air. In UE3, distortion inside materials can be used to create this effect.

With distortion, you need a texture which is desaturated (although optional) and then modified to make the distortion look visible enough, but not overpowering. You want a wavy texture to be used, nothing too complex, but complex enough that it's not only an odd shape.

Distortion works a bit like displacement maps/bump maps/parallax maps, etc.: the whiter adds more distortion, depenging on the shape of the image. Darker has less distortion. White: full, black: none.

Create a material as we did before, check the checkboxes and so on. Add your selected texture as a sample to the material. I used Envy_Effects.Energy.Materials.T_EFX_Energy_Swirl_0 4. It's swirly and looks like gases are mixing together. Perfect for this use.

Desaturate it with "Desaturation" (leave the Percent connector unused, will default to 100%/1.0). Add a VertexColor, but instead of multiplying, just connect the white alpha channel to the material's Opacity (Edit: Also connect the alpha with a multiply to the texture). We don't need to change the color of the distortion, right? Then connect the desaturated texture to the Distortion connector. If you look closely, you should see the grid around the preview get distorted here and there. If it looks like nothing, you can multiply the texture a bit before connecting to the Distortion connector. I used a multiply of 4 for mine.

Once done, save and close. Now we only need the spark material.

Material 4: The small sparks.

When you view a campfire (wood burning in other words), you see small sparks flying off every now and then. We'll add those to our particle system too.

For this we create a material as we did for the three other ones. This ones basically the same as the flames and the smoke, but with a different texture yet again. Find a small sparky looking texture and create a new material and add it in. I used Envy_Effects.flares.Materials.T_EFX_Flare_Round_Ha rd_01. It's white yes, but we can change the color inside the material window using a multiply node. I multiplied the original texure with a Constant3Vector (a RGB constant) with values of R3, G2 and B0.5. The material turned a bright yellow/orange.

Add the same nodes as before, connect the things, save and close. Materials are done!

3. The particle system.

Particle systems (often called Emitters) are used to display various particle effects. We have created four materials, so we need four particle emitters within a single particle system. This particle system can then be added to your level.

Browse back to your map's package, open the group you made your materials in right-click on an empty space, select "New ParticleSystem". Name it and so on, hit OK. If you do not see it, make sure you've checked the chekcbox on the top-left area which says "Particle System".

Double click on your particle system. A new window opens. The official name is the "Cascade Editor". I like to call it the particle editor.

There are four important sections inside this window. I'll go clockwise:

1. Top-left: The preview of the particle. A WYSIWYG of what you're creating.
2. Top-right: A list of your particle emitters and their modules.
3. Bottom-right: Curves area, we will not be needing it in this tutorial. With curves you can visually see how various changes during the lifetime of a particle sprite happen. You can change the values by hand too.
4. Bottom-left: Properties list displays the changeable properties of each emitter and its modules.

(I'll be referring to the section numbers from this point forward.)

The toolbars and menus are quite self-explanatory, but leave the settings around there to defaults, just to be sure.

To create a new emitter, right click in an empty spot inside section 2. An option allows you to add a "New ParticleSpriteEmitter". Add four of them. After that, look at the three icons beneath the name of each emitter. The leftmost icon is a light blue with a check in it. For the last three ones, click it. They should turn to a red icon with a black cross in them. Now they're "hidden", and you can concetrate to the first one.

Emitter 1: The flames.

With the leftmost particle emitter, click on it. Section 4 should change now. In section 4 you'll see the properties for this emitter. Upmost is the name, change it to something which describes the emitter, e.g. "Flames".

Underneath the name is an expandable section "RequiredModule". Inside this are the needed properties to make the emitter work. The ones we need for the flames are Material, MaxDrawCount and SpawnRate.

First, add a material to the Material. You guessed it, the flame material we just created. Browse and select it, then insert it to the Material slot inside the emitter. If you followed my lead when creating the material, nothing should be visible yet. To fix this, you need to add a Initial Color module to the emitter. In section 2, right-click on a empty space under the emitters module list. A menu appears. Browse to Color and and click Initial Color. A new module should appear. If you did right, the flames should appear in section 1.

With modules you can alter the appearance and behaviour of a single emitter. You can make them change color, size, rotation, et cetera. Some are possible to alter depending on how long a sprite has been flying around. We'll do some of this in a few moments.

You can see the flames, but they're quite dull, just going up with a little variation. Let's make them a bit more random. Add a Initial Rotation module like you did with Initial Color. Once added, click once on it and section 4 changes again. You can see the values Min and Max spanning from 0 to 1. Now the sprites can spawn with a starting rotation. To make it a bit more random, change the Min to -1. Note: Initial Rotation rotates while the particles are spawn, not while they're moving around.

They're a bit more random now, but isn't the height of the flames (the height between the spawnpoint and deathpoint) a bit too high? Look for a Lifetime module in section 2. Inside this you can specify the lifetime, or the time the particle sprite can move around before getting "killed". To make the flames a bit shorter, I used 0.5 as the Min value and 0.75 as the Max value of of the Lifetime module. Different values, yet again, add more variation. What this change in Lifetime does, is to limit the time the particles have to move upwards. Shorter time, shorter moving.

To me it looks like the flames could use some slowing down. To slow the speed of the particles, we need to modify the Initial Velocity module of our emitter. Initial Velocity adds movement to particles once they're spawned. Lower numbers means slower speeds. When the properties are expanded, you are presented with a Min and Max values, in XYZ coordinates. You can determine the speed in 3D space, along the XYZ coordinate. You assing different numbers to different axises (spelling?). Initially, the particles go XY-10 to XY+10 and Z+50 to Z+100. We want to modify the Z values. To Min Z add 32 and to Max Z add 64. Now the particles go a bit slower. Leave the XY values as they are (from -10 to +10), adds some randomness horizontally.

The flames need fading in and out. For this we use a Color Over Life module. It does as it says, modifies the color of the sprites over their lifetime. For fading we'll only use the AlphaOverLife section in the properties (section 4). This modifies the opacity value of the sprite. Open it all the way to the Points sections and look at the values. The lifetime of a sprite is measured between 0 and 1 (0 = spawn, 1 = killed). Although the numbers can be over these numbers, they modify the values either before spawn or after death.

Points have 5 fields: InVal, OutVal, ArriveTangent, LeaveTangent and InterpMode. The only ones we'll use in this tutorial are InVal and OutVal. InVal marks the time the sprite has been living (measured 0-1). OutVal marks the value of the module at the point of InVal. In example, the point [0] has values 0 for InVal and 1 for OutVal. This means that at time 0 (spawn) the alpha of the sprite is 1 (full opacity). Change the OutVal to 0 and see what happens in section 1. A smooth spawn fade, but it ends up with oddly popping deaths of sprites.

For fading in and out you need three points: 1 for birth with no opacity, a midpoint with full opacity and an endpoint with no opacity again. To add a point, click on the green ball besides the Points text (the right side). Now you have three points you can modify. We need to decide at which point the flames are fully visible after spawning. I'd say 0.25 is a good number. In the first point ([0]), make both InVal and OutVal zeros. Now the sprites spawn fully invisible. The next point, insert 0.25 to InVal and 1 to OutVal. Now the sprites gain full visibility in 0.25 of their lifetime. To the last point, add 1 to InVal and 0 to OutVal. This means that at point 1 (death) the sprite has faded to invisibility (0).

View the emitter now in section 1. Nice fading, eh?

I think we're done with the flames. Save the particle system and we'll continue.

Emitter 2: The smoke.

We'll create smoke a bit like we did with the flames. We're going to use almost all the things we used previously, with some additions.

Smoke usually appears after the flames, so we need either to position the spawnpoint of smoke a bit below where the flames die out or add enough fading to make it look like it. I'm going with fading.

Make the next particle emitter visible in section 2 (click on the red icon) and rename it to "Smoke". Add a material to it and insert a, Initial Color module. Now you can see the smoke.

The smoke is white I know, we'll be making it black in a moment, after the fading is done.

Add your rotations, lifetimes, velocities and such. I used the same Initial Rotation parameters as with the flames: Min -1 and Max 1 and gave it a staring velocity of XY -8 to 8 and Z of constant 32. I made Lifetime span from 1.5 to 3.

To make the smoke fade properly we use the same technique of three points (within the Color Over Life module) as with the flames, but we make the first point's InVal to 0.333 and the second points InVal to 0.75. Now the smoke seems to begin higher than the flames do and disappear just nicely.

If you want to smoke to be black, open the ColorOverLife section, you'll see a similar thing as with AlphaOverLife. Now you can modify the colors during the particle's lifetime. To make the particle black, open both points and insert XYZ values of -0.25 to all of them. Now the smoke should be black. The smaller the number, the darker they will be. Note: Click "View" on the toolbar and enable "View Geometry" to see the smoke better.

I want the smoke to expand a bit when it rises. We can use a Size By Life module for this. It works like Color Over Life, but modifies the size of the particles in XYZ. Add the module, expand to points and open the second ([1]) point. You can see that XYZ values are at 1, when the InVal is at 1. Change the XYZ values to 2. Now the size of the particles are doubled during their whole lifetime (1.5 to 3 seconds).

Now we'll add rotation to the particles as they're flying. You need some rotation rate for this. Add a module called "Initial RotRate", which can be found under RotationRate. You should see rotating the moment the module is added. Quite fast rotating for smoke I think. To change the speed (the rotation rate), click on the new module and change the min and max values. I think min -0.2 and max 0.2 are good enough.

Smoke's done, I'd say. Let's go to distort stuff!

Emitter 3: The heat distortion.

Now we will add some distortion. Remember, it shouldn't be too overpowered, I'd say a bit too thin than too much of it.

Distortion is created like the other two were done. Add the material and mix and tweak how you like. I'll let you decide what to use and how. Once you're satisfied, come back.

If you're running into trouble trying to get it visible, make sure you added the Initial Color module and tried saving, closing and reopening the particle system once.

if the distortion is too intense, you can tweak it inside the material editor or lower the opacity within the emitter properties (like we did with fading, only make the highest value less and 1.0, say 0.75?).

Now I'll share what I did:
 

• · Lifetime: 2-4 seconds.
• · Initial Velocity: XY from -4 to +4, Z from +16 to +32.
• · Initial RotRate from -0.1 to +0.1.
• · Color Over Life: AlphaoverLife with 3 points -> 1 InVal 0 and OutVal 0. 2 InVal 0.5 and OutVal 0.2. 3 InVal 0.75 and OutVal 0.
• · Size By Life XYZ 2 at InVal 1.

Looks decent to me. Let's go to sparklies!

Emitter 4: The sparks.

The sparklies are still quite the same as before, but to make them more interesting we add some variation to their speeds and directions.

Add the last material and Initial Color. We want them to spawn randomly, so we need some bursting. Open the emitter itselfs properties and scroll down to "BurstList". For burst lists to be operable, you need to set SpawnRate to 0. I'm not entirely sure about the burst lists myself either, but for this tutorial, we'll create 4 items to the list, with a random Count number between 1 and 2 for each. I made four items with 2, 2, 1 and 1 as Count and CountLow. The time seems to be capped between 0 and 1, so it might relate to the lifetime or emitter duration... I set them to random values: 0.1, 0.2, 0.5 and 0.75.

You need to set the emitter duration to something reasonable. I made mine 1.5. Emitter duration is the time between the BurstList is activated it seems.

The sparks are awfully large. To make them smaller, click on Initial Size module and change the min and max values to something reasonable. I think between 0.5 and 0.75 works for me. You might want to slow them down too. A Z-value between 16 and 48 in Initial Velocity works for me.

Make them fade in and out, I used a two point Color Over Life fading for this one. I set InVal 0.75 to OutVal 1 and InVal 1 to OutVal 0.

To make them move randomly like they really do, we need an Orbit module. It makes them swirl and change direction every now and then. Add the module and see what happens.

They begin orbiting like hell! No worries, this can be toned down. Expand each tab within the module and let's see what they do.

Offset seems to add variation where the particle is spawned. Because the flames are spawning from a single point, we need to tighten the offset. I set all values to +-4 except min Z to 0.

Rotation seems to do nothing for this one. I left all to defaults.

RotationRate makes the particles spin around. You need to tone this down to make it look better. I used values between -0.5 and 0.5 for everything.

I think that's done. Particle system ready for insertion!

. Using the new fiery and smoking and distorting and sparking particle system in you levels.

Now you have a finished particle system residing in your map's package. adding it to your level is simple. Just select it in the generic browser, go to a viewport, right click, Add Actor, Add Emitter: [particle system name here] and there you have it, a particle system. Hit the joystick (Realtime Preview button) of the viewport to see it in action. Here's mine:

(Of course looks better when moving around.)

In case you run into trouble concerning parts of this tutorial, please post here. If you spot mistakes/bad typos in the tutorial, please post here. If you want more tutorials please suggest here.

Hope this helped.

Written by musilowski

Top