The best part of being a solo game developer is that you have full control over every aspect of your game. And the worst part of being a solo game developer is that you are responsible for every aspect of your game.

As a solo game developer myself, I often rely on assets from the Unreal Marketplace or websites like Mixamo, SketchFab, and CGTrader. You can get some great assets for free and many more if you pay.

After many months of accumulating Epic’s free assets and occasionally buying something, your Vault will start to look like this. Overwhelming, but very convenient!

But sometimes, you can’t find what you need at all, can’t afford it, or need to change it a bit to suit your needs. And that’s when you have to improvise like a pro – or as I like to call it, imPROvise! I’m a programmer first and foremost, but since I started working on my current project I’ve had to edit 3D models, animations, materials, textures, sounds… Thankfully, I enjoy all of those things and it’s been great to learn more about them, despite it being a bit overwhelming at times. And by practicing them, I’ve become better at collaborating and communicating with my friends and colleagues who actually do those things professionally. And who knows, maybe one day I could switch to one of those roles. They all seem like jobs I would enjoy. I wish I had enough time for all of them…

A few months ago, I added a Bomb Blueprint to my project. It was easy enough to find a good 3D model of a bomb, but I wanted my bomb to have an animated fuze that got shorter with time. A small detail that some players won’t even notice, but attention to detail is something that adds up in games, and can really impact their immersion. The asset didn’t come with any animations, so I had to resort to some clever material tricks! But before I talk about those tricks, I’d like to go through the basic structure of this blueprint.

My bomb Blueprint is actually called BashableBomb, since it supports the Bash ability I showed in a previous post.

In addition to the Static Mesh, it contains two SceneComponents and one ActorComponent (to those who are unfamiliar with Unreal: a SceneComponent has a transform and can be attached to other components, unlike an ActorComponent):

  • BashableSphereComponent – represented by the red outline – It lets you use my Bash ability on this object from within that radius;
  • SparkEmitter (ParticleSystemComponent), a pretty self-explanatory particle emitter. I probably should rename it to FireEmitter, though, since that’s the most noticeable part of the effect;
  • HealthComponent: A component I created which keeps track of an Actor’s health and dispatches an event when it reaches zero.

But now let’s get to the material goodness I promised! This mesh uses two materials. One called “Metal1” (the main black part of the bomb), and another called “Fuze”. Originally, they shared the 4 textures below, but I ended up using only Base Color for the Fuze and removing the Normal Map from Metal1, which gave the bomb a simpler, cartoonier look.

Base Color
Metallic
Roughness
Normal

But let’s focus on the Fuze material now. As I said earlier, I want the fuze to get shorter as the bomb gets closer to exploding. I can do that by setting its opacity (which requires changing the Blend Mode to translucent), gradually making it transparent, from the top of the fuze to its bottom (or right to left in the texture itself, which isn’t obvious by looking at it, but became apparent as I worked on the material). I’m gonna start by showing the finished material, and then I’ll break it down by nodes, using lots of images and videos. Sorry, mobile users, but I recommend using a desktop browser for this post!

Before you continue reading, here’s a fun suggestion: Take a minute to analyze this image and see how much of it makes sense to you.

Lerp (Linear Interpolation)

A Lerp returns a value between A and B, based on the value of an Alpha parameter (which is usually between 0 and 1). An Alpha of 0 results in A, an Alpha of 1 results in B, and so on. In the case of our Fuze material, it’ll take our Progress parameter (which I’ll update on every Tick) and convert it to a value between 0.5 and 0.2. Those last two values represent the visible length of the fuze along the texture’s horizontal axis.


Linear Gradient

A Linear Gradient returns two single-channel square textures. UGradient contains a horizontal gradient, and VGradient contains a vertical gradient. We’re only going to use the horizontal one for our Fuze. Its values change from 0 to 1 as you go from its left edge to its right edge. We’re gonna use that to our advantage in the next step.


Subtract

You can use this node to subtract entire textures from each other. In this case, I want to subtract the result of our Lerp from each pixel of our UGradient. Since the initial result of our Lerp if 0.5, this subtraction will cause the gradient to shift half of its width to the right. As the Lerp’s result goes down to 0.3, the gradient will gradually move back to the left, as you can see in the two short videos below.

Plane PreviewMesh Preview
In order to record these videos, I temporarily replaced the Progress parameter with a DebugTimeSine, a really useful node for testing, whose value changes from 0 to 1 based on the sine of the current time (plus 1, divided by 2). Looking at them now, I probably should’ve synchronized the two videos. 😬

Sign

This one’s pretty simple. It’ll convert each pixel with a positive value to 1, negative values to -1, while keeping 0 values as 0. Since -1 in this context is the same as 0, this will make the texture transition from black to white without any in-between values.

