Summary
Visual effects in competitive and team-based games are a gameplay-readability system. A spell, attack, or ability effect exists first to tell the player what is happening, where, to whom, and with what consequence, and only second to celebrate theme and artistry. Riot Games’ internal style guide frames this with four goals: visual clarity, minimal clutter, thematic reinforcement, and surprise/delight — in that order. These principles generalise well beyond League of Legends: any game with simultaneous on-screen actions benefits from them.
Key ideas
Four VFX goals
- Provide visual clarity for gameplay. A player must be able to read an effect’s purpose and extent immediately.
- Minimise visual clutter. Every particle competes for attention; keep the total budget of “loud” effects low.
- Promote the champion’s (or character’s) theme. Effects carry identity, not just information.
- Create effects that surprise and delight. Polish, personality, and reward — but only once the previous three are satisfied.
Primary and secondary elements
Every effect is decomposed into a primary element that carries the gameplay signal and one or more secondary elements that carry theme.
Primary element:
- Is the effect’s focal point.
- Serves the spell’s main purpose.
- Communicates gameplay clearly and accurately.
- Uses high value range, clear silhouette, strong shape, high opacity, strong value/saturation contrast, intense movement.
Secondary elements:
- Enhance the character’s or spell’s thematic identity.
- Support the primary by pushing value and saturation around it.
- Use multiple hues and a wider saturation range for visual richness.
- Use lower value range, blurry/simple shapes, low opacity, small size, and subtle movement.
This decomposition is the single most useful lever in VFX review: if the primary and secondary elements cannot be named, the effect is not yet designed.
Scale of importance
The visual weight of an effect should match its gameplay weight. A common ladder:
| Tier | Size | Saturation | Opacity | Value range | Silhouette |
|---|---|---|---|---|---|
| Idle particle | small | low | low | narrow | blurry |
| Basic attack | small | low | low | narrow | simple |
| Defensive spell | medium | low | low | medium | blurry |
| Damage spell | medium | high | high | medium | clear |
| Game changer | large | high | high | wide | clear |
| Ultimate | largest | highest | highest | widest | clear + impactful animation |
An ultimate that looks like a basic attack makes the ultimate unsatisfying and confuses the viewer. A basic attack that looks like an ultimate makes teamfights unreadable.
Accurate representation of hitboxes and AoE
Competitive play requires that the visual extent of an effect equal its mechanical extent. Riot flags two recurring failure modes:
- Under-representation: the visual covers less area than the hitbox (old Teemo mushroom). Players dodge visually but still take damage.
- Over-representation: the visual covers more area than the hitbox (old Sona ultimate). Players are confused when an apparent hit misses.
Corrective practice: draw AoE indicators at ground level with a subtle ring so camera angle does not change the perceived shape.
Three readability checks
For any effect, ask:
- Readable: Can players and spectators instantly understand its purpose?
- Emphasis: Does it direct attention to important information while reducing noise?
- Scale: Does the visual weight match the gameplay weight?
In practice
Unity specifics:
- Unity Particle System exposes size, colour, opacity, and lifetime curves that map directly onto the primary/secondary and scale-of-importance distinctions. See unity-particle-system-scripting.
- Sub-emitters are the natural home for secondary thematic elements attached to a primary burst.
- VFX Graph (HDRP/URP) is the higher-budget option for game-changer and ultimate tier effects where millions of particles may be needed.
- Ground AoE indicators are often implemented as a decal or a projected quad shader so that the visible footprint stays accurate regardless of camera pitch.
- Shader Graph (see shader-graph-overview) is where value and saturation contrast are dialled in per-material.
- For review, a rapid audit trick: desaturate the screen. If the primary element still reads as brighter than everything around it, value contrast is working.
Evidence
“VFX goals: provide visual clarity for gameplay; minimize visual clutter; deliver visual effects that promote a champion’s themes; create effects that surprise and delight players.” (Riot Games, League of Legends VFX Style Guide, see source-lol-vfx-style-guide)
“An effect’s visual presence should communicate its degree of importance to players and viewers. For example, if a champion’s basic attack effect had the same visual importance as her ultimate, it can confuse the player or viewer. Also this makes the ultimate less satisfying.” (Riot, see source-lol-vfx-style-guide)
On old Teemo mushroom: “The radius of Teemo’s mushroom explosion is about 600 units. However the mushroom’s explosion only covers half of its radius and an area indicator is missing.” (Riot, see source-lol-vfx-style-guide)
Implications
- VFX reviews should be a collaboration between combat/systems designers and VFX artists. Without systems input, artists cannot correctly rank the scale of importance or verify AoE accuracy.
- A “cool-looking but unreadable” effect is a bug, not a stylistic choice, in any game with simultaneous combat actions.
- Secondary-element discipline is what lets a game carry strong theme (champion identity) without sacrificing readability. Strip the secondaries first when visual budget is tight.
Open questions
- How hard do these rules bind in single-player genres where teamfight noise is not a concern?
- How should the scale of importance interact with accessibility modes (reduced flashing, colour-blind palettes)?
- Can scale of importance be inferred automatically from damage/impact data, or must it always be hand-authored?