Original subtitles

Our damaged system is working now, but it is really hard to tell if we actually hit somebody.

So we want to implement a material flash if we hit an enemy.

I would love to show you some examples of the many games that use this, but I don't think I can share

gameplay footage on this site due to copyright reasons.

I'll attach a YouTube video to this lecture where I show off some examples and also go into more detail,

so please feel free to check it out.

Like I said last time.

One approach to make it readable that we hit an enemy would be a hit animation or a hurt animation.

And if we look at the paper assets for the player, the player, we actually have a hurt animation.

Where is it?

This one.

Right?

So we actually have a special animation for being hurt.

And this is good for readability because it easily tells us that we took damage.

However, in many cases for enemies you won't have hurt animations because the artist didn't go through

the trouble of making them for each enemy.

Because it's a lot of work, and the material flesh we implement now is a good substitution for that,

but it can also be used together with a hurt animation.

And to achieve a material flash, we first need to find the material that our characters are using.

So in the DBP action char base, if we look at the sprite, we can see we have the masked lit sprite

material.

And this is a material that we didn't create ourself.

This actually came with paper 2D.

And we can click on the folder icon to show us this right.

You can see we have the mask sprite material.

And you can see that this is a material instance.

And it is based on the default lit sprite material.

Right.

So this is the parent.

And this is kind of similar to how we have parents and children with the blueprints.

But it is materials and material instances here.

And now we are using the lit version.

But later on we're going to use the default sprite material, which is the unlit version as well.

So we actually want to copy both of these.

We actually don't want to apply any changes to the material right here, because this material is shared

between all of your Unreal Engine 5.3 projects.

We just want to make a copy of these so we can scroll all the way up to content.

And we have a materials folder already so we can get the default lid spread material, hold control

and click the other one.

And we can just drag to the materials folder.

And we want to very importantly not move here copy here.

And now we can go in here.

And now you can see we have a copy of these.

Both the thumbnail was a bit weird, but after you wait a while it shows up correctly.

Let's change the names now.

So the default lit sprite material.

I just want to hit F2 to rename it and just call it M underscore custom lit sprite material.

And the other one I want to rename two.

M underscore custom unlit sprite material.

And we're going to start our implementation in the custom lit sprite material.

So double click to open it up.

And you're going to see a lot of nodes in here.

And we're not going to go too much into detail on all of the different things you can do in a material.

We're going to keep it pretty simple.

But you have an output node here, right?

And you can see the base color is going to be the source texture.

And we have an opacity mask.

We have normal maps and all these kind of things in here.

But what we want to do is change something in the emissive color because we want to flash the material.

So we only want to change the image of color.

We don't have to worry about all of the other things here.

The first thing we need here is a color, because we want to give a color to the emissive color.

And the way we can create a new color is by holding four on the keyboard, the four key and left clicking.

And this gives us a vector for which in this case is treated as a color.

And we can then just click this.

And here on the left side under constant you can open it up.

And this gives us a lot of colors here that we can use.

And I'm just going to go like in the yellow somewhere here.

Kind of orangey.

And click okay.

And you can see that it changes now.

And we can then simply use this and put it into the emissive color.

And now you can see the sprite on the left side.

Here it is lighting up.

And for now, let's just apply this to the character and see what it looks like.

So we can go to the action chart base on the sprite.

We're just going to use our M custom.

Lit sprite material, right.

And we need to compile and save.

And actually in the material itself we also need to apply.

And safe, otherwise it's not going to show up.

And then you can see the action jar.

Now it's just flashing all the time, but we only want it to flash once and then go back to the regular

color.

And back in the material.

The best way of doing this is to multiply the color.

I multiply.

Sorry, I mistyped multiply the color by a scalar.

So we could just multiply this by zero and then connect this instead.

And now it's just going to be completely ignored.

So this is nice because it lets us turn it on and off very easily just by using a number.

And we can actually make it shine even more.

We can go like 40 maybe, and it's going to shine even stronger than it did before with one.

So this gives us a lot of control.

But instead of just writing it here, I want to have a parameter so I can just hold a one, the one