Plane PreviewMesh Preview
You can already have a pretty good idea of how the effect is going to look. But it would be better for what we are trying to accomplish if we inverted the colors.

Multiply

Another very straightforward node. It’ll multiply each pixel by a specified value, which is -1 in this case. Now the part of the fuze that should be visible is white, and the part that has already been burnt is black, which is exactly what we need for the material’s Alpha channel.

Plane PreviewMesh Preview
Alright, now this is looking more like it!

Wait a minute… Where did that white circle at the top of our fuze come from? That was already there before, actually. I was just hiding it with clever camera angles so I could talk about it now. 😬 Ideally, that white circle should move down, following the unburnt part of the fuze, but that would require using 3D animation software, which is what we were trying to avoid in the first place. Instead, we’re just gonna make it always invisible, since the hole will be covered by particles later, anyway. I edited the texture in Clip Studio Paint, making the top of the fuze transparent, as you can see in the screenshot to the right. The next node will take advantage of that.


Min

Returns a new texture consisting of the minimal values of A and B. Using our edited texture’s alpha channel as one input and our multiplied texture from the previous step as the other, the result is ready to be used as our material’s Opacity.

Plane PreviewMesh Preview
Almost ready. Just one step left!

Main Material Node

And that’s it! The Texture Sample’s RGB channel will supply the Base Color, while the result of our Min node determines the opacity. Don’t forget that in order for the Opacity input parameter to be usable, you must first set your material’s Blend Mode to Translucent.

Plane ResultMesh Result
That hole at the top of the fuze looks really weird now, but once we cover it with some fire particles you won’t even remember it’s there!

As for the Metal1 material, there’s only one thing I’d like to add. When the bomb is close to exploding, I want it to glow red as a warning. Glow effects are super easy to do in Unreal. You just need to set one or more of your RGB values to a number greater than 1. The higher the number, the brighter the light that it’ll shine.

I won’t be breaking this material down by node like the previous one, since it’s a lot more intuitive. It uses the same Progress parameter, but once it reaches 0.9, it’ll start to change the material’s Emissive Color to 999, 0, 0 (a.k.a. RED AS HECK :v). I didn’t have the Power(X, 5) node at first, but adding it made the effect a lot juicier, with a slow start and a healthy amount of acceleration.

I moved the other Texture Sample nodes away for this screenshot since they have nothing to do with our red glow effect.
Pretty easy, right? It doesn’t explode yet, but we’ll take care of that soon.

Now that both materials are out of the way, it’s PARTICLE TIME! We need a fire particle for the fuze, as well as a nice explosion. I used “Par_TorchFire_01” and “Par_Meteora_Explode_01” from Luo’s Particle Toolkit Vol. 1, which I got for free thanks to Epic some time ago!

We can simply spawn an Explosion class – with an explosion emitter – at the center of the bomb after a certain amount of time has passed, and then destroy the bomb, which is pretty simple, but what about the fire particle that we want to use on the fuze? We have to make it follow the top of the fuze as it gets shorter. But we would need an animated socket for that, unless…

Unless we added multiple sockets and interpolated between them!

Wireframe mode really helped me place these 9 sockets precisely. They are spaced pretty consistently, which is very important for what we are trying to do. WordPress’ video compression isn’t helping much here, but you can still kinda see them.
This function is used to determine where our fire emitter should be based on the current Progress. Since we have 9 sockets (from 0 to 8), we will multiply our Progress by 8. That number’s floor will be the index of our current socket. The fraction, which in this context means x – floor(x), will be used to interpolate between the positions of the current and next socket (unless there isn’t a next socket, in which case we just use the current one).

Here’s the result, showcased in a beautiful Watermill environment, which was also free a while ago! #ThanksEpic

From up close
From a distance

Now let’s talk about Collisions. I would like the bomb to be able to roll around smoothly and be pushed gently by the player, but also explode on contact when hit by a great force. Most of the time, I use Unreal’s Convex Decomposition feature to generate collision meshes, but this time I created one manually, since I knew exactly what I wanted. As you can see below, I added a collision sphere at the bomb’s center to make it roll smoothly, and a capsule near the extruded top part to stop the bomb from rolling over it.

Wireframe View with collisions visible in green
Player Collision View (the sphere looks a bit polygonal in this preview, but it’s actually super smooth in-game)

Sweet! Now, in order to make the bomb explode when it gets hit, we can use Unreal’s Hit Event, and compare the length of the Normal Impulse to a minimum expected value for exploding.

I also used an AnyDamage event with my HealthComponent so that the bomb can take damage (from other explosions, for example) and then explode when its health reaches zero.

