A good solution will take into consideration multiple aspects of the development process, not simply reuse the same solution time and time again. It is essential to know the pros and cons of many techniques. For instance, performance, cpu cycles, gpu memory, fidelity, development cycles, and many more. In this article, I want to focus on VFX. I have time and time again seen the youtube videos and other indie developers show off their skills in terms of visual quality, but boy have I seen many completely disregarding the impact their solutions have on the performing system.
When creating VFX many default to using particle effects. Way too many particles. However, you could with clever tricks get similar results. Consider a charge up effect like this.
This could be done using a simple sprite rendering particle effect using the circle below. Slap on a sprite scaler which would scale based on some curve and Bob is your uncle!
Except, this would not create these grungy noisy lines in the effect, nor would the line thickness become thicker and thicker as the particle is scaled. To solve this, you could spawn multiple particles with different sizes and scale them separately in a linear fashion as they age. Each particle could have this glowing circle texture and you would get a similar effect. To mimic the effect better and better you would add quite a few particles until you are satisfied.
I have seen this way too many times. There is another way though, and indeed, that is what I have done in the effect. Utilizing some simple uv-tricks, you can get away with one single texture and one mesh. The mesh used in the example above is a simple disc, uv mapped in a “smart” way. The uv:s are mapped so that the innermost part of the circle is mapped the top side of a texture and the outermost parts of the circle are mapped to the lower part of a texture.
Now all I have to do is to manipulate the uv:s in the shader of the object in the desired engine and sample the texture at those locations. In my case, I use a panner to pan the uv coordinates in a certain direction. In this case, the direction is from the outer rim into the center, meaning we want to pan from the lower parts of the texture towards the upper, i.e v-direction. There you go! All it took was a circle mesh with a few polygons and this texture.
But wait! There is more! Since we mapped the uvs in this way, we also get an added bonus of easily rotating the texture by panning uv’s using the u-directions. To exaggerate the effect, let’s use another texture.
It is an easy trick and a cheap one at that. It is also very versatile and can be used for many different kinds of effects. We have a few different parameters to play with.
- Shape of the mesh
- U-panning speed
- V-panning speed
- Texture
Let’s see what the effect looks like when using different shapes.
Shapes
Using a half sphere with set up similar to our circle example we get the of course a similar effect. One difference though is that now we have volume. This could be a charge shot around an arrow, seen from multiple angles. The planar circle example would become invisible if the camera would be stationed at exactly 90 degrees perpendicular to the plane.
Twisted shapes
But we can also twist the shapes of the mesh. They don’t have to be uniform in any way. Using a twisted circle, we get the added bonus of having a vortex like behaviour.
To exaggerate the effect, I use a simple perlin noise texture.
But why stop with circles and spheres. Go nuts! You can have any shape you want! From the left, a custom shape (see image below), half sphere shown previously, planar circle (shown previously), twisted circle, twisted cone , twisted and noisy cylinder (shown below)
As an added bonus, since the cylinder is twisted, a simple v-panner will make the texture seem rotated in the end result! And since we map the textures the same way in all the shapes, we can simply reuse the textures!
Speed
Changing the speed of the panner simply changes the feel of the effect. This can create a nice charge up effect! There is really not much to say here, except that you could make this way more complex by changing the panner. Instead of a simple UV-panning you could do a circular motion or even non-linear.
Textures
Last but not least (actually my favorite part) are the textures. The effects really stack up when you play around with textures. Keep in mind how you created the uv-maps. The reason for why we mapped the meshes like so is that we can easily create textures and reuse them on other meshes. Here are some examples.
In these examples I just used black and white images, but you could of course choose colors to play around with too. It would still be a cheap trick!
I hope that this little neat uv-trick finds itself into your toolbox, as defaulting to particle effects doesn’t always yield the solution to your problem. Are there any added bonuses that I have forgotten about? Do you use this? What are some pros and cons you can think of?