This is a step by step guide to creating a simple fire effect.
Remember that once you have added a segment to an effect you can use binds with editfx_play and editfx_playlooping to test the effect. This document assumes that after adding one segment you start playing the effect looping on a ground surface in a test map. As the effect is changed in the editor, the looping effect in the world will update.
Open the FXEditor with the +editfx console command.
Click File>New or hit CTRL + N.
Right click inside the Segment window and click Insert>Sprite.
Click the Sprite Tab and in the material field (where it says '_material') enter a path to your fire image shader. In our case, it will be: gfx/effects/fire/fire4a
Go to the Motion Tab and clear out the existing Forward/Left/Up values. Replace them with a Forward range of 10 min, 50 max. Left of -5 min, 5 max, Up -5 min, 5 max. Make sure to give the Sprites a negative gravity value of -0.05 so they rise realistically.
Click the Size Tab and give your sprite particles a size range of 15 min, 30 max for both height and width. Make sure to check Linear Distribution
Go to the Rotate Tab and give the segment a 0 min, 360 max value for start rotation. On the dropdown box for Envelope, select a Linear table. Hint: Hit the L key with the dropdown box selected to hop to the first Table that starts with the letter L. For the end rotation values, set -90 min and 90 max. Make sure to select End Relative to Start.
Click the Alpha Tab and select an envelope for alpha fading. I recommend fastinslowout. This table is similar to cosine except the alpha ramps up quickly and fades slowly. Set a start value of 0, and an end value of 1. Make sure you check Blend Alpha and Color As the fire shader we are using is an additive blend.
The fire is starting to take shape. Go to the Emitter Tab and increase the count to 10 from 5.
Go to the Origin Tab. Add Left and Up min/max values of -15, 15 so that the sprites will not spawn in the exact same location. You can leave Forward at 0 so that all fire particles spawn on the same surface. Make sure the distribution is Sphere or Cylinder for even and realistic coverage.
Lets add some embers to our fire. Create a new Sprite segment and add this material to the Sprite Tab: gfx/effects/energy_sparks/spark3 Remember that you can right-click on a selected segment and click Rename so each segment you create has a more memorable name. Try renaming the fire segment to fire1 and this new embers segment to embers.
Go to the Motion Tab on the embers segment and set the Motion to 10 min 20 max for Forward. Set left/up values to be 0. This is in preparation for using Orbit and Offset. Give the embers segment the same gravity as the fire, -0.05.
Lets spawn the embers in a Cylinder origin all around the fire. Do this by setting values of -25 min, 25 max for Forward, Left and Up. Also select Cylinder distribution.
Setup the Alpha to use a Cosine table with a start value of 0 and an end value of 1.
Move to the Size Tab and set a min size of 0.5 and a max size of 2. Linear Distribution checked again, these values apply to both Height and Width.
Now lets adjust the Offset so that spawning embers will have random wiggly Orbits simulating real fire embers. On the Offset tab, set a min of -10 and a max of 10 for Forward, Left and Up.
Click the Orbit tab and enter 0 min 360 max for the Start values for Roll, Yaw and Pitch. Select a Linear Table Envelope and set the End values to -120 min, 120 max. Different Orbit values will lead to different results. Try setting values of -360 min, 360 max to see how the embers orbit faster and more randomly. You can also increase the Offset values for a similar effect. Remember that Offset determines the distance between the sprite and the rotate point while Orbit determines how many degrees to rotate the sprite around the rotate point.
Now that we have added some embers, lets add some smoke to our fire. We want our smoke to use roughly the same dynamic as the fire, so lets select the fire1 segment, copy and then paste it into our segment list. Then rename this segment to smoke1.
Now add this material to the Sprite Tab: gfx/effects/smoke/cloud_alpha2
Move to the Alpha Tab and uncheck Blend Alpha and Color since the smoke material is blend, not additive.
From the Origin Tab, we want to start the smoke a bit higher so that the particles start more towards the top of the flame, rather than at the base mixed with the fire. Set 25 min, 40 max for the Forward origin on the smoke segment.
The smoke looks a bit too white and opaque, so lets fix that now. Move to the Color Tab and set a medium greyish/brown color for the start value. Change the Envelope to Linear and set an end color of black. This will transition the smoke particles from grey to black.
Now move to the Alpha Tab and change the table from fastinslowout to cosine. This will make the smoke transitions smoother rather than start fast and fade slow. Change the end value to 0.6 while you are here as well to make the smoke less opaque.
With the smoke segment in place, we can turn our attention to some last minute details with the fire. In order to make more realistic looking fire you need to use more than one fire source image in your effect. Lets copy our fire1 segment and paste it again. This time, select the segment and hit CTRL + [ twice to move it down in the Z order with the other fire segment.
We can change the material to: gfx/effects/fire/fire2a on the Sprite Tab to see how adding a second fire image makes our fire look more realistic. The interplay between various additive materials is important to many effects.
- At this point, our basic fire effect is complete. You can adjust size, lifetimes and origins to make larger and smaller versions of this effect.
To see some a more advanced fire effect, load effects/fire/column_128. This effect uses multiple fire images, embers and smoke to build up a more complex fire effect. It utilizes heathaze shaders to warp the image around the fire as well as an animated strip of fire. An animated strip is an advanced material that is one image consisting of different frames of images.