Beginner Tutorial


Create a Fire Using a Particle System


30 minutes

Posted on: December 4, 2018

Learn Sumerian
Create a Fire Using a Particle System

Tags

fire
smoke
particles
state machine
timeline

In this tutorial you will learn about:

camera fly-through
particle system

In this tutorial, we take an existing ground plane scene and apply particle and lighting effects to it. We also apply a camera fly-through to create a simple, yet effective campfire.

This is the effect we will build in this tutorial. This exercise will not show how to create the environment. Be sure you are using the latest version of your browser.

A particle system is a special entity that uses a large number of small sprite graphic objects to simulate highly chaotic systems, natural phenomena, or processes caused by chemical reactions. In Amazon Sumerian, particle systems are often used to produce fire, explosions, smoke, moving water, sparks, falling leaves, clouds or fog, dust, stars, and galaxies.

You’ll learn about:

  • Particle systems
  • State Machine
  • Timeline
  • Camera fly-through

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Starting the Environment Scene

Create a new scene using the Default Lighting scene template.

Step 1: Import Textures

  1. Above the canvas, choose Import Assets.

  2. Add the Campfire Tutorial Texture Pack to your scene.

Step 2: Create the Fire Particle

In this step, we will create the Fire for our scene.

  1. Above the canvas, choose Create Entity.

  2. Under the Others category, choose Particles.

  3. Rename this to “Fire”.

Setting the Particles Component Properties

Under the Particles component, set the following.

  1. Under the General property:

    • Choose Auto play, so the particles will start when the scene plays.
    • Set Duration to 5.
    • Choose Prewarm to ensure that when the particle appears, it doesn’t look like it’s just starting, providing a smooth start.
    • Set Max particles to 300.

  2. Under the Emitter shape property, set:

    • Emitter Shape to Cone
    • Emit From to Volume
    • Cone Radius: 0.4
    • Cone Angle: 2
    • Cone Length: 0.2

  3. Under the Over duration properties, set:

    • Emission rate: Constant: 50
    • Start speed: Random Between Two Constants, between 1 or 3
    • Start size: Random Between Two Constants, between 1 or 1.5
    • Start color: Constant, set Start color to RGBA (1,1,1,1)
    • Start life time: Random Between Two Constants, between 0.6 or 0.75
    • Start angle: Random Between Two Constants, between 0 or 360

  4. Under the Over lifetime properties, set:

    • Color to Random Between Two Gradients, and then set:
      • Top left color swatch to RGBA (1, 0.8, 0.16, .08)
      • Bottom left color swatch to RGBA (1, 0.85, 0.63, .6)
      • Top right color swatch to RGBA (1,0,0,0)
      • Bottom right color swatch to RGBA (1, 0.48, 0, 0)
    • Size to Random Between Two Constants, set between .7 or 1
    • Rotation Speed to Random Between Two Constants, set between -400 or 400
    • Local velocity to Constant, and Value to 0,0,0
    • World velocity to Constant, and Value to 0,0,0

  5. Under the Texture property, set:

    • Set Type to Custom.
    • Drag flame.png from the Assets panel (under the Campfire Tutorial Texture Pack) to the Texture input in the Fire Particle properties.

  6. Under the Rendering property, set:

    • Set Billboard to Checked
    • Set RenderQueue to Overlay
    • Set Blending to AdditiveBlending
    • Uncheck Depth write
    • Choose Depth test
    • Set Sorting mode to None

Step 3: Create a Smoke Particle

In this step, we will create the smoke emitted from the fire.

  1. Above the canvas, choose Create Entity.
  2. Under the Others category, choose Particles.
  3. Rename the Particles entity to “Smoke”.

Setting the Particles Component Properties

Under the Particles component, set the following.

  1. Under the General property:

    • Choose Autoplay
    • Set Duration: 6
    • Choose Loop
    • Choose Prewarm
    • Set Max particles: 500

  2. Under the Emitter shape property, set:

    • Emitter Shape: Cone
    • Emit from: Volume
    • Cone Radius: 0.2
    • Cone angle: 2
    • Cone length: 0.01

  3. Under the Over duration properties, set:

    • Emission rate: Constant to 50
    • Start speed: Random Between Two Constants, between 2 or 4
    • Start size: Random Between Two Constants, between 0.7 or 0.9
    • Start color: Constant, color to RGBA (1,1,1,1)
    • Start life time: Random Between Two Constants, between 0.6 or 2
    • Start angle: Random Between Two Constants, between 0 or 360

  4. Under the Over lifetime properties, set:

    • Color: Random Between Two Gradients, and then set:
      • Top left color swatch to RGBA (0.63, 0.33, 0, 0.6)
      • Bottom left color swatch to RGBA (0.66, 0.55, 0.36, 0.7)
      • Top right color swatch to RGBA (0,0,0,0)
      • Bottom right swatch to RGBA (0.11, 0.05, 0, 0)
    • Size: Random Between Two Constants, set between 1 or 2
    • Rotation speed: Random Between Two Constants, set between -100 or 100
    • Local velocity: Constant, set Value to 0,0,0
    • World velocity: Constant, set value to 0,0,0

  5. Under the Texture property:

    • Set Type to Custom.
    • Drag smoke3.png from the Assets panel, under the Campfire Tutorial Texture. Pack, to the Texture input in the Fire Particle Properties.
  6. Under the Rendering property:

    • Choose Billboard
    • Set RenderQueue: Transparent
    • Set Blending: TransparencyBlending
    • Uncheck Depth Write
    • Choose Depth Test
    • Set Sorting Mode: None

Step 4: Create the Embers Particle

In this step, we will create the embers emitted and created by the fire.

  1. From the Create Entity menu, under the Others category, choose Particles.
  2. Rename it to “Embers”.

Setting the Particles Component Properties

  1. In the Transform component, set the Y Translation value to 1.5.

  2. Under the General property:

    • Choose Autoplay.
    • Set Duration: 20.
    • Choose Loop.
    • Choose Prewarm.
    • Set Max Particles: 300.

  3. Under the Emitter shape property, set:

    • Emitter Shape: Cone
    • Emit from: Volume
    • Cone radius: .3
    • Cone angle: 2
    • Cone length: .01

  4. Under the Over duration properties, set:

    • Emission rate: Constant to 10
    • Start speed: Random Between Two Constants, set between 3 or 6
    • Start size: Random Between Two Constants, set between 0.02 or 0.05
    • Start color: Constant, set RGBA (1,1,1,1)
    • Start life time: Random Between Two Constants, set between 0.6 or .75
    • Start angle: Random Between Two Constants, set between 0 or 360