Making a Stylized Equalizer Effect

Flávio Villalva did a breakdown of the amazing stylized VFX made in Unity for the character Diva from Dungeon Hunter Champions.

Flávio Villalva did a breakdown of the amazing stylized VFX made in Unity for the character Diva from Dungeon Hunter Champions: equalizer effects, smoke puffs, and fire.

Introduction

Hello, everyone! My name is Flávio Villalva and I’m a VFX Artist from São Paulo, Brazil. I’m currently working at Gameloft Montreal. Since I was a kid, I loved playing games, but most of all, I loved tweaking games and messing with tools such as the Warcraft 2 Map Editor. Some years later I realized that working with games was a real option, despite the games industry is pretty small in Brazil. As soon as I saw the chance to get in, I took it.

I studied Game Design at Universidade Anhembi Morumbi, starting in 2007. About halfway through the course, I got a job as a QA Tester at Glu Mobile and from there I was promoted to Technical Artist. While being trained by Igor de Castilho, I first got in contact with the wonderful world of VFX working on Dragonslayer, and absolutely fell in love.

After Glu’s São Paulo studio was shut down in 2012, I worked on Band of Heroes at Mobjoy for a while before, a small company in Campinas, close to São Paulo. In 2014 I was offered a job at Black River Studios, in Manaus, Brazil. After 3 years there working on games like Finding Monsters Adventure, Angest and Rock’n’Rails, I was offered a job at Gameloft, where I am now part of the Dungeon Hunter Champions team.

Diva VFX

One of the most interesting characters I’ve worked on so far for Dungeon Hunter Champions is the Diva. She was a ton of fun to work on because her VFX are very different from the usual effects you would see from most characters. And she has that amazing stockings equalizer shader made by Benjamin Hugenin.

At Gameloft, we usually have a brief description of how the skills should work in the game and from there the artist in charge starts with a quick first pass, so it can be quickly integrated. This process is extremely important because this allows the artist to see the bigger picture for most of the process instead of working on a separate file in a blank background. This way we can see the skill working in-game, fully animated and closer to what the player will see in the final game plus it allows for faster iterations and communication with Art Direction and Design.

Since the game is available for both PC and mobile, we have to always take into consideration lower end devices’ restrictions, so for the radial Equalizer effects for the Diva, I wanted to do it as light as possible. To minimize the use of transparency the rectangles that form the equalizer shapes are not connected and the most of the trick is done via UV distortion.

I have recreated the Equalizer effect in Unity so I could show the process and source files. Here, I used a single texture that controls both the general level for the columns as well as the amount of noise and the difference between them.

The Red channel of the texture handles the overall level of all the columns. The Green and Blue channels are being multiplied together while scrolling in opposite directions. This creates a number of moving columns that are then used to distort vertically the Red channel.

1 of 2

Since this recreation is done in Unity, I used vertex colors and alpha to control the opacity and amount of scrolling. Those are then manipulated through the particle editor to create the fading and make each pulse of the equalizer as close to unique as possible.

The main mesh is set up as a circle, and the UVs were laid out as a rectangle, so the texture can scroll through it sideways.

1 of 2

After the meshes are ready, the different elements are stacked together. Those are the emitters separated for easier viewing

1 of 2
1 of 2

The great thing about this technique is that it can work for any type of mesh. This is a test made using a straight sequence of rectangles.

Smoke Puffs

Another simple but nice effect I did for Dungeon Hunter Champions is the smoke puff ring used for the Royal Tower character. We use a lot of those in the game and though we only use them as billboards, it’s also possible to use meshes in situations where the camera moves around a lot and the billboard’s lack of volume would be too visible like VR. In this case, performance can be an issue, so a lot of benchmarking has to be done to make sure the meshes are worth it.

In the situations where scaling down the particles is not an option due to the project’s art direction another option that I personally love is to use smoothstepping to fade the smoke puffs out. The following image is a photoshop example of how smoothstep can be used for that end by subtracting a distance field texture from the particle’s alpha.

Fire

Working with stylized fire on VFX can take so many forms. One of my favorite ways to approach fire includes a somewhat similar technique to the smoke puffs.

Most of the fire particles and meshes I use are made by multiplying sphere patterns that are then subtracted from an alpha mask, creating something of a rounded Voronoi pattern.

Afterward, the smoothstep comes in and does its magic, which basically forces a very high contrast, while keeping the edges nice and smooth.

After the smoothstep process, I usually apply the colors through vertex colors and in Unity’s case increase the color values to add some bloom.

Getting into Business

For people that want to get into the industry, the biggest thing is to keep at it. Nothing beats practice. In the beginning, recreating other games’ effects can be a really awesome way to learn. Try to analyze the existing effects and break them down to see how they were done. Twitter and the RealTimeVFX forum are awesome tools to reach people in the industry. Don’t be afraid to poke artists and pick their brains, most people will be happy to share and expand knowledge.

Advice for Learners

Of course, there are also some awesome resources out there that are absolutely invaluable for learning.

GDC talks:

YouTube Channels:

Blogs & Websites:

Conclusion

Finally, I would like to thank 80.lv for the opportunity to share a bit of what I’ve learned. This is a huge honor for me. I hope I was able to convey some of that information and that this is helpful somehow.

For those interested, I’m always available on Twitter, ArtStation, and YouTube.

Flávio Villalva, VFX Artist at Gameloft Montreal

Interview conducted by Kirill Tokarev

 

Join discussion

Comments 0

    You might also like

    We need your consent

    We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more