How UX design can help with VFX
How do you show a player when they have to avoid something in a game? What about when a character can endure more hits than usual, how do you convey that information to a player?
Hello! I’m Kirill, a sparkles specialist at Mighty Bear Games (aka VFX Artist). I was a game designer and a UX designer before this, and I’m here today to tell you how those experiences have helped a lot with my current role.
Visual Effects (VFX) development in PvP games is primarily about sharing information with players in style. So I use principles of User Experience design to make my VFX more readable and reliable in terms of gameplay clarity.
Colour coding, focal points, and visual hierarchy are all important pillars that help communicate critical gameplay information to players. These pillars allow a player to quickly read situations and make decisions intuitively, without needing to puzzle out what the visuals are trying to tell them.
It’s easy to think VFX is just about pretty things, but it’s not just eye candy. Good VFX design helps players to understand the fantasy behind the gameplay effect they’re looking at. Which character cast that spell? Where did it come from? What is the nature of this spell? Is it soft and fluffy, or hard as solid rock? Is it hot or cold?
Visuals make the effect believable, and art style helps to ground it in context by behaving according to existing lighting, using different materials, or introducing a familiar source of energy to player, like elemental magic, sci-fi laser beams, or good old gunpowder.
But what stands behind making things easier to read? Let's talk about what makes good VFX readable.
Ancestral legacy
Our brains have been hardwired by countless years of evolution to quickly read various dangers around us. This has helped and will continue to help keep us alive. For example:
Fire hurts.
Spiky stick hurts.
Bear that runs to you hurts you as well.
Bright stuff that suddenly appears in front of us scared our ancestors the same way it scares us even today. This is a universal reaction across all humankind and most of the animal kingdom as well. It’s a behaviour that lies deep within our limbic system. Slow movement, predictable trajectories, or steady pulses incite less panic compared to quick, chaotically-moving or rapidly pulsing objects. This helped our ancestors to survive, and now it helps us to interpret flying fireballs as a threat.
If it ain’t broke, don’t fix it
It’s easy to forget that a player has played many games before they got to yours. What you should remember is to use what they already know or are used to.
A player experiencing your game for the first time will have to learn a lot of new stuff. What are the goals of the game? How do the gameplay systems work? How much damage can a character take before they die and respawn? The player will be overwhelmed with all this new information to take in, so FX shouldn’t be an additional hurdle. Before developing brand new VFX design, try to find ways to implement existing knowledge into your FX.
Healing spell? Add some plus signs in there and make it green, and you’re good to go.
Sleeping spell? Toss in some Zzzzs and use soft blue or pink shades that pulse slowly.
You can make use of a player’s existing knowledge of game visual language so that they can focus on the new exciting stuff instead of having to re-learn what a healing spell looks like.
Here’s what I typically try to reuse. Some colors are commonly associated with certain meanings:
Green — Heal, Poison
Red — Blood, Damage, Harm
Yellow — Speed, Goal, Direction
Blue — Shield, Magic
Purple — Corruption, Poison, Unnatural Force; something that will consume your will to life and should be stopped at all costs. You know what I’m talking about. That purple…
Universal language
If you’ve played any games at all, you will no doubt have thought about the different games you’ve experienced the colours above in. Studies have shown that no matter what your native language is, or how isolated you are from modern society, there are things that every human brain interprets the same way. It can be sounds, shapes, colours, motions, etc. Where possible, make use of that knowledge!
Here are two shapes. One of them called Bouba, and the other is called Kiki. Even if you’ve never seen these shapes in your life, you can tell which is which. That’s the famous Bouba/Kiki effect — it’s not only a good example of familiar shapes, but also source of many memes.
Big circles around characters mean that they’re safe (or safer).
Flying triangles usually indicate incoming damage and should be avoided.
Thin prolonged shapes show quick movement.
Budgeting for attention
We can use a ton of different shapes and colours to communicate the myriad of different things we need to, but at the end of the day, a human brain’s resources are limited, so it’s important to prioritise what needs to be communicated to a player right now, and simplify what doesn’t. When I design, I always consider how impactful information is. Will it likely be something that may change player’s behaviour? After answering these questions, I’m usually able to set the ‘budget’ of a player’s attention accordingly. Here’s an example from our recently released game, Disney Melee Mania.
Basic attacks appear and disappear quickly, leaving nothing behind. We will see that FX very often and every single encounter with it is not that impactful, so it should be simplified. It should be readable, but it shouldn’t linger on screen for too long.
An ability with crowd control or a massive buff on teammates is something that should be impactful, but you also need to consider how to show the applied effect clearly, how it affects other players within its range, and how long it lasts for.
Ultimates don’t appear very frequently, but they’re usually very important in terms of gameplay, and can even be a gamechanger at times. This bumps them up in priority where the attention budget is concerned. Don’t be afraid of spending that budget on Ultimates! In this case, we made the effect prolonged and added some recovery after its initial impact to show the player how important it is. We prioritised where it happened, and what the consequences of it were.
For very powerful spells, you can consider using pre-casts. This is a VFX that a player sees before anything happens in-game. It basically preempts the player that something will happen. I recommend using it when an ability is very rewarding to land. In this case, pre-casting works as anticipation for an impactful ability as well as a warning to other players. Even something like a 0.2 second pre-cast can help a player to read the situation more easily, and allow the opposing team to avoid the incoming spell if they can. It helps make games fairer as well.
At the end of the day, no matter how fancy and impactful your VFX are, it’s important to remember when and how they will be used. Visual hierarchy, familiar properties, and consistency across art in the project will always improve your work. Visual Effects should be used to support gameplay and not to disrupt it.
Here’s a little counter-intuitive tip as a conclusion. In my time as a VFX artist, I’ve found this to be very helpful.
Sometimes, if you want to understand how to make something better, you need to try and do a BAD version of it on purpose. After you do it badly, make it worse. Be creative with how bad you can make it. Try to more poorly design every single part of your work without breaking it. Why? Doing so helps you to understand what made your design good in the first place. You’ll start to notice the small decisions that you intuitively make, and once you know they exist, you’ll be able to use them consciously.
Happy designing, my fellow sparkles specialists!
If you enjoyed this article, drop me a clap or comment below, and follow us on Medium for more of such content!