key and left click and get a constant like this and just connect it here.

And the default can just stay at zero.

But this lets us now control what we put in here.

And we want to be able to change this dynamically.

So we want to right click this and convert to parameter.

Converting something to a parameter lets us easily change it in the material instances, and we can

also override it during runtime from the blueprint.

So this is very useful.

I'm just going to call this flash multiplier.

Like this.

And we also can change the color because sometimes you have other effects you want to show differently.

So maybe if you have a poison effect only that should be in green.

And if you have a fire effect, maybe that in red.

So it just gives us more versatility.

So just right click this and also convert to parameter.

And I'm just going to call it flash color.

And these names are actually very important because we're going to use them later.

So we have to remember them.

Or we can just come back to look them up again.

And just like with blueprints, we can collapse this because now, like somebody might look at this

and like, what is this flash color and flash multiplier?

They have to like think about it for a second.

We can just convert.

No sorry.

We can just collapse nodes and just call it.

Flash effect.

And this just makes it very clear what is happening here.

And we can just drag it somewhere here.

Right.

And then we can open it up again and just look into what we have here.

But we finished it.

We don't have to worry about it again.

And now it's just cleaner.

What we do want to do though is just copy the splash effect control C, and we also have to add this

to our custom unlit sprite, because later on we're going to use this one as well.

But the problem here is control V first that the emissive color is already being used by the texture.

And like I said before, because an unlit sprite will kind of create its own emissive ness, its own

shine, to not rely on light sources.

But what we can do here now is that we just add this drag off and add.

Here.

Connect this.

So now it's just going to take the original emissive color and add to it the flash effect that we want

to have, and use that as the new color.

I can also just apply this and save.

And we now want to well, we can just close all of this down first close tabs to the right.

Yes.

Apply materials.

And now yeah we have the default value of zero.

So it's not shining.

But we also want to create our material instances.

As you've seen we could just use the material in the character right away.

But a material instance is just more versatile and it's also more optimized behind the scenes.

So it's always a good practice to create material instances.

Start with the custom unlit sprite and create material instance, and we can just keep everything the

same.

Just remove the inset at the end and I want to call me so my custom unlit sprite material and do the

same for the custom lit sprite material here, create a material instance again.

Again, just delete the instance suffix and add the me prefix.

So my custom lit sprite material, my custom unlit sprite material.

And again this is for our 2d 3D hybrid games.

And this is for our 2D only games, which we're going to switch into later.

Now in the action chart, we want to use this material instance instead of this material that we have

been using.

So blueprints.

Characters.

Action.

Char.

Base.

On the sprite.

We just look for me.

Underscore custom.

Custom lit sprite material.

And yeah, the naming can be confusing, but this is the convention.

Lit means that it can receive lighting.

So again 2d 3d hybrid.

We want to have the Me custom lit sprite material and we can compile and save.

And yeah you can see like right now nothing really changed.

It still looks the same.

We can receive the shadows.

Everything is fine.

I shoot him and still nothing happens.

Because now we need to actually tell the material from the blueprints which multiply we want to use

when in the BP action chart, because we also want to use this for the player later.

Maybe.

We then need to get a reference to the material, and it's not like we can just drag this out here.

This doesn't work.

We need to go to Beginplay and we drag out the sprite because the material is on the sprite.

And here we want to dynamic create dynamic material instance like this.

And the element index is very important.

On the sprite you can see we have element zero for the materials.

So we need to match this number.

And this one only has one material.

So there's no problem.

But sometimes we have models or for sprites usually not.

But for models that could have multiple materials.

The rest we don't have to fill out.

We don't care what source material, option name.

We don't care about this.

We just want to get a dynamic material instance here.

And this is what the return value is.

So this isn't just a material, but it also prepares the material for us in a way that we can affect

it dynamically.

And here I just want to drag this off and promote to variable.

And I'm just going to call this dynamic sprite mat for dynamic sprite material.

Right.

So on Beginplay, when the character is spawned, we just save this here.

And then later in the blueprint, anywhere we can just do whatever we want to do.

