Everything to Know About the Properties of Fire FX in Games

gaming vfx Jun 01, 2023
Everything to Know About the Properties of Fire FX in Games - Featured

One of the most important elements in a video game can hurt you, help you, guide you, and eventually wow you… It's fire!

Like our dive into water FX, this element has been a staple of video game development for its visual variety as well as uses for players across the game. Think about the range that comes with creating fire, you have something visceral and real-looking like God of War, and then you have something like an incinerate attack from League of Legends, which takes more of a fantastical and cartoonish approach.

 


Fire Swoosh by Alex Redfish / VFX Apprentice

 

The spectrum for what fire can be, look like, and feel like is vast. Fire changes its behavior based on scale. One of the most common small scale fire uses are candle flames. Creating a flickering candle is one of the best places to start drawing flames. As fire grows, it becomes more erratic and increasingly complicated. 

Fun fact! In the VFX department the term "wick" has origins in a candlewick. So when you hear fire wick, water wick, slime wick, it refers to the break away effect a candle's flame has on a candlewick. 

 

Community assets from VFX Apprentice All Access 

 

What is the Purpose and Use of Fire in Games? 

 

First, let’s talk about the many uses of fire. It's important to understand why fire is being used, before we talk about the “how”. 

  • Environmental Hazard: Fire can be used as a hazard to create challenging gameplay situations. Players may need to navigate through burning areas, avoid flames, or find ways to extinguish fires to progress.
  • Combat and Weaponry: Fire can be incorporated into combat mechanics, allowing players to use fire-based weapons or abilities to damage enemies or set them on fire. Fire spells, flamethrowers, or explosive fire projectiles are examples of fire-based weaponry.

 


Fire orb by Kees Klop / VFX Apprentice

 

  • Lighting and Atmosphere: Fire can contribute to the visual and atmospheric elements of a game. It can provide dynamic lighting and shadows, create an eerie or warm ambiance, or enhance the mood of a scene.
  • Puzzle Solving: Fire can be used as part of puzzle-solving mechanics. Players may need to ignite specific objects or manipulate fire-based elements to unlock doors, reveal hidden paths, or activate mechanisms.
  • Cooking and Crafting: Fire can be utilized in games with crafting or survival elements. Players may need to use fire to cook food, smelt ores, or forge weapons and tools. The obvious example is from The Legend of Zelda: Breath of the Wild and Tears of the Kingdom!
  • Storytelling and Narrative: Fire can play a symbolic or narrative role in a game's story. It can represent destruction, purification, rebirth, or serve as a focal point for significant events or character development

 

 

  • Environmental Interactions: Fire can interact with the game's environment, causing dynamic changes or triggering events. It can burn down structures, ignite flammable objects, or spread and propagate based on the game's physics system.
  • Navigation and Exploration: Fire can act as a visual marker or guide for players, helping them navigate through dark areas or providing a focal point to find their way. Torches, campfires, or beacons can serve this purpose
  • Visual Effects: Fire can create visually stunning effects, adding excitement and spectacle to the game. Epic explosions, fiery trails, or cascading fire effects can enhance the overall visual experience.
  • Realism and Immersion: Fire can be used to create a sense of realism and immersion in games. Realistic fire behavior, sound effects, and visual details contribute to the authenticity of in-game environments.

These are just a few examples of the many uses of fire in video games. Game developers often utilize fire creatively to enhance gameplay, create memorable moments, and contribute to the overall immersive experience for players.

 

 

 

What Are the Properties of Fire that VFX artists should know?

The artistic properties of flames can be emphasized to create visually appealing FX. Also, be sure to adhere to the artistic principles of video game VFX. By understanding how fire “works”, as VFX artists can create more convincing fire simulations and effects moving forward. But when it comes right down to the nitty gritty of creating these effects, where do we start?

(If you are a VFX Apprentice All Access member, check out this very informative video on the properties of fire for FX.)

Shape: Fire flames can take on various shapes and forms, ranging from tall and slender to wide and billowing. Artists can experiment with different flame shapes to evoke specific emotions or convey a particular mood.

 

 

Color: Flames exhibit a wide range of colors, including yellow, orange, red, and blue. Color often indicates the temperature of the fire, with hotter flames tending to be bluish. Artists can use color variations to enhance the visual impact of their fire effects and create a desired aesthetic. Red and yellow are often the most common colors for their visceral feeling. 

 

 

Movement: Fire flames are in constant motion, flickering, dancing, and undulating. Capturing the dynamic nature of fire is essential for creating realistic and visually engaging fire effects. Artists can manipulate the movement of flames to evoke energy, chaos, or tranquility in their compositions.

 

Fire sketches by Sonia Frisova / VFX Apprentice

 

Light and Glow: Fire emits a warm, glowing light that illuminates its surroundings. Artists can play with the interplay of light and shadow created by fire, using it to highlight specific elements or create dramatic contrasts within a scene.

Transparency: Fire flames can exhibit different levels of transparency and opacity. Some parts of the flame may appear more translucent, while others may be more opaque. Artists can manipulate these qualities to add depth and complexity to their fire effects.

 

What Makes a Good Fire Effect?  

 

Elemental Studies assignment via VFX Apprentice All Access.

 

So what makes a convincing fire effect? Let’s discuss. 

  • Use reference material: Study real-life fire and reference footage of fire to understand how it behaves, its color, movement, and other characteristics. We’re big proponents for studying and staring at real-life “things” when trying to understand how to create them.
  • Layering and depth: To create a sense of depth and realism, use multiple layers of fire and smoke elements. This can involve layering different particle systems with varying sizes, opacities, and behaviors. By carefully arranging the layers, you can achieve a more visually appealing and immersive fire effect. 
  • Realistic motion: Fire has a distinct, dynamic motion. To create a convincing fire effect, you should simulate the flickering, swaying, and flowing movement of flames. Use fluid, organic animations that mimic the behavior of real fire. Similar to water, it can be random! You can’t predict exactly how a fire is going to move and which shape it will form. Most flame movements are caused by air that heats up around the flame and travels upwards. You can get a really quick fire animation by just pushing a "line" of air through a static flame. 

 

 

  • Consider the environment: The environment can affect the way fire behaves. For example, fire may spread differently in a closed room compared to an open field. It can cast shadows, reflect on nearby objects, or generate heat distortion effects. Are there bushes near the fire? Is the fire next to a body of water? These factors affect how the fire operates within that setting. 
  • Vary the fire intensity: Fire can vary in intensity depending on its fuel source and oxygen supply. It should never be completely consistent no matter the situation. However, if the fire is used as a spell or attack, then you can implement some regularity to the effect.  
  • Particle system: You can implement a particle system to generate individual fire particles. These particles should vary in size, brightness, and opacity to create a “natural-looking” fire. Adjust parameters like particle speed, lifespan, and emission rate to control the overall effect.

 

 

  • Pay attention to lighting: Fire emits light, which can affect the lighting of the entire scene. Fire is often used as a way for players to see their surroundings.
  • Use sound effects: Consider adding sound effects for the crackling of flames or the hissing of steam to create a more immersive experience.


These tips should act as a framework to always have in the back of your head when creating these effects.

 

 

Remember that creating a great fire effect involves a balance between realism and stylization, depending on the visual style of your project. Experiment with different techniques, iterate, and refine until you’re happy with the effect! 

If you want a step-by-step tutorial on how to hand draw fire elements, what to consider with shape, direction, and the overall opacity of a flame, be sure to watch this tutorial and follow along with the article!  

 

 

Fire Simulations and Effects

 

No matter if it's 2D or 3D, the look of fire effects is achieved through stylization, even if it's supposed to look photoreal. Artists and animators use different techniques like hand-drawn frames, sprite-based animations, or layered effects to create a visually pleasing representation of fire without necessarily aiming for that sense of strict realism.

3D fire can offer more opportunities for interactive and dynamic behavior. The choice between the two depends on the specific requirements and goals of the project that the studio has decided to go with, as well as the available resources and desired visual style.

 

 

Examples of Great Fire FX in Games

 

There have been several exceptional fire effects in video games that have pushed the boundaries of visual realism and stylized pizazz. Here are a few notable examples:

God of War - In this acclaimed action game, fire plays a significant role in combat and puzzle-solving. The fire effects in God of War demonstrate impressive detail, with realistically animated flames, heat distortion, and interactions with the environment. Pretty much every way you could imagine a developer using fire, this game does it, and does it well. 

 

Uncharted 4: A Thief's End - The stunning fire effects throughout its various environments are stunning. The fire FX showcases realistic flames, dynamic lighting, and convincing smoke and particle systems, creating intense and immersive fire scenes. Notice how the fire from torches lights each scene. Another similar visual example of this style is something from Red Dead Redemption 2

Battle Chasers Nightwar - A gorgeous RPG that features great FX work from VFX Apprentice instructor Alex Redfish.

 

Hyper Light Drifter - One of the best games of all time (just our opinion) this atmospheric and pixel art-based world is a visual masterpiece. The 2D fire effects in "Hyper Light Drifter'' are beautifully crafted with pixel art, using limited color palettes and clever animations to simulate flames. The fire FX are a testament to what good FX can be and how they can serve the visual style and story of the game.

 

