Un-Abandonware VFX Deep Dive: Green Smoke VFX


Hello gamers! This is Kristen Holcombe with Team Disgruntled Games, and I'm looking forward to giving you a deep dive into how the green smoke Visual Effects (VFX) in Un-Abandoned Ware was created and how to create similar VFX yourself!  

Each of these 3 smoke visual effects are modifications of a base green smoke effect, as properties in the inspector allow the amount of smoke and the color to be changed easily and quickly.

This VFX was achieved using the VFX graph and a drawing program (Clip Studio Paint). 

Creating an effect like this starts with making a good texture.

Here is an image of the final cloud brush png used in this effect with a black background for visibility:

This png texture was created by using Clip Studio Paint's cloud brush and then blending tools to add softness, depth and dimension. When creating your own textures for VFX, it is important to make sure that the background of the texture is transparent when exporting. This can be easily achieved by drawing on a transparent layer and then turning off the visibility of the background. Then export as a png. 

The final result is a lot like making a brush for Photoshop or Clip Studio, but with one major difference. If you take the same approach it like making a brush, you will get a png that looks like this: 

And needed to be inverted to work in the program.

This is because, while drawing programs like Photoshop and Clip Studio Paint process the darker areas of a brush tip as areas of bright color, Unity does the opposite and seems to keep the brightness of a color instead. This means it processes the lighter areas of the image as a bright color and then allows you to change the color in particle vfxs, vfxs graphs, and shaders.  When I put in the image before reversing it, the result was a very dark smoke that barely changed color. To get the bright green or red smoke above, I had to use the first lighter reversed image.

Luckily the process of inverting a png can be done easily using adjustment layers (Photoshop) or correction layers (Clip Studio Paint) in most drawing programs.

Then, take your png and use the transform to shrink it a little to make sure there are no angular gradients that make the texture appear square.  It is recommended to use a background layer to check this. If the texture has any visible hard edges or looks squarish, just soften them up with a large soft eraser or airbrush.  

Here is an example of a texture with hard edges:

Now you can export the png to unity and create a visual effects graph with a minimal system in the asset folder. 

Now onto the VFX graph!


Now go to the hierarchy/outliner and create a visual effect and load this vfx in the "asset template" box. This will allow you to see the vfx in the scene or game panels as you edit the graph. In the assets, create a vfx graph and click it to open its panel.

In Spawn, I choose the "Periodic Burst" node and set it to a delay of 0.1. I then set the count by connecting it to a "random Int" node. I set the seed to 3 and made two int properties: "MinSmoke" and "MaxSmoke" with their defaults set to 1 and 10 respectively and both set to "exposed". This allows me to change their properties in the inspector so thicker or thinner smoke effects can be created with the one shader.


I also made a float "lifetime" property and a color property called "SmokeColor" and set the default with intensity as Un-Abandon Ware which is available for games using the HDR rendering settings. This intensity adds a bright glow effect to the smoke, but can just as easily be turned off for a more subtle effect. 


In Initialize Particle, set the capacity and bounds.  


The you can add a "Set Lifetime Random Uniform" node and connect the "lifetime" float property to the "a" value (as the larger part of the range) and write 1, or however short a lifetime you want) as the b value. 

I then added a "Set Position Shape node Sphere" node which gives the VFX a more rounded appearance at the base. You can leave this step off if you want and your vfx will start from a point instead. You can also change the shape using the drop down and even manipulate the shape's size by selecting the VFX in the inspector and then the shape node and and outline of the shape will appear in the inspector with controllers. Manipulate it as you would a collider. It is extremely convenient! 

For example, choosing "oriented box" and expanding it to the side creates a wall of smoke vfx. 

Set Angle. XYZ" node and set the range from 0-360 in the z axis. While smoke vfx's will often use flipbook and a sprite sheet to choose smoke randomly or in order from a sprite sheet, using changing the angle like this allowed a similar effect without creating a bunch of more pngs for a quicker workflow. Create a Random Vector3 and you can use my settings (visible above) or experiment with your own!

Finally, add a Set Velocity from direction & speed New Direction node. Set the speed mode to constant or random depending on preference and now you can set and set the speed and direction. Changing the speed in this node will allow your smoke to move or less quickly. 


Update particle has a gravity and linear drag mode to add realism to the smoke's movement, but the gravity has been adjusted to use an upwards force. This two can be changed to affect the smoke's speed and movement. The gravity helps the smoke move upwards with the y, but adding a force to the x or z makes the smoke move in those directions, great for portals, wind effects, or other cool effects.  

Changing the y value also affects the height of the smoke like changing the lifetime does. Changing to something like 100 creates an awesome wind tunnel-like effect.

Set Size over life node and a graph allows the smoke to appear to grow more organically and set color to the color property so it can be changed in the inspector. 


In the Output Particle Unlit Quad node, set blend mode to additive and set the texture either directly or make a texture 2D property so it can be set and changed in the inspector.

I also add an orient: Face Camera Plane node which makes it so the particles are always facing the camera and adds a much better effect over all. I also added a size over life node. This node is not strictly necessary as we set the size earlier, but I like to change the composition setting in the inspector with this node selected  to "Multiply" so they increase the size of each other more easily.

Lastly is Color Over Life. Similarly to the Size Over life node, we set the color earlier and can choose between the Set Color node or this one, but if you set this one to multiply, and create a gradient property to change in the inspector, this can give some more freedom over the color choices. It is important though to start the gradient at 0 opacity and fade in as much as needed for the game because otherwise the images will spontaneously appear in a more "explosiony" or "flickery" effect than intended.

Also, if you select the "output particle unlit" section,  you will see an option "use soft particle" in the inspector. Checking this box will make it so your vfx will not create harsh lines when the smoke moves through objects like walls or flooring.

And that's it! I hope you enjoyed learning how to make your own smoke texture and let me know if you have any questions in the comments!

Get UnAbandoned Ware

Leave a comment

Log in with itch.io to leave a comment.