So for example, just for testing after the beginplay, we could just get the dynamic material instance.

And here we can just set scaler sorry set scalar parameter value.

And like we have before.

Let's just open up the material again and.

Under materials and the custom lit sprite material.

The mi instance is fine too.

And by the way, this is what an instance looks like.

And we have the parent reference here, right?

And in an instance we could just have this flash multiplier and just set it to four for example here.

And you can see how it changes uh directly.

And actually if I just drag this off to the side and have the game open, you can see that this changes

in real time.

If I change something here, you can see every character or every sprite that is using this material

changes in real time.

And now all we want to do is tap into this from the blueprint.

So we don't do this manually here, but through the game logic.

But you can just drag this back here and just set this back to the default value, because we're going

to change this from the blueprint.

But here we can see the name, right?

We have this flash multiplier name that we set up before.

And we want to use this here for the parameter name.

So just type in flash multiplier.

And here you have to be very careful that you don't have typos or it's just not going to work.

And we can just connect this here right.

And I'm just going to set this to ten.

It doesn't really matter.

It's just a demonstration.

And you can see now the character is normal.

It's not lighting up.

And I press play because begin play is going to trigger right action char bass begin play triggers when

I start the game.

And we're going to set the flash multiplier to ten.

And this is just to show you how we can use a dynamic sprite material.

We can just take this now um control X to cut it out.

And we can just make a custom event here.

Just custom event.

And this could also be a function.

This could be a custom event.

Both are kind of the same thing in this case.

And just call trigger flash just like this.

And now we can just Ctrl v and paste in this set scalar parameter value here.

But the reason we want to use a custom event here is that in a function, we cannot have a timeline,

but we want to use a timeline later to make the flash fade out slowly.

And this is why we're using a custom event instead of a function.

And here we can now also set the color.

So again copy paste the dynamic sprite mat.

But this is actually not a scalar parameter.

If we look here it's a vector parameter the flash color.

Right.

So we can set vector parameter value.

Yeah this one and go here.

And the parameter name.

Again we want to get this flash color.

So flash color and we can set any color here that we want to set, but we don't want to hard code this

and this.

We just want to expose this to the custom event, the function.

So we can just drag this in here.

And it's going to create an input pin.

And the same for this one.

We can just drag it in here and it's going to create an input pin.

Um I want to change this.

Make some reroute nodes with double clicks to make this better.

Like this.

Better visible.

And I also want to change the name here.

Right.

So here I want the flash multiplier.

And here I want to have the flash color.

So again, this just does the same thing we had before.

But now I can just call this trigger flash.

Right.

So again just on Beginplay to demonstrate I can just have the maybe have a short delay, sorry, have

a short delay and then trigger flash.

And I didn't compile, so the names are corrupted.

You can just delete this compile save.

And now again trigger flash.

And now it's working right.

We have the flash multiplier.

Let's just set it to one.

And we can just pick any color here and then go to the map.

Right.

Wait for a bit.

Well actually 0.2 is very fast.

So you don't really see the switch right.

Nothing happens.

Then after one second we get the flash color that we put in here.

And I hope you understand this just makes it very versatile to use this.

We can just pop this all around.

We can just change the color on the fly, change the multiplier.

And this is just a nice way to make this modular.

And now while we implement this we just keep this here for testing.

Right.

And what we want is that we want it to flash once and then we want it to slowly go back to the original,

um, parameter value for flash multiplier.

We don't really have to change the color, we just want to set this back to zero.

Right.

We could, of course, just use a delay here.

And then copy paste this.

And set it back to zero.

Right?

And let's say one.

And if I start now, you see it flashes red after a second.

It just goes back.

And this is fine.

This is fine.

But we can use a timeline to actually make this smoother.

So we can just get rid of this here and this also.

And here we just want to create a timeline.

So add timeline I want to call it fade sprite flash like this.

And here we just want to play from start.

And a timeline simply gives us a value over time, which we can then use to change this to a zero.

So instead of going to zero instantly, we can start at the flash multiplier and then over time slowly

go to the zero.

And the best way of doing this is to use a lerp node.

So now we can copy paste this again.

And on update we want to update this every time the value here changes, right?

And instead of having a value of 1 or 0 we can slurp slurp float.

Yes.

And where do we start.

Well we do start at the same value we pass in here right.

So this is our default value a where we start at.

Like this.

Double click.

And we want to slowly go from A to B.

And B should be zero because we don't want to have any flash after this is done.

But we need this alpha, right?

So if the alpha is zero, A is active and will be passed through here.

If the alpha is one, then B will be active and pass through here.

And if it's something in between, well then it is between the value of a and b.

So we need to have a timeline here for this alpha value that slowly goes from 0 to 1.

So we can slowly go from A to B and we can go in here.

And set the length to one second to start out.

Then we create a new track and it should be a float track because we just need a single number and just

call this alpha.

And again we want to start at zero.

So we can just right click and add a new keyframe and set this to zero time, because it starts right

at the beginning.

And the value should also be zero.

And then right click again.

Create another key.

And this should be a time one the same time as the length.

Here the value should be one, right?

Sorry.

Click again and the way this works is right.

We start at zero and over time we slowly go to one.

And we could also give this some smoothing if we just select all of these and right click one and just

set the interpolation to auto.

You can see that it has a nice little curve and it's going to look a little bit smoother even.

And now we can go back to our event graph here.

And we have this alpha value now which we can just plug in here.

Right.

So we start at zero here A and go to one the b.

Now let's try this out.

Go here.

It flashes and you can see it slowly goes back to not flashing right.

Just like this.

Uh, one problem now, though, is that we cannot really, uh, affect the length, right?

Because in here we set one second and let's say we want to change it to 1.5 seconds.

Then we have to change this entire thing again.

We have to change all of this.

Right?

Because if I set it to 1.5, you can see that this does not update, only this changed.

So then I would have to pull this over and do all of these kind of things, which is not great.

So let's just set this back to one.

There is a better way of handling this.

And before we call play from start, we want to open up some space.

And here we just type in the name of our timeline.

So fade sprite flash and here get fade sprite flash.

And here I can set play rate.

And put this out here.

And what this does is it is a multiplier for this time.

So let's say I set it to two.

It's going to play twice as fast.

If I set it to 0.5, it's going to play half as fast.

And this gives us a lot of control without having to go in here and update everything every single time.

And we want the flash to be rather snappy.

So I can just set this to five.

But I want to put this to a variable so we can easily change this.

Right?

So promote the variable and just call it sprite flash play rate this compile and save.

And yeah our default value is five.

That is fine.

And just to show you that this works just do this again.

And yeah you can see it works.

But now we don't want to call this on Beginplay anymore.

We can just get rid of this.

And we want to play this when we take damage.

So right event any damage receive damage.

And then we check if is defeated.

And we actually only want to play this if we are not defeated.

Right.

Because if we are defeated we might play a different death animation.

And we don't want to have the sprite flash.

So here we can just, uh, flash trigger flash.

Right.

So if we are defeated, just destroy the actor.

If we're not defeated, play the flash.

And I like to use a yellow orange like we already used before for this.

I think that looks nice, but you could also just use white if you wanted to.

So just select the color you like.

And I want it to flash a little bit more.

I want it to be quite strong.

So I'm actually going to set this to ten.

But again this is kind of up to your own preference.

So now we can try this again.

And I shoot the enemy and you can see it's nice.

We actually feel now that we apply damage to the enemy.

Of course, there's many more things like sound effects and other things that are going to improve this

even more.

But this alone is a huge step.

I still don't really like the speed though.

I feel like it's a little bit slow.

So again, for the sprite, uh, flash play rate here, I want to set this to eight.

And do this again.

And yeah, I think this feels a lot better.

It's a lot snappier.

It's very flashy and it tells you that you actually hit the enemy.

And this is just a very easy but often used way to make the game more readable.

But that's it for this video.

In the next video, we want to implement damaging the player, because now even if I walk into the enemy,

I'm actually being blocked.

I'm not taking any damage.

That is what we're going to do in the next video.