DevBlog: Fire and Destruction – the job of a Technical Artist

Salve Anno Community!

My name is Oliver Mertins, Senior Technical Artist on Anno 117: Pax Romana. I’m with Ubisoft Mainz for 5 years and have started on Anno 117: Pax Romana at the very beginning.

Often, I get asked: “What does a Technical Artist actually do?”
Simply said, they are the glue between the Art (e.g. Level Art, 3D Art, Animation) and development departments (e.g. Game Play Programming, Engine Development, Tools Development).

While Artists tend to think in shapes, colors and timing, Programmers might think in game logic, code design patterns or data types. To bridge between them a Technical Artist is needed who understands both worlds and can support in meetings, write scripts and little tools to support the Artists, do research to explore new fields of interest or investigate into asset optimization to improve the game performance. They take care of the more technical art side, like building functionality out of node networks, creating control rigs for character or props, developing procedural materials or stunning visual effects using several techniques or even writing shaders.

When you think about Anno, you immediately think about building a beautiful-looking empire. But today I will show you how to burn it down to the ground, leaving destruction and chaos. Curious? Then read on

Creating a fire

In ancient times, fire was a central element for humankind to survive and prosper. It not only spent light at night but enabled us to cook and prepare food, manufacture goods and weapons and helped to protect against wild animals. But whenever we thought we had total control over the forces of nature, we were proven wrong, as the great fire in Rome under Emperor Nero showed, for example.
All these cases found its way into Anno 117: Pax Romana – but before we start to create and control an inferno, we need to start mastering small flames and sparks first.

For achieving a vivid blazing fire effect, we will combine multiple visual components starting with emissive flames at its core, sparks for tiny details, heat distortion and a light source to send out light and shadow to its surrounding, to behave believable in the game world. Some aspects will be artistically exaggerated compared to reality to be visible from the usual player-perspective or to create more dramatic imagery.

For creating animated flames, we jump into the most advanced tool for creating visual effects: Side FX Houdini. Here we gain the ability to create digital fire-based rules on how it would work in the real world. This is called a simulation and will be done for each element: the flame, smoke and embers flying through the heated air.

Since a high-resolution simulation contains too much data to process in a real-time game environment, we need to simplify the information by baking a single animated flame into a texture – the “flipbook”. It will be read from left to right and from top to bottom in a repeating fashion from a shader later.

Now we want to have the appearance of a three-dimensional object as well, so we create multiple moving points in space called “particles” and attach the flipbook at each point to create the overall moving fire shape. Here is an overview of the fire ingredients:

Of particles, heat effects and light sources

“But wait a moment, the flipbook texture is just black and white, where are the colors?”, you might ask.
By using a gray scale texture for the flames and a fire color ramp texture, we can later tweak the colors of all fires in the game at a central place. This makes iteration and achieving a consistent quality much easier. We go even further and split the color into two ramp textures, one for the emitting color and one for the pure albedo color. But this is just for a more vivid color shifting look. These will be used as separate inputs for our shader later.

What else would you expect from a fire? Right, sparks! Let’s add some:
Back in Houdini we create particles flying around affected by wind turbulence and gravity. We make them a bit bigger than in reality to have them visible even from greater distance.

Now that we have made the more obvious and “loud” components, it’s time to address the subtle ones. We want to feel the heat the fire sends out, meaning, we want to distort the air around the fire. So, let’s add a few particles for that as well. To achieve the effect, a normal map gets assigned in the shader which deforms the pixels behind it.

Since Anno 117: Pax Romana has a day and night cycle, our fire should light our way at night as well. For dancing shadows on surrounding walls or a gloomy atmosphere, adding a light source becomes essential.

In the real world not only, objects get lit but the air around the light source as well. Tiny dust particles fly through the air reacting and transporting the light further, creating what we perceive as beams or god rays for example.

And there we have it:

Combined with fireplaces and baskets it nicely illuminates the city:

Setting a city on fire (in-game)

Now that we made fire, let’s have a look at unloved fire city incidents.
In Anno 117: Pax Romana we have three types of incidents: fires, disease, and uprisings. The fire incident is what we want to have a closer look at.

Overall fire incidents were a complex topic because they required multiple departments to achieve the overall feeling. When the incident happens, residents panic and run away, resolver units come to the rescue, extinguishing smaller fires. The air fills up with smoke, rooftop holes become visible and multiple fires spread in dangerous rings across the city leaving ruins behind. Therefore, multiple types of fires and smoke effects in several sizes were created, position markers were added to every building and all pieces got balanced and adjusted. For example: in the first iteration the smoke was way too intense from the players’ perspective, hiding the actions of residents and resolver units.

Looking at a single residence building the visual dramaturgy can be explained:

First, smoke and small fires start to evolve, getting bigger and more threatening.
After the fire has eaten through the building, holes in the rooftop get visible, showing glowing and black burned wood beams. When the building has reached its end, it collapses to dust leaving ruins behind.

How to destroy a building

This leads me to the final topic: Building Destruction.
Since Anno 117: Pax Romana contains many different building types and creating an individual destruction animation would require significant extra hard drive storage, we came up with several solutions for specific cases.

The bulk of buildings which are not that often destroyed, get a shader solution with additional smoke and dust effects leaving the detailed destruction animation for military strategic targets like walls, towers, gates and the villa which get seen relatively often.

Usually, the buildings are created in an “onion style” meaning multiple single sided shells got added to compose a building. Unfortunately, this is not ideal for the destruction process for which a “solid” geometry – closed geometry from all sides – is needed.

Therefore, the mesh gets prepared to be solid first. Afterwards it gets cut into pieces – “fractured” as we say – by using simplified fracture patterns, each standing for a different material like wood splitting into long shards, while stone bricks stay as single bricks compared to concrete material crumbling into many pieces. Marble, for example, gets chopped horizontally into multiple pieces:

Now let’s have a look at how we achieved the destruction animation for the stone tower.

By having loose fractured pieces only, our tower would instantly fall apart in an uncontrolled way – but that is not what we want. So, to gain controllability, we glue the loose pieces together and remove the glue partly over time, exactly where and when we want. This results in areas where the tower crumbles first, then second and so on which looks much more realistic.

In our game engine – the Empire Engine – we use a technique called “vertex animation” to playback the animation of the falling pieces in a shader. This is an alternative method for animated meshes compared to the “bone with a skinned mesh” approach usually used for characters and animals. A vertex animation requires two animation textures, one for translation and another one for rotation of the fractured pieces in addition to the fractured mesh. All these get exported, converted and put together by a python script to speed up and smooth out the process.

This is only a high-level overview of the main process of how we destroy specific assets. The whole network to do all these steps bit by bit looks like this under the Houdini hood:

This brings me to the end of the insights into fire and destruction. I hope you will enjoy the effects as much as we do while playing Anno 117: Pax Romana.

Have fun,

Oliver