Hail of Swords VFX Breakdown
For this breakdown, I will go over each of the elements that make up this effect as well as a brief look at some of the techniques I used in the shaders to help tie it all together.
Ideas and references
The origin of this effect is derived from an animated show that I had a glimpse of a few years ago, since then it has been on my mind and I've always wanted to recreate something similar. The elements that I wanted to capture the most was the impact of the swords hitting the ground and the array of swords spawning in one after another; the effect needs to feel epic but not too overdone.
Below are some of the references I collected from the show that I'd seen.
The general idea was to have the swords spawn in the sky and shoot them down into the ground. For the full effect, the general structure I had in mind was as follows:
Swords shoot down to the ground
On impact, there is a small explosion but the sword remains
The swords disappear
For all the effects I am using Unity's default particle system with custom shaders made in Amplify shader editor.
The sword's particle system is the driver for all the other effects as it is the core visual element.
The first step was to set the timing and scale of the effect. Using the generic player height of 2 meters, the effect was made to be an AoE (area of effect) with a diameter of 8 meters and a height of 6 meters, this gives plenty of space for damage to happen on a group of targets.
To spawn the swords, I made a custom mesh with a fixed amount of vertices so each sword can spawn on each vertex, in doing this I can also add a sequence to how the swords load in. You can see this in the gif of shooting swords, they are appearing from left to right and shoot down in the same manner.
Using the custom mesh, I can give the swords an orientation by giving the mesh custom normals, I did this by ticking "Align to Direction" in the "Shape" module.
The custom mesh was made in Houdini but you can do it in any modelling package.
A key focus for me in this project was to apply the 12 principles of animation to the visual effects. This would help make them more visually fluid and appealing, you can see subtle things like squash and stretch, anticipation and follow-through used in the animation of the swords. I easily achieved this by using the "Velocity over Lifetime" module in the particle system to control how fast or slow the sword moves throughout its lifetime, the curve might not look intuitive but don't forget it's a modifier of the actual speed.
Lastly enabling the "Collisions" module, the swords can interact against objects with the collider component attached. This is useful for when the swords hit enemies or objects and need to stop. I also use this to trigger sub-particles like explosions since the collisions can also cause triggers in the "Sub Emitters" module.
Another element to the swords is the flames that appear when they are shot down.
To get them to sync with the swords motion, I simply
duplicated the sword particle system and changed
the sword mesh out for
a cone mesh.
The dissolve effect and shader effects
The swords, explosions and flames all use the same shader. The dissolve effect itself is a slightly modified shader that I created in this post: A simple reusable shader for VFX in Unity using Amplify Shader Editor. What's different is the addition to control shader variables through custom vertex streams. Simply put, it's a way to pipe information from the particle system to the shader using the UV channels in the shader.
To the right, you can see the curves that are used to drive the shader variables. (Red and green). The curve values are sampled by particle age and make it easy to control such effects as dissolving and opacity. Below you can see where the curve data is piped into. It's the "T" channel of the "Texture Coordinates" node. This makes it really easy to control the swords dissolve in and out effect without having to create animation files that keyframe material variables.
Another core element is the portals that spawn the swords in. They work by loading in the swords from bottom to top. This helps add extra anticipation that the swords are spawning in, making both effects look like one motion.
The texture that I used is the only asset in this project that I've sourced from a purchased asset.
The role of the indicator is to provide the player with an indication of the area where damage will happen, all the effects will be constricted
within the circle. This effect is multilayered and uses an RGBA channel mask I created in substance designer. The blurred mask is for a shadow effect while the hard mask is used for the actual indicator.
The last cluster of effects is for the impact of the sword, helping drive them into the ground to convey to the player, that damage is being done.
The swords impact effect is triggered after a collision is detected on each sword, the first particle system which is the explosion effect plays and then the sub particle systems which are the stars and ground cracks are triggered and played; layering these effects as "sub emitters" makes it easy to make changes and control timings for multiple effects at once.
Now with all the particle systems tied together, I think the
visual effect looks hella awesome. I really enjoyed working on this mini-project and it was a great experience for me to learn more about the 12 principles of animation. I'm excited to do more similar work and push more into Unity's particle system.
The only issues I had were the stagnation for when the last few swords would hang in the air for too long. Another issue is when the swords are dropping, they feel as if they're moving too quickly which might take away from the punch or the ompf, maybe I'm just lacking screen shake? The color scheme also seemed too monochromatic in the goldy yellow hue. I did try to add red in there however, it blended in too well with the yellows.
Overall it was awesome and I appreciate you reading my post!
If you have any feedback hit me up!