VFX Staples: Shape, Color, and Motion

Stefan Jevremović did an overview of the way you can approach beautiful stylized visual effects. Learn how you can do stuff similar to League of Legends.

Introduction

Hi, my name is Stefan Jevremović I am 30 years old, born and raised in Belgrade the capital of Serbia. I make “magic” for a living… also known as Real-time Visual Effects for video games.

I work at Nordeus an independent mobile-gaming company based in Belgrade, best known for Top Eleven, the world’s most successful mobile sports game with over 180 million downloads. My VFX career started here on our mobile game Spellsouls: Duel of Legends.

I was always passionate about art and games. I started playing with LEGO when I was four and playing games on my Commodore 64 when I was six. The first time I encountered computer graphics was in 1998 – I was on the summer vacation in Spain to visit my cousins. My uncle Kenan worked as an architect back then and he showed me some of his work, it blew my mind! He said: “you can make anything you imagine in this software 3D Studio MAX.”

When I returned to Belgrade with his copy of MAX, I immediately started to teach myself. Not because I wanted one day to do that for a living, but for fun and for the art. Back then there were no video tutorials and in fact not many tutorials at all. Many I found online had a lot of text and few screenshots, so I had to use a dictionary to translate some tutorials.

In 2004 I started playing World of Warcraft far too much. So much so that I didn’t touch 3D for two years. Up to 2006 I had been teaching myself 3D, until I found out there is a VFX School called Chiron in Belgrade, I joined the forum and shared my work and for the first time got real feedback. The community was so helpful, and I made a lot of friends. Dragan, a colleague of mine, helped me a lot back then. He convinced me to enroll in school and learn everything from scratch, but in Autodesk Maya. I learned Modeling, Texturing, Rendering, basic Rigging and Character Animation. I had a problem deciding on which area of 3D I want to focus and specialize in.

After finishing Chiron I mostly got freelance work as Hard-surface 3D modeler. I learned the most by skype share-screening with a friend, who at that time had a lot of projects on his plate, to the extent that sometimes he would give me parts of his project to work on for a fee. After a few projects I became faster and better, it was then he would give me a whole projects to work on. That is how I started, but the problem was I couldn’t really show any of that work as it wasn’t officially mine.

Later I would work beside him on cinematic trailers for World of Battleships and World of Warplanes, and that is where I got first few models I could put into my portfolio, and also when I decided to shift into the gaming industry.

I started at Nordeus as an intern 3D artist. In 3 months I learnt a lot about production for games, but most of all how to be resourceful by kit-bashing assets from the Unity store.

After a year in Nordeus working on an unannounced project, I joined a small team of 11 people that started to work on the next Nordeus game, Spellsouls: Duel of Legends. From prototyping to pre-production I worked as a 3D generalist mostly kit-bashing and modifying the assets to work in our game. Spellsouls is a mobile line-based PVP game where you spawn minions and cast powerful spells to shape the tides of the battle. When we got greenlit for pre-production, more 3D artists joined the team and that is when the company offered me the opportunity to try working as a Visual Effects Artist. After three months I decided it was definitely for me and my career – I had found something I wanted to stick to, learn and improve as much as possible.

Visual Effects in Games

Key Factors:

Even though Spellsouls and League of Legends have a slightly different art styles for VFX, both games have many similar key factors:

Before starting with VFX it’s important to have good communication with Game Design and Concept or UI Art departments in order to nail down the idea for VFX.

Fast-paced real-time gameplay needs VFX to happen fast, but still provide the visual clarity to the player without noise.
VFX needs to be visually pleasing, while thematically accurate for each character.
Camera position and movement info can help out with production of VFX – making the effect work and look great from the game’s singular camera angle.
Gameplay comes first! Effects are there to support players actions, but sometimes you have to tone down the visuals for feedback and clarity.
Get as much feedback on your work as possible. Not only from the artists, but from the gamers and also from those who don’t play games that much.

Process

I divided effects into categories: Environmental, Character, Spell/Ability and UI Effects.

Before I start making the VFX, I talk to Game Design and get as much information as possible, usually double-checking that this VFX is the priority.

Art of the VFX

All VFX are heavily dependable on what I like to call – “Three Influences”: Shape, Color and Motion. Depending on the effect, some use more specific shape, where others are mostly influenced by the motion or the color.

Here is how I divide the elements of VFX

Everytime I am about to make the effect I like to dissect it into the elements and look them separately.

Each element needs to go through this checklist:

How important is this element? Is it the primary focus?
How much attention should it draw?
When/how is it going to appear and disappear?
How will it blend with the rest of the elements?
If I add this element, will it make the effect noisy?

Spells/Abilities Effects

These effects are usually the most impactful and easy to spot because they give the player the best feedback about gameplay.

Spells/Abilities checklist:

Which character uses it?
How powerful is the effect?
Logic of the spell, pre-cast, duration, status effect and area of effect?
Rarity of the spell?
Do we have concept art/idea, or should I design it myself?

For Concept Artists it’s not easy to imagine the timing of the spell. Sometimes what they put into their concept doesn’t work best in 3D and needs iterations. That is why I like to go through Pinterest and look for inspiration and change/improve the idea of concept art before doing it.

Once I have all the info I would open Unity and start with the block-out of the spell. Trying to reuse stuff as much as possible in this first phase. Currently I am trying to prove that the effect will work well in game. That is why I try to include all the elements quickly and have some basic timing set up. Then I can push it into the game so Game Design can test it out, and see if it’s working.

Animations

With Unity Mechanim system it’s easy to Animate: You hit the record button and whatever you change in the editor will be recorded into animation.

Every effect has:

Anticipation or Fade-In. Timing for this is determined by Game Design
Climax or Impact. Here we show maximum number of elements. Biggest Contrast, High Saturation.
Dissipation or Fade-Out. This stage shouldn’t stay visible for long because effect is over and you don’t want to distract the player. Low Contrast, Low Opacity.

Animations, Layers and Triggers.

Depending on the VFX, the number of animations varies, most of the time it is around three animations per spell.

We use Triggers to move between animations. Programmers create the logic of the spell with specific names for Triggers which are dependent on what the spell does. You can also click on the name of the spell to see detailed breakdown.

Meteor Strike – After a short delay all units in the circle area take damage and are pushed back from the center of the impact.

2 animations:

Anticipation – Filling the area indicator showing when Meteor is going to hit and in what radius. Timing of this animation can me changed through spell setting 0.5s -> 2s
Trigger HIT – Meteor will not hit the ground if the logic didn’t call trigger HIT
Climax and Dissipation are animated together

Unstable Dome – Enemy units in area are stunned for the duration. Additional effect: Whenever enemy cast a spell, all enemy units in the the dome take damage.

5 animations:

Anticipation – appearing of the dome
Loop 1 – energy scrolling, small lightnings looping forever
Loop 2 – blue lightning strikes from time to time in random pattern
Hit – when enemy player casts the spell trigger HIT is activated and purple lightnings + spikes animation plays that is on a different layer
Dissipation – duration of the spell is X seconds, so trigger END will be activated and play Dissipation animation which is on a different layer

This way you can modify the spell durations and it will still work. Only thing that is really painful in Unity is scaling of particle systems. Sometimes if you want to scale whole effect you get problems with particle systems. That is one more reason to avoid them and use meshes with scrolling textures if possible.

Shader

Our graphics programmers created a Master Shader with a lot of options that gives us freedom and flexibility to explore and play around. Potentially you can go around and click on random stuff and get some interesting results. It gives you good chance for Happy-AccidentsSome of the basic shader options we use:

Red channel is by default used for Color.

Use 1,2,3,4 color gradient for main texture. Then we have a tool that make LUT from the gradient that we chose.

Use RGBA texture for color. If the texture is really going to be Unique for we can put in Colors. Otherwise we use grayscale so we can reuse the texture later.
Become a Cutout shader.
Use Green channel for Emission. We use this when we want to have two different colors on the same texture but separate animations (Meteor strike Crack Decal have it so i fade the cracks and ignited core separately while keeping it a one texture)
Use Blue channel for Alpha. This again gives you more control over main color and Blue channel.
Fade In/Out. Works like Levels in Photoshop

Vertex Color/Alpha options. Most of the time we use Vertex Alpha for fading the texture on the edges of the mesh.
Use second texture for blending with the main texture.
We can use all Blending Modes
Use Flipbook (sprite sheet) and add Motion Vectors to Flipbook
Use Flow map
And many more…

Optimization

Since Spellsouls is game for mobile it is critical that spells work and still look good on all compatible devices. We did a lot of tech investigation to determine how to optimize VFX, and we made few simple rules:

Use particle systems only when you must. Try faking them with scrolling textures over meshes.
Overdraw will kill the performance, try to keep it as low as possible.
Reuse textures as much as possible. Grayscale textures can usually be kept compressed. Test if lowering the resolution impact on losing details. If not, keep them low.
If you must use Flipbook try keeping it small with frames enough to cover the duration of the element. You can reduce the number of frames if you use Motion-Vector texture to add blending between frames.

Drawcalls budget for the spell:

Rarity of the spell: if the spell is rare it needs to look amazing! That is why we usually have bigger graphics budget for them.
Duration of the spell: have impact on budget. If the spell is going to be on the battlefield for a long time than we usually try to keep it in the budget so you can cast multiple spells without impacting your phone’s performance.
Multi-unit spells: affect multiple units on the screen. The more units the cost is bigger. We make calculations to what is the highest number of units on the screen in the given moment and then determined what is the budget of spell.
Game Resource cost: Let’s say that Meteor Strike cost a lot to use in game, that means you will not be able to spam it all the time. Therefore you can put a bit more into that spell

Environmental Effects

If VFX does not affect the gameplay in any way, then they are usually subtle so they enrich the level without distracting the player. Or, they can be part of the gameplay to make sure that the players’ eyes are drawn to see a point of interest.

Example: Necromancer Battleground – We have green mist coming from the sides, poison lines on the floor and soul-sucking throne in the top middle. There is also an animated gradient on the top of the screen to give more depth and atmosphere.

1 of 2

Character Effects

We use these to add additional level of details to a character personality. Most of the time the effects are connected to the animation of the character, like entering the battleground or casting a spell. Sometimes the effects are part of the character and present at all times.

Example: Lyra the Illusionist Spawn Animation – Her magic: illusions, crystals, mirrors and portals to the other dimensions.

1 of 2

Example: Valen the Paladin Attack Animation – His magic: Holy, Divine, Fire, Lightning

Example: Valen Execute – I made this VFX in just a few hours by reusing textures, even some meshes from other effects. I like to make key poses for the character and animate the timing.

Later I use that timing to create the VFX on the top of it.

User Interface (UI) Effects

Leveling up or gaining the currency in game are both supported by VFX. Today Free To Play games have really cool effects on opening a Treasure Chest or revealing the Cards. These effects build up anticipation before revealing the reward. (this psychologically enhances the feeling of being lucky – bigger rewards build more anticipation).

Example: Card Revealing – When you open the chest in Spellouls you get multiple stacks of cards.

Example: Necromancer – Selection screen in Main Menu.

Making effects for games is really fun and often really challenging. It makes you think outside the box and learn things you never thought you would. Sometimes you may even need to open an old elementary school math books.

Stefan Jevremovic, Realtime VFX artist at Nordeus.

Interview conducted by Kirill Tokarev.