Now let’s test it out! Our character should be able to push the bomb and make it roll around smoothly without exploding, but if it got crushed by a giant anvil, it should definitely explode.

I really meant what I said.

The last thing I would like to talk about is my Explosion system. As I briefly mentioned earlier, I spawn an explosion class when a bomb’s timer runs out. In addition to emitting a super cool explosion, that class also needs to apply damage to nearby objects. The easiest way to do that would be by using the Apply Radial Damage with Falloff node. It’s very customizable, with Inner and Outer radiuses, as well as damage values for each of them. However, it applies damage to every object within its reach at the same time, so if you had a line of multiple bombs and shot the first one, they would all explode simultaneously, instead of one by one in a chain reaction.

Which is why I made my own similar solution, with the addition of a Sphere Collision that keeps growing based on a Timeline, and damage only being applied when the ActorBeginOverlap event is invoked.

In our BeginPlay Event, we start playing the Timeline that will update our collision sphere’s radius, spawn the explosion particle (which you’ve already seen), destroy the bomb after a delay (when it’s totally covered by the explosion), and spawn a sound.
In our ActorBeginOverlap event, we ensure that the Other actor contains a HealthComponent, and then apply damage to it based on how far it is. And that’s all the code in this class!

Now here’s our chain reaction:

What was your reaction to this chain reaction? :v

And that’s it! There are some small things from the BashableBomb Blueprint that I didn’t think were worth covering, but if you’d like to check out the full EventGraph, I’ve shared the whole thing on BlueprintUE.com, so feel free to click here. It’s a pretty cool tool for sharing Blueprints easily, even if it messes up their alignment a little bit. Can you find an unused special effect in the EventGraph I shared? 👀 It’s something inspired by Bomberman, and even though I did get it to work, I ended up disabling it with a toggle, since it was affecting the gameplay in odd ways and looked a bit out of place.

I hope you had a blast reading this post! It’s been on my mind for a long time, but writing such a technical post took longer than I expected. I’m very happy with how it turned out, but please let me know what you thought of it! I’ll try to alternate between my usual showcase posts and more technical posts like this one.

My life has also been pretty busy, with a few big changes, but I’ve been keeping my goal of getting something done in Unreal every day. Since the time I showed you my 3D Bash mechanic, I’ve added tons of animations, sounds and a bunch of other improvements to my project, and I’m currently working on some parkour interactions. After those, I’ll probably add some cool weapons, and then some enemies with AI.

Look, mom! I’m in the Unreal Engine credits!

By the way, Epic has updated the Unreal Engine credits for version 4.24, and I’m mentioned as a Community Developer! I am so honored to be a part of this engine and have my username featured in the credits for everyone to see! And it’s one of the first names, too! I made a small contribution to version 4.23 (I fixed 13 typos in the Editor, because I’m obsessed with grammar), which got accepted earlier this year. A small beginning, but it’s insane to think that a few lines of code with my name attached to them are now part of this engine used by so many studios around the world, who are creating all sorts of fantastic things! And I also have a small list of other, more substantial, pull requests I’d like to submit in the future. Maybe I could even talk about some of them here, once I actually implement them.

I hope you guys are having Epic holidays and wish you an Unreal new year!

Join the Conversation

2 Comments

  1. I’ll outright admit that the amount of time that I took to actually finish reading this article is criminally long, so very sorry for that. 😛

    What’s not to love about this? There’s tons of implementation discussed with passionate attention to detail, there’s some great neat tricks explained, there’s lots of puns and jokes because it would not be an Agent Ottsel article without them… :V

    But I’ll go on a tangent and say I’m impressed with how well a literal cartoon bomb meshes with those lush and realistic backdrops. That’s some impressive texture and shader work you got there.

    Also, I’m not sure if you missed discussing that displacement that the bomb causes when it explodes or if that’s left as an exercise for the reader. ;D Either way, I love this and while I do know by experience how much work goes into an article like this, I hope to see more coming up. Your feed is definitely a welcome addition to my RSS Reader. 😀

    Liked by 1 person

    1. Thank you so much for reading and being a follower, Guedes-san! I’m glad you enjoyed my post!
      As for the cartoony bomb meshing well with the lush environments, I have UE4’s fantastic lighting to thank for that! 👀

      This time the displacement effect came with the particle that I imported, but I did create a similar refractor effect that I use with Bash – the main difference is that this one looks more distorted and chaotic, which is fitting for an explosion, whereas mine favors visibility, so I went for a glass-like look. I think I’ll probably talk about it here at some point! 😀 You should check out Luos’ channel, he’s the author of the particle pack I used: https://www.youtube.com/user/vladderbeest

      Like

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: