Particles: Realistic Fire Effect

Fire Strip

When particles were first introduced to Game Maker, it was a great addition.  It gave users a simple, yet powerful solution for creating complex effects, and in many cases, it meant that one no longer had to rely on a score of objects to make his / her games look more interesting.  Simple as it may be however, the particle system can still be confusing to GML beginners or those without much experience in visual effects.  For these people, and anyone who might just want to touch up on their knowledge of some basic effects, I have created this start-to-finish example for creating a realistic fire effect.

You can download the project files for this example here (128k).  This archive includes the GM6 / GMK file, as well as the collection of images I used.

Apologies in advance if you find this tutorial a bit wordy – I’ve written this as a complete introduction to particles in Game Maker, so it may cover things that you already know.  Future write-ups will probably be less comprehensive.

Step 1: Creating particle images

First things first, we’ll need some images for our fire particles.  You could probably build a similar effect with the built-in particle shapes, but I’ve always found it easier to use a series of randomized particle images for effects like this.  Even with relatively small images, we can create a nice full-screen effect that doesn’t suffer from a patterned look that the standard shapes will bring.

For this example, I’m using Photoshop to create images.  If you don’t have Photoshop, you can always use GIMP, or even MSPaint.  You won’t have as many options with MSPaint as with the other programs, but it’s still a viable alternative for creating the simple images we need.  I’ve also included all my images with the example download, just in case the idea of making your own graphics scares you.

New Image

Anyway, open up your graphics program and create a new document, preferably a small-ish square (mine’s 64 x 64).  Fill the background black, set the draw color to white, and get out your airbrush (or paintbrush) tool.  If your app supports layers, it might be a good time to make a new layer, too.  If not, you can always save multiple versions of your black square and work on each one individually.  Five layers (or documents) will do.

M Particle

Draw a squiggly line or two on each canvas, so ultimately you have five different designs.  These do not need to be complex.  Just for fun, I’ve used all the letters from “Marty.”

If you’re using MSPaint, or some other program that doesn’t have filters, you’re pretty much done at this point and can skip ahead to the Game Maker portion.  You can add some extra detail to your images if you like, in the form of white or gray scribbling here and there.  Nothing too extreme, but make sure you don’t draw against the edge of your documents, as this can be noticeable in the final effect.

Fire Particles

For everyone else, let’s add a few effects to make these new particles look a bit more natural.  I’ve applied a simple Wave distortion to mine, and then added a Ripple distortion to finish it off.  You can do whatever you like here, but make sure that you don’t distort your images so much that they go of the canvas and leave a sharp edge.  When you’re done, save all your images as separate documents.  Time to make the effect in Game Maker!

Step 2: Bring in the images

Resource TreeFire up Game Maker and create a new sprite, a new script, a new object, and a new room.  You can name these however you want.  You can see what my resource tree looks like to the left.

Double click on your new sprite in the resource tree to edit its properties.  Uncheck the boxes for ‘transparent’, ‘precise collision checking’, and ‘preload texture’, since we won’t need those things.  Check the box for smooth edges, and then click the ‘Load Sprite’ button.  Find your first particle image, load it, and then click ‘Edit Sprite’ button to bring up the sprite editor.  Add the rest of your particle images to the sprite, and then click the green check mark to accept the changes.

Import Sprite

Back in the Sprite Properties form, click the ‘center’ button to center the origin to 32, 32.  You can offset the origin of your sprites for some interesting effects, but for now we’ll stick to the middle.  Close the sprite Properties window (make sure you press the ‘OK’ button, and not the red ‘X’!).

Now that you’re finished importing the graphics, let’s move onto coding the effect itself.

Step 3: Setting up the particle system

Your programming philosophies may differ from mine, but I like to make all my particle effects global, and I like to declare them all in a special script at the beginning of the game.  Making the particles and particle systems global allows me to access them from any object or script in the game that needs them, and this way I know right when they load, and that they are only loaded once.

