Particle System: Fire Effect

The Fire Effect tutorial illustrates how you can add a fire effect to your scene using the Qt Design Studio particle system.

In this tutorial, you create a project from the beginning. You can download the completed project from here.

This tutorial requires that you know the basics of Qt Design Studio, see Getting Started.

Tutorial Assets

You need the following assets to complete this tutorial:

• fire-sprites.png
• fire-color-table.png

You can download the assets from here.

Creating a Fire Effect

Creating a Project

To create a new project:

1. Open Qt Design Studio.
2. On the Welcome Screen, select Create Project.
3. In the Presets section, select General > 3D.
4. In the Details section, set the name to FireParticles and select the folder where you want to save the project.
5. Select Create.

Next, remove unwanted default components from the project:

1. In Navigator, select Text and select the Delete key.
2. In the same way, delete cubeModel.

For a better visual effect, set the background color to black:

• In Navigator, select Rectangle and in Properties, set Fill Color to #000000.

Adding a Particle System to Your Scene

To add a particle system, you first need to import the QtQuick3D.Particles3D module to your project:

1. In the Components view, select .
2. Find QtQuick3D.Particles3D, and select it to add it to your project.

In this project, you use an animated sprite to simulate a fire. For this, use the Animated Sprite particle system template:

• From Components > Qt Quick 3D Particle System Templates drag an Animated Sprite component to the 3D view. You can also drag it to scene in Navigator.

You now have the particle system in place. To preview it, select Alt + P. You can also preview the particle system in the 3D view by using the Particle Editor tools.

Adding Sprites and Sprite Animations

First, import the sprite to use for the fire:

1. In Assets, select .
2. Select fire-sprites.png.

Next, add the sprite to the particle system and create the animation:

1. From Assets, drag fire-sprites.png to animatedTexture in Navigator.
2. In Navigator, select animatedSequence and in Properties, set:
   • Frame Count to 3. There are 3 sprites in fire-sprites.png so you want to divide the image into 3 different sprites for this animation.
   • Interpolate to true. This makes the animation between the sprites smooth.
   • Random Start to true. This sets the animation for each particle to start from any of the 3 sprites, creating some randomness to the effect.

To add color to the sprites, use a color table. With a color table, you change the color of a single sprite during its life span. In this project, you use a gradient color table ranging from yellow to dark orange. This results in the sprites being yellow when they are emitted and dark orange at the end of the life span.

To set the color table:

1. Import fire-color-table.png to your project.
2. From Components, drag a Texture to animatedSpriteParticle in Navigator.
3. Rename the texture to fireColorTable.
4. In Navigator, select fireColorTable and in Properties, set Source to fire-color-table.png.
5. In Navigator, select animatedSpriteParticle and:
   • Ensure that Sprite is set to animatedTexture.
   • Set Particle Scale to 5.
   • Set Color Table to fireColorTable.

Adjusting the Particle Emitter

The next step is to adjust the particle emitter properties:

1. In Navigator, select animatedSpriteEmitter and in Properties, set:
   • Emit Rate to 300.
   • Life Span to 2500.
   • Life Span Variation to 100.
   • Particle End Scale to 1,50.

   This sets the emitter to emit 300 particles per second. The life span of each particle is ranging from 2.4 to 2.6 seconds. The size of each particle is increasing slightly throughout its life span.

2. In Navigator, select animatedSpriteParticle and in Properties, set:
   • Blend Mode to Screen.
   • Max Amount to 1000.
   • Color Variation > W to 0,50. This adds randomness to the opacity of the sprites.
3. In Navigator, select animatedSpriteDirection and in Properties, set:
   • Direction > Y to 20.
   • Direction Variation > X to 3.
   • Direction Variation > Y to 10.

   This makes the particles go straight up with a small amount of randomness to the direction.

Previewing

Now, the fire effect is done. Before you preview it, adjust the camera:

1. In Navigator, select sceneCamera and in Properties, set:
   • Field of View to 20.
   • Translation > Y to 35.

Now, preview the fire effect by selecting Alt + P.