Halo-Style Bubble Shield

Overview

I’ve always loved the visual aesthetic of the Halo series. It might be nostalgia, but the bright, gaudy colors and the larger-than-life stylized visual effects have always been so much fun to play around with. It was only a matter of time before I had a go at making one myself.

In this multi-part tutorial series we are going to dive into the process of creating a fully functional Halo-inspired Bubble Shield using Unreal Engine 5. We’re going to have a look at the creation of the source assets, how they can be implemented into a new Unreal project, and how they can all be tied together using Blueprint.

The Halo 3 Bubble Shield

When starting any project, thorough research in collecting both visual and technical reference is always important. It will inform your design and inspire you to try things in different contexts to get the best possible result.

That said, it probably goes without saying that the best reference for our purposes is going to be from the game itself; the third (and in my opinion, best) entry in the Halo series.

Luckily for us, it’s been rereleased on PC as part of the Master Chief Collection and the game has been recently updated with some extensive replay features that let us record everything we need.

It is my hope that by picking out what we love from the original Bubble Shield and creating our own in the same spirit, you’ll be able to use this effect freely in your own projects without unfair comparison to an existing property.

The Starry Night Trailer

Special mention should also be given to the Bubble Shield effect from the Halo 3: Starry Night trailer, which was released back in 2006. It’s a little different to the one we see in game, but it’s so cool. I particularly love the sound design, and I hope ours can have a little of that same energy.

Unpacking the effect

With these two videos as our primary reference, let’s have a straight-ahead run at extracting each part of this effect into a list of assets that we can create.

The Bubble

The Bubble itself is a spherical mesh with a hexagonal pattern texture applied (I am assuming it’s a texture and not geometry-based because there is considerable UV distortion in places as the sphere curves around). The Bubble’s material refracts light based on the same texture input, and an emissive fresnel glow has been applied.

When the Bubble is spawned into the world it will play an expanding animation as it quickly grows to its full size. Interestingly, in the original Halo 3 this growing Bubble is purely aesthetic. A second Bubble, static and with collision, quickly fades in at the end of the expansion animation to replace the first. I can only speculate but I assume this is because rapidly expanding collision meshes might have caused a lot of issues with other objects in the environment. We may never know!

Functionally, the Bubble is parented to a central shield projector. It will translate with its base, but its rotation is locked to whatever orientation it had when it was initially created.

It also, naturally, has selective collision: Blocking grenades and gunfire but not characters.

To create our Bubble we’ll need:

1. Hexagonal Sphere mesh with accompanying textures (at the very least a refraction mask and normal map).
2. Forcefield material, including light refraction and a tinted glowing fresnel.
3. Some animations and means to control them:
   1. Deploy (quickly expanding)
   2. Idle (a slow pulse)
   3. Collapse (fade out)

The Shield Projector

The central object that generates the shield, or what I call the Projector, is a textured asset with a simple looping idle animation. It also has a closed, deactivated version that serves for the equipment pickup.

When deployed the Projector will spawn in front of the player (irrespective of look pitch) with a velocity that makes it softly arc to land on the ground. About 1 second later the Bubble will spawn and expand. Easy stuff.

When deploying, the projector has two particle emitters. The first will fire a bunch of soft half-moon shaped particles, which gives the impression of a wave of energy bursting from the device that will solidify to create the shield. The second emitter creates long spark-like particles that disappear very quickly.

When the Projector is active it has an emitter attached to its spinning top section that radiates magical bubble energy particles. When damaged, or if it finishes its cycle of 30 seconds, the projector will explode into a small fireball.

To create our Shield Projector we’ll need:

1. A rigged and animated Projector mesh with associated textures (we may or may not spend a lot of time on this one).
2. A solution for recreating the energy waves emanating from the shield generator. We could use particle emitters for this but I’d like to try a volumetric solution first.
3. A series of animations:
   1. Activate
   2. Idle
   3. Deactivate
   4. Explode

Stretch Goals

Audio

The Halo series has always had amazing sound design and I could talk forever about why I love the decisions the team made and why it’s so deserving of recognition, but I’ll leave the gushing for another time.

The sound effects for the Bubble Shield are rather simple. You can listen to them here if you’re interested in hearing them in isolation. There is a pickup, a deployment, an idle, and a destruction sound. Interestingly, the idle audio from the Bubble shield can only be heard from the inside.

In the later parts of this series I would really like to explore the use of audio filters to create the feeling that the Bubble Shield is an isolated pocket of protection through the use of sound.

Interface

I’d also be keen to explore the creation of a custom interface for the pickup and deployment of the Bubble Shield, so it becomes a little more practical in an actual game. Something you can drag and drop into your project and play around with.