Since November of 2019, Nick Amlag and I formed a video game studio and shipped Breakpoint, a twin-stick action game with exploding melee weapons. It released pretty recently, so go check it out!
For those unfamiliar with Breakpoint, a core mechanic of the game is managing your weapon’s durability. The amount of durability remaining is indicated by the circle around the player. Hitting enemies with your weapon depletes its durability, and when all of it is gone the weapon breaks, unleashing a large explosion. The size of the explosion depends on the level of your weapon when it breaks.
Since it’s such a central mechanic, a lot of intentional design went into creating the explosions. Not only will I show how we make that explosion look awesome, but I’ll also discuss how the visuals contribute to readability of the game mechanics.
Particles
Let’s start with the particle effects that make up the game-space representation of the explosion. These are the effects that show up in the arena. Note that they’ve been slowed down to 50% speed to better show off what’s happening. (Well, sorta. It’s complicated. We’ll get to that in a bit.)
Inner circle
The inner circle is, perhaps, the most important part of the explosion effect. It serves a very specific purpose: to show the player how large the damage zone of the blast is.
The damage zone is visualized below as a green circle to show just how closely it matches up with the effect:
(One note for any of you framedata junkies out there: the area of the damage zone visualized here is accurate, but the timing is not.)
Outer circle
The outer circle has a very similar purpose. Instead of showing the damage zone, it shows the knockback zone, which is much larger:
Distortion
The effect of the distortion alone, when laid against the arena, is sort of subtle, so I’ve added some extra objects to show the distortion’s effect.
The distortion adds a lot of punch to the explosion. It makes it look like the explosion is so strong that it’s causing a shockwave of force through the arena, which emphasizes that enemies are being knocked back. It closely follows the outer ring to reinforce the knockback area:
At higher explosion tiers, the strength of the distortion goes up. However, we wanted to make sure it didn’t overwhelm the rest of the effects, so it only goes up slightly.
Speed Lines
These “speed lines” linger a lot longer than the other effects here, and are a purely visual element to help sell impact. I sort of think of them like the anime/manga trope of lines coming out of the edge of the frame, often used when something awesome happens:
White Pulse
Nothing special here, just a bright pulse to indicate light emanating from the source of the explosion.
Stars
These “stars” only appear in level 2 and 3 explosions. Shown are the level 2, followed by the level 3 stars. This effect is solely intended to help show that the explosion is stronger at higher levels.
Sparks
This “sparkler” effect only appears in the level 3 explosion. Since the L3 explosion so huge, we wanted to really show the player that it hits a big area, and this is done by simply covering the entire area in small pulses of light.
Enemy death
Although the enemy death particles are not actually part of the explosion, practically, they play a huge role since you’re always catching at least a few enemies in each explosion.
There’s a lot to dig into just in the enemy deaths, so I won’t go over them in huge detail. See if you can pinpoint each of the component parts yourself in the above video! The big thing to call out here is that the death particles orient themselves away from the explosion. The “shatter” and “burst” lines in particular help show where the explosion originated. In the above video, you can tell where the enemies are relative to the damage point even though the other explosion effects are not present.
That’s it for the particle effects involved in the explosion. Let’s move on to the pieces of the explosion effect that aren’t part of the explosion itself. Note that I’ve removed camera shake in most of these videos to make the other effects clearer.
Camera zoom
At the start of any explosion, the camera zooms out, then zooms back in at the end. Here’s a video comparing the level two explosion with and without the camera zoom:
For the level three explosion, this is necessary; the radius is so large that the camera, at default size, cannot capture the entire radius of the explosion.
For the level 1 and 2 explosions, the explanation is a bit muddier. The zoom-out does help to add a bit of drama, but originally the camera would actually zoom in on the level 1 and 2 explosions, not outward. Imagine a dramatic zoom on someone’s face in a movie during a tense moment; that’s the kind of feeling we wanted to evoke.
However, we ran into an interesting issue: The player death animation also zooms the camera in. Often, players would get confused for a split second - did I die or did the weapon explode? - which is really undesirable for a fast action game. We felt that zooming in during death was more important than during an explosion (it is more dramatic when you take a hit, after all), and so we made all explosions zoom the camera out instead. It’s good enough to add a bit of punch even if it’s not quite as good as zooming in.
Time slow
Explosions are, in fact, very fast in real-time. When in-game, exploding a weapon makes you enter bullet time for a short duration, slowing down time until the explosion is complete. Here is a comparison of the level 2 explosion with bullet time and without:
Honestly, when implementing the bullet time initially, all I really wanted to do was make the explosion feel really awesome, like a scene out of a movie. However, it also ended up serving an important function: it allows the player to have a second to read the battlefield.
At very high difficulty levels in Breakpoint, you’re getting swarmed from all sides, and sometimes you just need a moment to breathe. The slowdown gives you that split second necessary to be able to read the field, strategize, and prepare to execute your next move.
Post-processing
Post-processing refers to effects like bloom (making bright objects glow) or chromatic aberration (separating the colors of objects). Bloom and chromatic aberration are the two full-screen effects we apply with the explosions.
Some amount of post-processing is always applied in Breakpoint (unless you turn off “Visual Effects” in the settings). However, explosions kick up the amount of post-processing applied. Here’s just the post-processing kick that occurs for each of the explosions with some objects present, but without the explosions themselves:
In case you’re having trouble picking out exactly what the post-processing does, here’s a video of the post-processing effects in isolation for an in-progress explosion:
Just like so many of the previous effects, applying these post-processing kicks helps with the explosion’s impact as a whole. The bloom lights up the area like an explosion would, and the chromatic aberration gives off the impression that you’re sort of shell-shocked.
However, the more important thing it’s for is to really emphasize the impact of the level 2 or 3 explosion vs their lesser counterparts. The L2 explosion kicks both the bloom and the chromatic aberration to 2x what it is in the L1 explosion. The L3 explosion kicks the bloom up 3x, and the chromatic aberration 5x of that in the L1 explosion.
For those who are familiar with Unity, an interesting tidbit: if you adjust the post-processing intensity through an animation or through script, you can bypass the limits the default sliders impose upon you. That’s the only way we were able to blow the chromatic aberration out this far.
Camera Shake and Rumble
To emphasize that there’s been an impact, we shake the camera a little bit. Here’s the level 1 explosion with and without camera shake:
As you can see, it adds a lot! Note that many of the previous videos had no camera shake because it can make it harder to see the other effects.
And for completeness: if you’re using the controller, we apply rumble to it to give you that haptic feedback.
Some closing thoughts
There are, of course, things that we didn’t do, or things that we originally did but had to leave behind as part of the refinement process. There’s actually a graveyard of disabled effects that are present within our explosions:
The problem was the same for all of these particles: in combination, they were too much. In particular, the bloom post-processing effect was glowing the particles to an unmanageable degree, washing the entire arena in white.
The most important thing that the explosions needed to do was make the player feel safe. There were many aspects to this; from making the explosion not obscure too much of the screen, to continually adjusting and tweaking the knockback values, we needed to make absolute sure that the player could trust that the explosion served its intended purpose.
That meant making the explosion look cool was actually a secondary objective, not the primary one. Balancing these two objectives was the biggest challenge we faced while creating Breakpoint. We think we did a decent job, but let us know if you think otherwise!