Double click the new script you created when you opened up Game Maker and let’s write some code! The first thing we should do  is create the particle system in which the fire particles will exist.  This is also a great time to set the depth of the system (the draw depth for any particles drawn inside the system), so we’ll do that too. Add the following code to your script:

global.partsys_fire = part_system_create();
part_system_depth(global.partsys_fire,0);

I used a depth of 0 because I have nothing else drawing in the scene, so it doesn’t matter at what depth my particles draw.  If I add anything else to this project later, I’ll come back to this script and change the depth appropriately.  There are other parameters you can set for your particle system as well – be sure to check the Game Maker manual out for more information.

Step 4: Crafting particles

Once you’ve got your particle system in place, you’re ready to code the particles themselves.  Let’s add some code to create the fire particle, and then define how the they’ll look:

global.part_fire = part_type_create();
part_type_sprite(global.part_fire,spr_fire,0,0,1);
part_type_size(global.part_fire,2,3,-.01,0);
part_type_orientation(global.part_fire,0,360,2,0,0);
part_type_color3(global.part_fire,c_orange,c_orange,c_red);
part_type_alpha3(global.part_fire,.25,1,0);
part_type_blend(global.part_fire,1);

Before we continue, let’s quickly run through a few of these functions to explain why they’re set the way they are.

Using part_type_sprite, we tell Game Maker that we want the new particle to use a sprite to draw, tell it not to animate the sprite, not to stretch, and that we want the image to be random.  The random image flag will tell the game to use a random image from the sprite whenever a new particle is created.  This is good for generating naturally random systems, like fire.

Next, part_type_size specifies the range of sizes the flame particles will be drawn, as well as a slight decrease in size over time.  You can adjust the wiggle value to add a shimmery look to your flames, but I like the effect better without this.

The particles are drawn at random rotations thanks to part_type_orientation.  I’ve also set each particle to rotate a little each time the system refreshes, which can help the top end of the flames seem like they are curling upward.

We set the color and alpha values using part_type_color3 and part_type_alpha3 respectively.  I chose to use the three-value versions of these functions because they give me greater control.  Each value is cycled into the life of the particles in order, so they start colored orange and at a quarter opacity, continue on as orange but increase to complete opacity, and then transition to red and fully transparent.  This gives the flames a nice warm glow and a red tail.  You can change the colors however you want here, depending on how you want your flames to look.  The alpha values can also be altered to adjust how smoothly the particles fade in and out.

Finally, part_type_blend tells the particle to draw in additive blend mode.  This makes the particles draw so that lighter values are opaque and darker values are transparent.  It will help make all the particles blend together and dance around as a if they were a single body of flame, and not a collection of small, moving images.

Step 5: Adding movement

At this point we could finalize our simple test game and run it, and we’d see something that looks vaguely like fire, only none of the particles would move – they’d spawn into the emitter’s region, and simply sit there.  This might be acceptable for a lava or fire-pit effect, but we’re trying to make flames here, so let’s continue.

You should still have your script editor window open for your particle setup.  If not, open it back up, crack your knuckles, and let’s add some more code:

part_type_direction(global.part_fire,85,95,0,0);
part_type_speed(global.part_fire,5,15,0,0);

If you’ve spent any amount of time coding games in GML, you’re probably very familiar with speed and direction, and with particles, they are much the same as they are with objects.  part_type_speed allows us to set the initial speed range of the particle.  We can also set an amount to add or subtract from the speed over time, and add wiggle if it suits us.  part_type_direction is set to a range of 85 – 95, the particles will all move in a direction between 85 and 95 degrees (90 degrees is straight up, so the range covers straight up with +/- 5 degrees to the right and left).  We’re not going to make the direction change over time, and as with the speed, we’re not interested in wiggle.

You could also set gravity for your particles at this point, but our fire effect doesn’t need it.

Step 6: The life and death of a particle

