Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
'If authored with intentionality and purpose, VFX can become an essential part of any game's design.'
October 21, 2024
Visual effects in games command our attention through spectacular visuals. Stunning arrays of spells, explosions, and more can evoke visceral emotion and tactility in a digital landscape. Under the hood these real-time visual effects refer to a wide umbrella of techniques and methods, ranging from particle systems to shaders to volumetrics, all used to produce these visual standards in service of a player experience. Beyond the spectacle, VFX in games can be leveraged as design tools themselves. Design-facing VFX illustrate mechanical concepts and offer clarity to players while visually integrating these ideas into greater tactile narratives or play. If authored with intentionality and purpose, VFX can become an essential part of any game’s design.
My name is Antonio Gil and I’m a Senior VFX Artist. Previously I have worked at studios like Naughty Dog, Santa Monica Studio, and 343 Industries. Prior to my specialization in VFX, I also worked in a wide array of design-adjacent roles at an indie studio called Fair Play Labs.
Most of my work has revolved around direct gameplay VFX, with a heavy focus on combat and interactable modules. In this article, I’ll be offering a few methods and considerations when addressing VFX with a design-facing mentality. I do want to note that by nature, the art field is not prescriptive in approach, and every videogame has its own contextual needs and goals. This article instead builds from my own familiarity and experience with both game design and game VFX to offer one particular lens with which to analyze design-facing VFX, and I will specifically be citing firsthand examples from my work supporting design through VFX on projects like God of War: Ragnarok and Halo Infinite.
VFX can be understood as a toolkit from which to pull from to achieve game design and artistic goals: effects can visually support design concepts, convey states, confirm actions, and much more. This can be driven by individual visual elements, such as particle emitters/spawners, animated pixel shaders, and particle cards (particles represented by simple four-sided polygons with textures).
As a time-based visual art, VFX also inherits many concepts from other visual disciplines like graphic design and animation. That said, I will be acknowledging a just few elements and principles that I leverage most frequently when communicating design ideas through VFX. These concepts are shape, color, timing, scale, contrast, and diegesis. For foundational knowledge on visual and motion design principles, I would also recommend frameworks like the Elements and Principles of Design, as well as the 12 Principles of Animation as essential subjects for further reading beyond this article.
In the context of game VFX, an effect’s shape can often be amongst the most readily perceivable attributes. Shape and profile can be clear identifiers, allowing players to recognize and associate the certain effects with particular cues. In the context of a sandbox multiplayer First-Person Shooter like Halo Infinite, a VFX’s shape is used help players recognize individual weapons. Weapons in Halo Infinite all exhibit different traits and behaviors, such as damage, firing speed, and projectile properties. As such, muzzle flashes are authored with the intention of being readily identifiable by their different shape profiles. Even with similar color palettes, weapons like the MA40 AR, BR75, and M50 Sidekick all have distinct muzzle flash shapes that make them uniquely identifiable.
From left to right: M50 Sidekick, BR75, and MA40 AR Muzzle Effects
In Halo Infinite, it’s crucial for players to recognize what kind of weapon is firing at them from long distances, even if the weapon itself is too far to be visibly identifiable. This allows players to adjust their moment-to-moment decision-making through the visual feedback of each weapon’s distinct muzzle flash.
Similarly, shape language can also be used to suggest directionality. Muzzle flashes in Halo Infinite have long, forward muzzle breaks to illustrate where an attacking player is firing towards, providing essential information for players in a multiplayer setting.
3rd Person View of the BR75 firing. Note the distinct forward shape when seen from the side.
Shapes can also assist in determining the direction of projectiles or other moving objects. In many FPS games, projectiles have trails to help indicate how they travel through space. Halo Infinite showcases this clearly through the Needler’s slow-moving projectiles and the CQS48 Bulldog’s spread bullet tracers.
The CQS48 Bulldog and Needler both have tracer trails to illustrate projectile movement.
Shapes offer a myriad of expressions beyond these examples, like how radial lines can draw attention to subjects in the center, or how rounded shapes can help illustrate an area. Sometimes a lack of clear shape may be a worthwhile quality to leverage for ambiguous or omnidirectional elements. Complex shapes, although harder to discern at a quick glance, can also be useful to illustrate implied motion and texture. Keeping the nature of the design in mind can help inform the shape of the VFX. When authoring VFX, consider how shapes can underscore direction, area, or any other information for your players.
Just like shape, color can be a key component of an effect’s visual identity. An effect’s color can be among the first properties a player can recognize. Colors are not inherently prescriptive; there is no preordained canon that states that green must represent healing while red must represent damage. Even still, shared color palettes can be used to reinforce mechanic similarities through pattern repetition.
Halo Infinite divides weapon behaviors into 4 primary elemental types: Plasma, Shock, Hardlight, and Kinetic (associated with bullet weapons or physical projectiles). Each of these elemental types exhibit some overarching properties. Kinetic weapons are weak against shields but strong against unshielded targets, while Shock weapons can cause EMP arcing to stun multiple enemies and disable vehicles. Each element signals an association through an overarching elemental color palette. For example, kinetic weaponry is associated with yellowish orange hues, while shock elemental damage leans towards a gradient of pale to deep blues.
All the shock elemental behavior on the Disruptor is unified by its color palette.
God of War: Ragnarok has status ailments that can be inflicted via elemental attacks. Among these are the Bifrost element, whose status effect causes follow up attacks to inflict massive damage, and the Hex element, whose status effect propagates other status ailments inflicted onto the hexed target to surrounding enemies via secondary elemental explosions. Although these two elements are visually identified through purple coloration, they are further distinguished by distinct hues and from unique color accents. Hex element is visually described through magenta with some black secondary accents. Meanwhile, Bifrost instead leans towards blue-ish indigo hues while also making use of chromatic rainbow accents. Both these rainbow color accents and the perceivable difference in reddish tones from indigo to pink help differentiate the Bifrost palette from the Hex element.
The above Einherjar Bifrost attack by Jose Canchola is distinct in palette from the Hex arrows on the right.
Color can serve as an identifier and helps to establish associations properties within a game’s world. Consider if there are any key overarching design elements that could benefit from association or distinction, and if the VFX can assist in separating or unifying them.
VFX can convey ideas or feelings about the nature of the effect’s motion itself through their timing and animation. An effect’s timing can be used to refer to multiple attributes of an effect’s animation. It can refer to the speed at which it plays, how long it lingers, how it eases, or even how it affects secondary elements during its motion. The timing and the properties of designed motion and animation are entire art forms themselves. For the purposes of this article, I’ll focus on a few small aspects of timing and their ties to design.
Fast motion can often imply activity or reactivity. Fast pulses, snappy expansion, sweeping motion can all suggest that the effect is having an immediate, tangible effect on the world. Halo Infinite’s Fusion Coils showcase a few different examples of rapid motion to suggest information regarding the object’s state and an action. Each Fusion Coil is an explosive canister associated with one of Halo Infinite’s elemental types (being Plasma, Shock, Hardlight, and Kinetic). When Fusion Coils take a minor amount of damage, these begin to violently leak before triggering a large explosion. In the case of Kinetic Fusion Coils, these leaks rapidly emit a stream of particles that emulate jets of gas and fire. These reactions suggest that the asset is currently active and volatile through the prominent motion of the leak effects.
The main explosive motion, on the other hand, consists of multiple particle cards that scale over time along a logarithmic curve. By using a logarithmic curve, the particles will quickly grow large in a short period of time and then grow slowly over a longer period. This motion emulates the violent gas expansion and subsequent drag of the smoke. Additionally, the slower, lingering motion after the rapid expansion offers players enough time to register the final size of the fireball.
Explosive Fusion Coils exhibit violent jets before expanding into a volatile fireball.
The timing of an effect’s motion can suggest many different attributes. It can imply that the effect is a single explosive expansion, that the effect is flickering on a timer, or that the effect lingers softly in space. Whether an effect is an impact, a slash, or a poisonous mist, consider the speed at which it animates and evaluate whether this speed is legible for your players.
In a design context, an effect’s scale can be used to help supply information in multitude of different ways. Particle size for example can be used to define an area of influence, and larger particles can be used to make the effect more readable from a distance.
Fusion Coils in Halo Infinite leverage VFX to depict their area of effect. These make use of multiple different particle types, mostly relying on large flashes, fireballs, and smoke to help define the implied damaging area of influence upon detonation.
The size of the Fusion Coil’s explosion particles help approximate the damaging area of effect.
An effect’s size can also be used to improve legibility from a distance. For example, to make Fast Travel Doors more readily identifiable in God of War: Ragnarok, the blue particulates that make up the archway element increase in size if the player is farther away. The distance based scaling on the particulates helps players notice the placement of Fast Travel Doors from afar without being overwhelmingly large up close.
As the player approaches the Fast Travel Door, the particulates get smaller.
It is important to distinguish when to tune an effect’s scale relative to its size on screen versus its absolute size in the world. If the Fast Travel Doors’s particulates always remained the same size regardless of distance, players would lack a significant cue on whether the Fast Travel Door has already been activated, as these particulates would likely be visible at distances where the player is already close enough to identify the door.
Conversely, an effect’s size must also be considered to produce unobtrusive gameplay. For example, Halo Infinite muzzle flashes are authored so that they seldom overlap the player’s crosshair. This prevents a player’s own firing effect from significantly obscuring critical targets.
Most muzzle flashes, like the Mangler’s, are designed to not obstruct the player’s direct aim.
When authoring design facing effects, consider whether the size is essential to underlying a mechanic’s area of influence, and whether the size of an effect can be leveraged to support clarity in players’ decision making.
In visual design, contrast is a design principle that describes the differing properties between separate elements. Visual contrast can occur in many different facets, such as scale, color, shape, and motion. In game VFX, contrast can be leveraged to provide distinct visual complexity between different parts of an effect.
VFX themselves can be used to highlight gameplay relevant mechanics or objects by contrasting the static background. VFX supporting core mechanics should often be unambiguous in all settings. In God of War: Ragnarok, Atreus can block attacks as a core combat mechanic, and his blocking state is represented through VFX with a magical shield. For this reason, Atreus’s shield is tuned to be readily visible in every combat environment, as it is a major component of delineating whether players are in a blocking state.
Atreus’s Shield, regardless of lighting, will always be clearly visible.
Additionally, an effect can contrast the environment to underscore that an interactable module is not a standard piece of environmental geometry. God of War: Ragnarok makes use of structures called Wisp Pillars that continuously spawn Wisp enemies while active. Players are incentivized to prioritize their destruction in combat scenarios. For this reason, Wisp Pillars exude a tall, beacon-like purple glow and smoke that makes them visibly distinct from the surrounding environment. This underlines that these pillars are separate elements from the standard environmental geometry, and helps players identify them as objects of interest.
The Wisp Pillars make use of VFX to distinguish themselves from the static environment.
As mentioned before, the contrast between shape, color, and timing of VFX can allow for a distinguishable visual language to emerge. Using VFX to accentuate systemic contrasts can help in creating a natural recognition between the properties of interactive elements that beckon attention versus the static components of an environment. Consider whether an effect needs to be unambiguously distinct from the environment or other elements to convey an idea.
Certain elements in games, like sound and UI, can be described as diegetic or non-diegetic. Diegetic elements exist within the game world and are a direct part of the narrative fiction, such as characters hearing in-game footsteps. Conversely, non-diagetic elements are implied to exist outside of the direct space of the game’s immersive fiction and are not recognized within the game world, like as button prompts or pause menu sounds.
Game VFX can also be diegetic or non-diagetic. For example, in-universe magic would be considered a diegetic effect, while damage number particles in RPGs would be considered non-diegetic effects. Both diegetic and non-diegetic effects can be leveraged to convey information to the player.
Diegetic effects often express design ideas through a natural narrativized interpretation of both actions and states within the game world. One example is the flammable oil barrels in God of War: Ragnarok. The oil barrels create a flammable spill when broken that can be ignited by the player. Upon breaking, these oil barrels produce a large spray into the air and a stream that pools onto the ground. These individual effects express events by visually narrativizing a set behavior. If these barrels are filled to the brim with oil, would breaking them open cause a violent ejection? Would it cause the oil to spray? Assessments like this help refine the direction with which an effect is expressed as an element of the world.
All the VFX on the Svartalfheim Oil Barrels imply that the fluid exits within the game’s world.
Diegetic properties can facilitate elegant in-world design solutions. One example of this are the sluices in God of War: Ragnarok. Sluices can carry water that the player can freeze and spill to solve puzzles. However, these sluices are often placed above the player, so players need a way to tell whether the sluice has water flowing through it, even if they can’t see the top of the sluice. For this reason, whitewater splashes and steam are visible far above the top of the sluice to support the design’s intent. These effects assist in providing direct player feedback while seamlessly integrating natural elements from the game’s fiction.
The steam and whitewater splashes on the top of the sluice lets the player know where the water is coursing, even when they cannot actively see the water’s surface.
Non-diegetic effects, on the other hand, can be useful to illustrate unambiguous concepts that don’t need to exist within the game’s fiction but can still be important to players. An example of this in God of War: Ragnarok is the parry timing effect authored by James Adkins. This effect, represented by a growing yellow circle on an attacking enemy, informs the player on the parry timing of a particular attack. This circle does not exist within the game’s fiction, and instead exists for the sole purpose of having a consistent, legible element that can inform the players on the parry timing of any enemy.
The parry timing effect on the enemy, created by James Adkins, is not implied to physically exist within the game world in the same way that Atreus’s shield does, but it still supplies essential information for the player to properly respond to gameplay.
Non-diegetic effects aren’t exclusively utilitarian and can still share stylistic trappings with the game’s overall art direction. A game’s suite of effects doesn’t need to be exclusively diegetic or non-diegetic, and context and artistic goals should be evaluated to determine whether a specific effect can benefit from being diegetic, non-diegetic, or even a mix of both. Consider whether design information would be best conveyed as part of an in-world concept or as a component that is there specifically for the player’s eyes.
Design-facing VFX offer artists and designers several ways to impart information through shape, color, timing, size, contrast, and diegesis. VFX in design contexts are seldom prescriptive in approach, and artists must consider the artistic goals, design context, and overall mission of the project. Beyond the pragmatism of design, VFX are also artistically expressive in nature, and can display spectacular visuals that can accentuate emotion. Design-facing VFX don’t exist solely as cordoned instructional guides to players either: any effect can just as well enrich the world with artistic finesse while offering clarity or instruction. Game VFX extend far outside the toolkit I’ve shared here, and can encompass worlds worth of exploration for anyone with a curiosity for visual art, motion, and the player experience. As mentioned before, VFX are seldom prescriptive, so it is up to you to discover what works best for you.
You May Also Like
