Creating the visual effects for The Thinking City was the hardest of the tasks taken by myself as my team and I have been using the newest version of Unity (2019.3) which uses the new visual effects graph as opposed to the old particle system. This means that I have several challenges to overcome such as:

1. The particle system is no longer supported and I knew nothing about the visual effects graph
2. The visual effects graph is a lot more complex and harder to get the hang of.
3. There are not a lot of tutorials out there to help.
4. I did not have as much time as I'd like to focus on this section.

To address these issues I managed to scrape together a couple of tutorials from YouTube as well as get access to some of the Unity developers example code on how to use the visual effects graph. The effects in our game are built by me using these effects as a guide and reference. 

I find myself to be a lot more of a piratical learner than a person who picks things up by reading or seeing them especially when it comes to things like developing in unity or programming. To this end I have amassed a pool of video resources/online courses that I can use to help me learn the engine as well as coding the visual effects. Below you can find a link to the resources that I am using throughout development.

• Dilmer Valecillos, Fire effect, https://www.youtube.com/watch?v=A3caNnvT_mA
• Gabriel Aguiar Prod, VFX Tutorial, https://www.youtube.com/watch?v=7bMOhNUA1bI
• Game VFX, Tutorial used to build gravity generator effect, https://www.youtube.com/watch?v=s6n2ObdIFAI

It may not seem like a lot of references but the amount of video tutorials in each will supply me with a lot of information for quiet some time.

Keywords searched: Unity, VFX, Graph

The Development Process

The Fire visual effect is made using Unity's Visual Effects Graph and is made up of three different visual effects combined into one. It is hard to capture all of the system in an image and it can be seen in better detail inside the project on GitHub. The first system on the left in the image below is in charge of creating the larger flames of the visual effect.

The Large Flames

 The large flames are generated using a flipbook player which loops through a spritesheet containing several frames of a fire effect. There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the flame in various ways.

Some of the modifiers i have used are:

• A set size random modifier that will create flames of various sizes to look more natural and random.
• A set lifetime random modifier that makes each flame last a different amount of time before expiring.
• A set scale.XY random from curve modifier which uses a curve graph to set the size of the fire for more variety.
• A set color over life modifier which fades out the fire as it nears the end of its life.
• A multiply size over life modifier that increases the size of the flame over the length of its life.

The Small Flames

 The small flames are generated from the middle system using a flipbook player as well which loops through a spritesheet containing several frames of a different fire effect. There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the flame in various ways. While a lot of the modifiers used are the same they are given different values to produce a different result.

 Some of the modifiers i have used are:

• Setting the capacity modifier to a higher value than the larger flames as I want more of the small flames.
• A set size random modifier with smaller values that will create flames of various sizes to look more natural and random.
• A set lifetime random modifier that makes each flame last a different amount of time before expiring.
• A multiply scale.x modifier to widen the small flames along the ground.

The Flame Embers

The last part of this system is the flame ember effects system on the far right. This system does not use a flipbook containing a spritesheet but instead uses the default particle effect as its core. There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the flame in various ways. While a lot of the modifiers used are the same they are given different values to produce a different result.

 Some of the modifiers i have used are:

• A periodic burst modifier which will activate the ember system at random intervals for a more natural feel.
• A set lifetime random modifier that makes each blast of embers last a different amount of time before expiring.
• A set velocity modifier which gives the embers a velocity when they are spawned. This is fed from several random number generators using different seeds to produce a more chaotic random look.
• A force modifier that applies force in the positive y direction pushing the embers up.
• A turbulence modifier which causes the embers to whip around as if being carried by an updraft from the fire. 

The Final Result

Once the visual effects construction was done it was time to put it in our game. We had several inaccessible areas that had broken doors in front of them so we decided to put the fire effect behind one to give the illusion that there was more to be seen behind the door but it was blocked by the fire.

We also had a small room that was meant to be a weapons lab when we originally had weapons in the game but is now unused so we decided to make this room inaccessible to the player and have fire on display in the windows to give the illusion that the room is on fire, hence why the door will not open.

