Anatomy of a League of Legends missile - Part 2 - What are we communicating with our VFX

Hello,

Riot Beardilocks here back with part 2 of my series on making successful missiles for League of Legends.

In Part 1 we discussed using the tools in our arsenal to make Areas of Focus to draw the player’s eye to the most important part of a spell. But how do we know what the most important part is? In this article we’re going to cover what information you’re trying to communicate with your visual effects.

What are we trying to communicate with our VFX?

When we’re making visual effects for games, it’s very rare that our only goal is to make some pretty eye candy that looks cool. Usually VFX represent an ability or action, whether it be flying bullets, a rocket explosion, or a magic spell. As such, we are usually trying to express some important information to the players about this spell or ability (as well as making it look cool). So what are we trying to communicate with a missile in League?:

What is this ability?
What does it do?
How much impact will it have?

Answering these questions will help you to design your visual effect to communicate this information most effectively to players. Let’s break these down further

What is this ability?

Probably the most important piece of information that you need to effectively communicate to players is which ability from your game this visual effect represents. For every unique ability in the game, you should associate some unique design language with that spell or effect, so that players can learn and recognise the ability at just a glance.

Here’s an example from League of Legends.

This character, Morgana, fires a missile that if it hits you it will root you to the ground for a few seconds.

Morgana-Q-Gif

In order to make this ability recognisable it has some specific design elements that differentiate it from all other missiles in League:

These elements together give the missile a unique appearance that only Morgana’s Dark Binding has.

When we make skins nowadays we always change the appearance of the visual effects in addition to the character design. This can be challenging, as we need to maintain recongisability. This makes it particularly important to create a strong, unique visual identity for each spell when we create it, and adhere to that design language for each skin. This means we can change the colour or other aspects of the visual design and it should still be recognisable at a glance.

  • Establishing a unique visual identity for each ability allows players to quickly associate it with a character and their gameplay

This is especially important in a game like League, as abilities often have multiple effects or unique interactions. But it’s also true for other games like shooters, though the unique cue might be a unique smoke trail behind a bullet or specific shaped muzzle flashes from a gun.

What does it do?

Even with a unique design for each effect, players still need to play the game or read the ability text to figure out what each spell does. LoL is a game with almost 150 characters, each with 5 (or more) abilities, so there are more than 750 unique abilities, all with unique VFX! This is a lot to learn and remember!

As visual designers we want to help players learn what an ability does as soon as possible when playing, preferably without having to go research between games.

As such, we want to establish and use a set of shared visual design when abilities have similar effects to each other.

Let’s take a look at Morgana’s Dark Binding spell as an example. When it hits the target, it will root them to the ground for a few seconds, preventing them from moving.

Morg-Q-hit

Note that the target hit by Morgana’s target has a ring on the floor around her, and a cylinder coming up from it that looks like it would prevent her from moving. This is the visual design language we have established in League for roots like this. When developing new visual effects or skins, if an ability roots, we try to make it look similar to this. Here are some examples:

There are plenty of other rules we apply to communicate the effect of our spell visuals. Including, but not limited to:

Heals should be green, and their shape should not feel threatening

Spell shields have pulsing lines panning down them

Abilities that knock targets up into the air (“Knockups”) have strong vertical elementss

  • Maintaining consistent visual design for abilities with similar effects will help players to learn them more quickly, and understand the mechanics of your game more easily

Another part of this is using existing tropes from video games to communicate status effects, such as poison, silence or stun. Where possible we should use intuitively understood visual designs, rather than trying to reinvent the wheel on every effect.

image

How much impact will it have?

Does your spell do tons of damage? Or are your attacks going be like slapping with a pool noodle?

There’s always a temptation as a VFX artist to make absolutely everything you create be the most stunning, satisfying visual spectacle imaginable.

However, it’s important to communicate how strong an ability is using the visual design tools available to you. Just as I mentioned in Part 1, if everything is important, nothing is important.

As such, spells that do more damage should be bigger, brighter, and more threatening, with sharper shapes and more attention-grabbing timing.

image

However, there are more factors to consider than just damage alone. For example, if a spell is going to cause a stun, root or other status effect, it should have a more impactful visual than an ability that does damage alone, as a root would result in a player being vulnerable to follow up attacks from other enemies. Other considerations would be if the spell is something you can dodge, or if it’s an ability likely to be thrown out while the caster is concealed out of sight.

A useful exercise we do on League for new champions is to ask the designers to provide us with a Visual Hierarchy document, where they rate a spell’s importance from 1-10. This helps us to make sure the visual importance matches the gameplay importance when we make our VFX. Here’s an example of what the visual hierarchy for Morgana might look like, along with the reference key:

This gives us a rough guide of how visually important to make a spell. By adhering to these guidelines we can make sure that the most important spells and abilities within our game will really stand out, even during busy teamfights, where there can be a lot of VFX happening at once.

You can see in the document that we also rate the visual importance not just for the player, but for their enemies and their allies; if these values differ significantly we might consider making a visual effect that looks different from different perspectives. There is only one ability for Morgana where the importance differs enough to warrant creating a different effect for different views - her R range circle:

In this case this is an important piece of information for Morgana and affected targets to play around - her enemies need to get out of the circle to avoid being stunned by her chains, Morgana must try to make sure they do not escape. However, this is not important to her allies, as the circle does not provide any information that would affect their play. Since it will only add visual clutter to allies, the circle is only shown to Morgana and targets affected by the chains. This helps us to minimise visual clutter in team fights.

  • Understanding the gameplay impact of the abilities in your game allows you to create a clear visual hierarchy with your VFX, to communicate the importance of your spell and minimise unnecessary clutter

So there you have some questions you can ask when you set out to make an effect, that will help you to guide your creative decisions when designing your visuals.

43 Likes

Hey Oli, thanks a lot for taking some time to explain all of this it’s really interesting. I really liked the hierarchy part which was a bit hinted in the visual guide but seeing it here with the comments adds some more meaning to it.
Can’t wait to see what’s coming up next :smiley:
Have a great day and send big kudos to the team.

3 Likes

Thanks for this write-up Oliver!

I always wondered about how you guys handle the visual hierarchy, so it’s awsome to gain insight on this topic! :slight_smile:
I can’t wait for your next post! :smiley:

1 Like

Thanks for share about the guide of league of legends vfx!

1 Like

Thanks for share about the guide of league of legends vfx!

Thanks for the tons of info and effort you put into this! I’m not gonna lie, I never noticed the chain link at the core of her Q before :dizzy_face:

Thank you for sharing this! <3

Thank you so much! :heart:

I am deeply inspired by your valuable tutorial!!
I looked at your post and made it similarly.(UE4 Style)

2 Likes

Thanks for sharing!!

1 Like

Hi Beardilocks,

Great insights here and thank you for sharing this awesome knowledge.

I have seen a few video that explains the fundaments for VFX of League and I have seen the deconstruction of a few effects such as the basic attack of Dragon Trainer Tristana and I am astonished to the attention to detail and perfection that league has.

I am also impressed by the balance that your team managed to achieve with clarity/impressiveness of the VFX during busy teamfights. That in itself is a form of art.

I am interested in reading more about basic attacks and the design process for that also.
I would like to see your processes for much simpler attacks such as Jinx minigun basic attack or Vayne bolts or Soraka banana’'s (lol) Are there any videos or reads for this?

Much appreciated ^^

That’s a really beautiful effect! Some awesome motion and you’ve created a really great visual hierarchy with the colours and values, great work