Image via PlayStation.
Introduction
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.
The Tools in Your Kit: Design Elements to Leverage
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.
SHAPE
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
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.
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.
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.
COLOR
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.
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.
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.
TIMING
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.
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.
SCALE
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.
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.
As the player approaches the Fast Travel Door, the particulates get smaller.