You can find an image of the Visual Effects Graph below.

You can also find two videos of the fire effect in action within our scene below.

The Development Process

The Sparks visual effect is made using Unity's Visual Effects Graph and is made up of three different visual effects combined into one. It is very different in its design to the fire effect as it requires all effects to launch at the same time hence why they are all connected to the same spawner at the top. The middle system is also different as it controls the initial flash from the sparks which depending on your viewing angle (front or side) will look different. This is why it has two output nodes. You will see a different visual output depending on you position.

It is hard to capture all of the system in an image and it can be seen in better detail inside the project on GitHub. The first system on the left in the image below is in charge of creating the sparks that shoot out in random directions.

The Sparks Effect

The sparks are generated using a simple texture in a system that when called will spew out several particles in a set velocity which are affected by gravity causing them to fall to the floor. There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers i have used are:

• The single burst modifier which when called will create one burst of a specified amount of particles.
• The add velocity from direction & speed modifier which sends the sparks flying in a random direction and speed.
• The set mass random modifier which allows the sparks to be influenced by gravity.
• The gravity modifier which will cause the sparks to fall to the ground over time.
• The turbulence modifier so that the sparks move in the wind.
• The color/alpha over life modifier so that the sparks fade out over their life.

The Flash Effect

 The flash effect in the middle is generated using two different texture sheets in a dual flipbook output system. The player will see a different effect based on their position to the visual effect. If the player is in front of it they will see a flower like flash opening out from the center. If the player is side facing they will see more of a spew as the flash moves out left to right or vice versa. This effect triggers once at the origin of a spark burst before fading out.

There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers i have used are:

• The single burst modifier which only triggers a single instance of this system.
• The set lifetime random modifier which gives the flash different life lengths.
• The set alpha over life modifier which fades the flash out over its life span.
• The set scale.XY over life which widens the flash out over its life so its not constantly the same size.
• The orient face camera plane modifier so the effect always faces toward the camera.

The Smoke Effect

 The smoke effect on the right is generated using texture sheets along with a normal map in a flipbook output system. The reason for the normal map in this instance is to give the smoke more depth to it. The smoke effect will also trigger as a single bust along side the flash and spark effect. It will also travel out from its origin point just like the sparks but will not be effected by gravity.

There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers i have used are:

• The single burst modifier so the smoke only happens once per spark blast.
• The set velocity modifier so that the smoke is given a direction to move in when spawned. This is local to the world.
• The set lifetime modifier random which gives the smoke a random life span between the specified values.
• The color/alpha over life modifier which fades the smoke out over its life span.
• The size over life modifier so the smoke spreads out the longer its alive.
• The orient face camera position modifier so the smoke plume always faces toward the players camera.

The Final Result

Once the visual effects construction was done it was time to put it in our game. We had several inaccessible areas that had broken doors in front of them so we decided to put the spark effect in the hallway door at the dead end corridor. This was to give the illusion that the door was damaged to the point it no longer worked but that there was more to the world behind this door even if you couldn't see it.

We also had a small room that was meant to be a weapons lab when we originally had weapons in the game but is now unused so we decided to make this room inaccessible to the player and have sparks on the door to give the illusion that the fire inside the room had destroyed the doors functionality making it spark.

You can find an image of the Visual Effects Graph below.

You can also find two videos of the spark effect in action within our scene below.

The Development Process

The Lightning visual effect is made using Unity's Visual Effects Graph and is made from one visual effects system unlike the previous two. It is very different in its design as the particles are straight lines that move upward and distort to produce a wavy pattern like lightning. They LERP upward toward their end goal before they expire and are set to move at different speeds so it is possible for one arc to pass another. This is all set as random values between two specified values to add a bit more of a random feel to the effect and make it less predictable. 

It is hard to capture all of the system in an image and it can be seen in better detail inside the project on GitHub. 

The Lightning Arcs

 The lightning effect is generated using an attribute map that i got from one of Unity's example projects. This is used within the output node to control the position information of the effect. It also uses curves that arc in the middle to create the arc effects in the lines but still maintaining the start and end position of the arcs. The particles also widen as their life span goes on before they expire when they reach their end goal position.