Bastion- This RPG features incredible hand-drawn artwork, as well as exceptional 2D fire effects. The flames in Bastion are stylized and vibrant, with smooth animations and subtle particle effects that add depth and movement to the fire. 

Super Mario (Various) - Iconic over decades, from Bowser's castle to Mario's fire flower power. Check out the variation and evolution over the years with this great roundup. 

 

Team Fortress 2 - A fun take on stylized fire effects used by the pyro class.

Dead Cells - Similar to Hyper Light Drifter, the fire effects in Dead Cells have that tangible pixelated 2D feel from retro arcade games. The flames are depicted with dynamic animations, flickering lights, and particle effects that enhance the overall immersion. 

 

The Legend of Zelda: Tears of the Kingdom - We recently looked into the cel-shading approach to animating and creating the world of these recent Zelda games. One of the specific ways this series excels is through its use of fire! If you’re not already playing this new masterpiece, what are you doing? Get on it!

The Last of Us 2 - From the environmental effects to tossing Molotov cocktails, this game is packed with gorgeous photoreal fire. 

 

 

So now that we’ve gone over the what, why, and how - let's go even further, exploring the main programs you’ll be using to create fire FX for a game engine. These tutorials are very general, but they should get you on the right path to creating whatever type of fire effect you need or want.

 

Creating Basic Fire FX Using Particle Systems in Unreal Engine

 

 

To create basic 2D fire effects in Unreal Engine, you can follow these general steps:

  • Set up the project: Create a new 2D project in Unreal Engine and set up the necessary components, such as a character or sprite that will represent the fire.
  • Create the fire sprite: Design or find a sprite that represents the fire. It should have multiple frames or variations to give the appearance of flickering flames. Import the sprite into your project and place it in the appropriate location.
  • Set up the particle system: In Unreal Engine, create a new particle system or use an existing one. The particle system will emit particles that simulate the fire. Adjust the particle system's settings to achieve the desired look, such as the size, shape, color, and behavior of the particles.
  • Apply the fire particle system to the sprite: Attach the particle system to the fire sprite or its parent component. This will make the fire particles emit from the appropriate location, creating the illusion of fire.
  • Configure particle parameters: Customize the particle system's parameters to fine-tune the fire effect. Experiment with settings like particle size, opacity, lifespan, speed, and rotation to achieve a realistic or stylized fire appearance.
  • Add lighting and post-processing effects: To enhance the fire effect, consider adding dynamic lighting to illuminate the surroundings and make the fire cast realistic shadows. You can also apply post-processing effects like bloom or color grading to further enhance the visual impact of the fire.
  • Trigger the fire effect: Implement the necessary logic or events in your game to trigger the fire effect when required. For example, you might activate the fire particle system when the player interacts with a specific object or enters a certain area.
  • Test and iterate: Playtest your scene and iterate on the fire effect as needed. Make adjustments to particle settings, sprite animation, lighting, or other elements to achieve the desired visual result.

Keep in mind that the specific implementation of 2D fire effects in Unreal Engine can vary depending on your project's requirements and the version of the engine you are using. It's always a good idea to refer to Unreal Engine documentation, tutorials, and community resources for more detailed instructions and guidance specific to your version of the engine.

 

Creating Basic 2D Fire FX in Unity

 

 

To create basic 2D fire effects in Unity, you can follow these general steps:

  • Set up the project: Create a new 2D project in Unity and set up the necessary components, such as a character or sprite that will represent the fire.
  • Create the fire sprite: Design or find a sprite that represents the fire. It should have multiple frames or variations to give the appearance of flickering flames. Import the sprite into your Unity project and place it in the appropriate location.
  • Set up the particle system: In Unity, create a new Particle System or use an existing one. The Particle System will emit particles that simulate the fire. Adjust the Particle System's settings to achieve the desired look, such as the size, shape, color, and behavior of the particles.
  • Apply the fire particle system to the sprite: Attach the Particle System to the fire sprite or its parent GameObject. This will make the fire particles emit from the appropriate location, creating the illusion of fire. 
  • Configure particle parameters: Customize the Particle System's parameters to fine-tune the fire effect. Experiment with settings like particle size, opacity, lifespan, speed, and rotation to achieve a realistic or stylized fire appearance.
  • Add lighting and post-processing effects: To enhance the fire effect, consider adding dynamic lighting to illuminate the surroundings and make the fire cast realistic shadows. You can also apply post-processing effects like bloom or color grading to further enhance the visual impact of the fire.
  • Trigger the fire effect: Be sure to include the necessary logic or events in the game you’re working on to trigger the fire effect when required. For example, you might activate the fire Particle System when the player interacts with a specific object or enters a certain area (torches, for example)
  • Test and iterate: Playtest your scene and iterate on the fire effect as needed. Make adjustments to particle settings, sprite animation, lighting, or other elements to achieve the desired visual result.