The final step in creating our fire effect is to determining how long each individual particle should live – that is, how long in steps, from start to finish, a particle should be active in the game.  There are a few different options for particle behavior in life and death, but we’ll only need to use one:

part_type_life(global.part_fire,25,35);

Although it’s just one function, the amount of steps you give your particles to live can vastly change the way your effect looks and how well it runs. If you want your flame effect to cover only a particular region of the screen, you’ll usually have to do a balancing act between lifespan and speed.

And again, refer to the Game Maker manual to learn more about additional functions.

Step 7: Enter the Emitter

Whew, we’re just about done!  All that remains is to set up the emitter, which is, in simpler terms, the thing that spits out your particles inside the game.  Close the script editor if you still have it open, and open up the object properties editor by double clicking on the new object you made a few minutes ago.

Add a new Create Event to the events list, and drop in an Execute Code block.  Double click it to open up a new code editor window, and get ready to add some new code. First, let’s call the script we just finished to initialize our particle system:

init_particles();

Next, let’s add a new particle emitter, link it up to the global system made in the script, and give it a region:

mypart = part_emitter_create(global.partsys_fire);
part_emitter_region(global.partsys_fire,mypart,0,640,480,500,ps_shape_rectangle,ps_distr_linear);

What we’ve done here is add a new local emitter to the object, told it in what area it should create particles, what shape the particles should be created in, and how they should be distributed within that shape.

Now all we need to do is have the object create the particles while the game is running. Close the code editor by clicking the green check mark and add a new Step Event to the object. Drop an Execute Code block into the event, and double click it to open the code editor window again. Add the following line of code:

part_emitter_burst(global.partsys_fire,mypart,global.part_fire,10);

Room Editor

Close the code box, and double click on the new room in the resource tree, then go into the room settings and change the background color to black and the room speed to 60.  Drop your particle object into the room, save your project, and run the game!  You should see something similar to this:

Fire - First Attempt

With that, you’re pretty much done!  All that’s left is some (optional) minor aesthetic tweaking.

Step 8: Tweaking the effect

You may want to add a few other sprites to the mix, just to make things look a little less uniform.  I added a few blurry splotches, and a few more highly distorted flame images to the mix:

Fire Particles Extended

And this is how it turned out:

Fire Final

Notice the difference?  This is a great example of  how even the smallest change to your particle mix can end up affecting the entire effect.

If you’re still feeling a little green when particles are concerned, try tweaking the values of the code we’ve written for this project.  There are many interesting effects that you can make without any drastic changes to the code, and it’s a great way to learn how each of the flags for the particle functions can affect the system.

You can download the project files for this example here (128k).  This archive includes the GM6 / GMK file, as well as the collection of images I used.

15 thoughts on “Particles: Realistic Fire Effect

  1. Pingback: Fire and Flames in Photoshop | PhotoShop in a day

  2. Wow, looks great, I never considered myself much of an artist on the computer. But the way you explained it, it almost seems like cheating! great tutorial

    • I’ve done some for games, but not any others that I have examples for, currently. I hope to get more up someday – I’ve just been very busy with other things lately, and haven’t had time. It’s always on my mind though!

  3. Is there another way to call the first code we created? In GM Studio the init_particles (); doesn’t work.

    • To be honest, I haven’t played with particles much in Studio yet, but I will eventually, and I will update the examples accordingly. Sorry about that!

    • I had the same problem, but realize the solution. Init_particles is the name of the script he created. Put whatever you named the script there instead.

    • Also worth noting since you mentioned studio, this all ran perfectly in studio as well.

    • Figured it out. It’s the additive blending. The obvious fix (turn off additive blending) makes the effect a lot less pretty. Still not sure how to solve that. Suggestions appreciated.

    • Sorry for the extremely late reply here, but the problem is that the additive blending is what makes the fire particles bleed into each other in the first place. There’s no easy way that I know of to get this effect while also achieving the same level of glow / color you see here. In my opinion, it’s a pretty small caveat that it has to be on a non-white background to be seen properly.

Leave a Reply