There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers I have used are:

• The set position modifier which specifies the position the lightning arc is at.
• The set target position modifier which specifies the position the lightning arc wants to get to.
• The add position from map modifier which takes positional information inside an attribute map.
• The add target position from map modifier which similarly takes positional information from a map as target position data.
• The set color modifier which sets the color of the arcs.

The Final Result

Once the visual effects construction was done it was time to put it in our game. This visual effect had a specific use in mind. During the main quest within the game there is a point where the player has to pull a level to turn on a power generator. I scripted this visual effect to the lever pull event so that when the player pulled the lever to the generator the lightning arcs would move up along the Tesla coils. This effect really added more life and character to the event and is one of the more cinematic ones within our game as a result. 

You can find an image of the Visual Effects Graph below.

You can also find a video of the Lightning effect in action within our scene below.

The Development Process

The Steam visual effect is made using Unity's Visual Effects Graph and is made from two visual effects systems. It uses two different smoke texture sheets along with a smoke normal map to create the effect of steam leaking from a pipe. The steam then slows down and dissipates over its lifespan as it loses its force and concentration.  

It is hard to capture all of the system in an image and it can be seen in better detail inside the project on GitHub. 

The Steam Effect

 The steam effect is generated using two texture sheets and a normal map along with two visual effect systems using a flipbook output. The number of frames per second for the flipbook is reduced over the life of the effect so that the smoke plume lingers a little longer before expiring. The smoke also has a velocity set so it moves away from its origin as it expires.

There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers I have used are:

• The constant spawn rate modifier so the steam is constantly spraying out of the origin.
• The flipbook player modifier that uses a sample curve to alter the framerate.
• The set velocity modifier to give the smoke a direction to move.
• The set lifetime random modifier so the smoke expires after a specified value.
• The orient face camera position modifier so that the smoke plume always faces toward the player.
• The set scale.XY over life modifier so the smoke plume expands as it ages.

The Final Result

Once the visual effects construction was done it was time to put it in our game. This visual effect had a specific use in mind. There are steam pipes running along the floor in our game that give off a red glow. The steam effect is placed around these pipes to give the impression that these pipes are glowing from the heat of the steam passing through them but that they're also starting to leak from lack of maintenance.

You can find an image of the Visual Effects Graph below.

You can also find a video of the steam effect in action within our scene below.

The Development Process

The gravity generator visual effect is made using Unity's Visual Effects Graph. It uses the spark texture in the output node to help build up the effect. The effect combines several modifiers to create a sphere of these textures that gets distorted over time to make the effect more fluid in its movement. The idea behind this visual effect is to make it look like the generator is distorting the room around it. This effect was built from one of the resources I managed to find on YouTube.

It is hard to capture all of the system in an image and it can be seen in better detail inside the project on GitHub. 

The Gravity Generator Effect

 The gravity generator effect is generated using a quad particle output system which uses the spark texture as a base for the effect. The particles are manipulated into a sphere and are then effected by turbulence to have them move more fluid like and give the distortion effect we wanted the generator to have.

There are then modifiers inside the initialization, update, and output node of the visual effect system which alter the particles in various ways.

Some of the modifiers I have used are:

• The constant spawn rate modifier that constantly spawns particles from the center.
• The set lifetime random modifier that gives each particle a life span between two values.
• The position sphere modifier that positions the particle along a sphere.
• The turbulence modifier which moves the particles in a fluid way.
• The conform to sphere modifier which makes the particles want to make up a spherical shape.

The Final Result

Once the visual effects construction was done it was time to put it in our game. This visual effect had a specific use in mind. There is a gravity generator in the gravity room that is manipulating the objects inside the room. To attract the players eye to the generator on the roof this effect was made and put around it. It was also made to make the generator seem even more sci-fi in it's design considering it's radiating this weird fluid like distortion effect.

You can find an image of the Visual Effects Graph below.

You can also find a video of the gravity generator effect in action within our scene below.