Remember that Unity offers various features and components for creating and enhancing 2D fire effects, so the specific implementation can vary depending on your project's requirements and the version of Unity you are using.

 

Creating Basic 2D Fire FX in Blender 

 

 

To create basic 2D fire effects in Blender, you can follow these general steps:

  • Create the fire sprite: Design or find a sprite that represents the fire. It should have multiple frames or variations to give the appearance of flickering flames. Import the sprite into Blender and place it in the appropriate location.
  • Set up the material: Create a new material for the fire sprite. In the Material Editor, adjust the settings to achieve the desired look for the flames, such as color, transparency, emission, or texture mapping.
  • Animate the fire sprite: In the Animation Editor, create keyframes to animate the fire sprite's appearance and behavior over time. This can include changes in size, shape, color, or position to create the illusion of flickering or dynamic flames.
  • Add particle systems: Blender offers various particle systems that can simulate fire effects. Create a new particle system and adjust its settings to emit particles that resemble fire. Configure parameters such as particle size, velocity, emission rate, and lifespan to achieve the desired effect.
  • Customize particle behavior: Tweak the particle system settings further to control the behavior of the fire particles. Experiment with options like turbulence, rotation, and physics forces to create more realistic or stylized fire effects.
  • Apply lighting and shading: Enhance the fire effect by adding appropriate lighting and shading. Set up light sources to illuminate the fire sprite and its surroundings, and adjust the material settings to react to lighting conditions realistically.
  • Render the animation: Configure the render settings to capture the desired animation frames. Adjust the resolution, frame rate, output format, and other parameters to match your requirements. Render the animation to create the final 2D fire effect.

Blender offers extensive features and flexibility, allowing for more advanced and customized 2D fire effects. The specific implementation can vary depending on your desired visual style and the version of Blender you are using. Consult Blender's documentation, tutorials, and community resources for more detailed instructions and guidance specific to your version of the software.

 

Creating Basic 2D Fire FX in After Effects 

 

 

To create basic 2D fire effects in Adobe After Effects, you can follow these general steps.

  • Set up the project: Open After Effects and create a new composition with the desired dimensions and duration for your fire effect.
  • Import assets: Import the assets you'll use for the fire effect, such as fire footage, fire sprite sequences, or particle elements.
  • Create a new solid: Create a new solid layer in your composition. This will serve as the base for your fire effect.
  • Apply the fire footage or sprite sequence: Drag and drop the fire footage or sprite sequence onto the solid layer in the composition timeline. Adjust the position, scale, and rotation as needed to fit your scene.
  • Customize the fire appearance: If you're using a fire footage clip, you can customize its appearance by applying effects like color correction, blending modes, or opacity adjustments. If you're using a sprite sequence, you can animate the frames or adjust their timing for the desired flickering effect.
  • Add particle effects (optional): If you want to enhance the fire effect further, you can add particle effects in After Effects. Use the Particle Systems II or CC Particle World plugin to create fire-like particles. Adjust the settings such as size, velocity, opacity, and lifespan to achieve the desired look.
  • Composite the layers: Adjust the layer stacking order and blending modes to achieve the desired composition. Experiment with blending modes like Add, Screen, or Overlay to make the fire blend with the background more naturally.
  • Apply additional effects (optional): Apply additional effects to enhance the fire effect, such as glow, heat distortion, or smoke simulation. You can use effects like Fractal Noise, CC Radial Fast Blur, or Turbulent Displace to achieve these additional visual elements.
  • Customize lighting and color grading (optional): Adjust the overall lighting and color grading of your composition to match the fire effect and the desired mood of your scene. Use effects like Curves, Levels, or Color Balance to fine-tune the visual appearance.
  • Preview and render: Preview your composition to see the fire effect in action. Make any necessary adjustments, and once satisfied, render the composition to create the final 2D fire effect.

After Effects offers a wide range of tools and effects to create and customize 2D fire effects. The specific techniques and settings can vary depending on your desired visual style and the version of After Effects you are using. Consult After Effects documentation, tutorials, and community resources for more detailed instructions and guidance specific to your version of the software.

 

More Suggested FX Reading:

 

VFX Apprentice students make FX like these, and you can too!

 

Start Your VFX Apprenticeship

Begin your journey towards mastering FX for games and animation. Join VFX-A All Access and discover cutting-edge 2D, 3D, and real-time FX training. 

Browse FX Courses

Learn from Professional VFX Artists

Our instructors have left their mark on AAA titles, indie games, animated films, television series, mobile games, and experiential events. They are here to help you make your own mark.

View All Instructors