Anatomy of a League of Legends missile - Part 1 - Creating Areas of Focus

Hi,

I’m Oli “Beardilocks” McDonald, Lead VFX artist for skins on League of Legends and I’m here to talk about what goes into making a successful missile in League.

Oftentimes when looking at student work, art tests of candidates or the work of new associate artists the same kind of topics keep coming up. I’d like to provide a comprehensive breakdown here of the kinds of advice I give them to improve on their work, in the hope it might be helpful to some of you.

We’re going to do that by analysing some successful missiles in League and comparing them to some that could use improvement.

So let’s start by looking at what I think is one of the most successful missiles in League:

veigar%20Q%20simple

This is Elderwood Veigar’s Q spell - Baleful Strike. It fires a missile in a line, damaging the first two targets it hits. The thematic for this skinline is a magical forest full of druids, fairies, dryads and forest spirits. Veigar in this universe is a mischievous forest spirit.
Effect made by Kelvin Huynh, League VFX Artist

So what are some of the aspects that make this missile successful:

There’s quite a lot to take in there, but let’s start off by defining success in League VFX by establishing what our objectives are when making visual effects in our game:

Visual Effects Objectives in League of Legends

  1. Visually Communicate Gameplay whilst minimising noise or clutter

  2. Promote a skin’s theme or aesthetic

  3. Create stunning visuals that surprise and delight our players

So those are our 3 objectives. What’s most important is that this is an ORDERED list. As one of the world’s best eSports, visual clarity is very important to the health of the game. Therefore the most important objective for our game is to clearly communicate the gameplay, but we also want to fulfill our other objectives of promoting the theme (in this case “Elderwood”) and just to create some stunning visuals.

The best way to do this is by creating clear Areas of Focus in our effect.

Areas of Focus

I’m going to demonstrate this point with a comparison to Illustration.

I would like you to compare some pieces of art. Look at each of them, and tell me where you think the Area of Focus is:


Rainbow Noise by Oli McDonald, 2020, Digital

On my amazing picture, it’s very difficult to know where to rest your eyes, because I have not created any clear area of focus.

If Everything is important, Nothing is important

Let’s go to the other complete extreme, tell me what’s important in this image:


White circle by Oli McDonald, 2020, Digital

Clearly, the circle is very important, but it is not at all interesting. There is no thematic information communicated, and it does not surprise or delight you.

Now let’s look at one of the most famous paintings in the world.


Liberty leading the People by Eugène Delacroix, 1830, Oil on Canvas

By comparison, looking at Delacroix’s painting your eyes are immediately drawn to the Liberty holding the flag. She stands in contrast to the stylised background, haloed by light, holding the only saturated colours in the scene: the tricolour flag. There is still a lot going on in this painting: the themes are clearly communicated, but the artist has created it in such a way that you immediately know which of the many figures is the most important. The Liberty is the Area of Focus.

Great art has Areas of Focus, and Areas of Rest

Let’s look at another famous painting and analyse the ways that the artist has created areas of focus:


The Night Watch by Rembrandt, 1642, Oil on Canvas

Again, this is a painting that is visually appealing, that clearly illustrates a theme, but has a clear area of focus. Both the foreground and background are made up of characters, yet we naturally focus on those in the front first. Let’s look at how this is done:

These are the tools that the artist has used to guide our eye and create an Area of Focus:

  1. Value (or brightness)

  2. Colour (or saturation)

  3. Shape (or detail)

The Area of Focus has these attributes:

  • Highest and Lowest Value (and as such, highest contrast)
  • Highest Saturation
  • Most detail (shapes are rendered sharper than the background, for example)

Let’s apply this knowledge to our VFX.

We know that the most important objective for our VFX in League is to Visually Communicate Gameplay. Therefore, the Area of Focus for our effect should be the element that is communicating gameplay. In this case, the front of the missile is the area that will damage opponents, so this should be our Area of Focus, or Primary Element. Any part of the missile that is there only to reinforce the thematic should be a Secondary Element.

image

We have used Value, Contrast, Saturation and Shape to ensure that the Gameplay area is the Primary element, so we have fulfilled our objective of Communicating Gameplay. We are still promoting the theme with the trail, so we are fulfilling our objective of Promoting a Theme, and we have a launch effect on the character that adds satisfaction, and the effects is generally very pretty, so we have fulfilled our Objective of Suprising and delighting our players.

I was originally going to make this into a longer post, but I think I’d rather break it out into separate ones, so this was Part 1.

Next time: Gameplay information and Levels of Importance.

As always, if you want to read more, check out the style guide:

38 Likes

The Rainbow Noise is just… :rainbow: :joy:

Loved the use of paintings to explain visual appeal!

Thanks @Beardilocks!

3 Likes

Hi,Guy,Nice Work!!. I’m Very Like your do something

1 Like

My english is bad, so I just can say that your share is very good! Thanks your share very much!