Hello, this is Younghoon Lee
What we will learn this time is game over processing
In this section, we will learn how to implement the player's HP
And display a game over widget on the screen
When health reaches 0
We will also learn how to handle
The button event of the Game Over widget
Player HP Management and Hit Event Handling
To handle the game over, it seems like it would be necessary to create player HP
And implement a game over UI when the enemy attacks the player and HP decreases
And then stamina becomes 0
So first, we're going to create the player health
Go to the player's header file and create a HP variable here
Let's make it int 32; let's call it HP
And you have to have maximum HP
So let's set it to int 32 and MaxHP 3
We will reset the HP to MaxH
I'll give these two UPROPERTY properties
Make it like this
Shall we work on the UI first?
Here, we will create a HP UI
Let's inherit the user widget with a widget blueprint
And call it WBP Player HP
Open the player HP and create a canvas here
And I'm going to draw the UI here at the top left
The UI will progress right away
Arrange it like this
And I will express it as HP
Let's put the text like this to say, 'You are HP.'
Increase the size to about 50
In this case, we will check the size of the content
And configure the letterbox to fit properly
Now, you can just implement the progress bar like this
But in most games, we usually structure it like this
If you have a HP bar like this
For example, if it's filled with red this much
This is the background
But it has taken damage, so that we will reduce it to this amount
Then we can now express color in three stages
For example, let's say this is red
And this place is now painted red like this
And this is like black
It's black like this
Then paint white like this
The white part is done like this
And the guy here shrinks like this
There is a production like this
Where it shrinks and fits like this
I don't know if I'm expressing it well
But the concept is reduced like this
Then, every time you take damage, the red color decreases first
Then the white color follows and touches
Those things are done a lot
So, let me try to make it as simple as this
Then, we will process the HP gauge
But to paint three colors
There are two progress bars
If you look at it, there's a style here
Iif you expand it, it's made up of two images
A background and a fill image
It is usually arranged in two ways
So, if you increase the percentage like this
It is painted like this
So I'll make another one and layer it on top of it
Then, we're going to overlap this
If you want to overlap, if you look here, there's a thing called overlay in the panel
You can use this to make it a little simpler
After inserting an overlay
Add this progress bar to it like this
Then the size doesn't fit
So I'm going to expand this for a moment like this
And I'm going to fill the progress bar inside the overlay here
If you look at the top, there is a menu to fill in
Let's fill it out by pressing the two buttons like this
Do overlay like this
I'll make it a little longer
Let's duplicate one more progress bar
By pressing Ctrl-D and overlapping it
And then this is now the progress bar in the front
This one is in the back
Then, the front also has this background image
So, for the one in the front
I'll make the background color transparent
So here, I will subtract the alpha value of this color to 0 like this
And what's behind the background here
Let's change the background color here to a different color
I will make it a bit darker
With a feeling like this
I will process it like this with a dark gray tone
And if you increase the percentage a little more, it looks like this
Right now, the foreground color in front is the same
So I'll try changing this color
The color on the back will be white
This will make it white
As for HP, I will now express HP by making the progress bar in the front
A red color
We will try to express the three three-level colors like this
So, with this white color following this red end line all the way
Let's implement it like this
Now, to process this, we need to do some coding
Since it is a user widget now, let's create our widget
And inherit it from the boom of this Blueprint widget
Then process it
Then the name, this is bar
This is HPBar, this is HPBarBack
Then I'll name this HPBar
I will configure it like this
Compile and save
Then, I'll create a class
I will make a C++ class
Select All Classes, and then inherit
The User Widget like this
This is the player's HP UI
I will configure it like this
Here it is
Make the player's HP UI public
Then what I want to do here is
That progress bar
I want to bind two bars
So, UPROPERTY
EditAnywhere, then meta
After that, make sure to put parentheses
And then write bind widget inside this
Write class
That is UProgressbar
If you look here, the name of that UI is
That widget
The name of the widget is ProgressBar
If you click on this, you can see it more clearly
It is said UProgressBar like this
I'll leave this here and make a declaration
This is how I created one called HPBarBack
After that, I will copy it and call it HPBar
You can make it the same as the name here
Here, we will create two functions
One of which is a tick function
So there has to be one tick
We need to obtain the HP information
And express in this Progress Bar UI
So, to set that information like this
I will configure a function called SetHP
As for the tick, if you look here, you will find something called a virtual void NativeTick()
There is a function like this
When you press the tab here, it is configured like this
If you can't find this
Just press control and click on the user widget here
Then go here and search for the NativeTick
You can duplicate it
Come in, and write it here
You can write it like this and write "override" at the end
And I'll also create a function
The function is SetHP, so we will make a void SetHP function
Which will receive two pieces of information
Here, we will get the current HP as int 32
And MaxHP as int 32
The reason I get two is because I want to create a percentage
This progress bar here requires a percentage
So, if you receive two values, the current value and the maximum value, you can create a percentage
So, I made two functions like this
I will implement it
First, SetHP will set the HP bar
Instead of back, I will set the HP bar to 3% for this
Then, float per is curHP divided by maxHP
But the problem is that these are both integers
So when dividing integers by integers, the decimal point is rounded off
So, for example, 0.5 and 1
Or this is an int
10, this is 5, 10
Then, if you divide 10 by 5, you get 0.5
However, if you divide it by int, it becomes 0
So, if you cast even one of these as a float
The result will come out as a float like this
So, I will configure it like this and add the percentage here
To use this, you need to add a header
Let's add a header called Include ProgressBar like this
Add ProgressBar header
Write it like this
Next, in NativeTick, there is 100 HP
There is a Back with an HP bar
And the color of this Back is white
I want the white color to follow the percentage of the HP bar
To handle this, we need to know another formula
And one of the most commonly used formulas is linear interpolation
What it is is called linear interpolation
It is called linear interpolation but is abbreviated as 'Lerp'
Some of you may have heard of it, some of you may be hearing it for the first time
But to put it simply
It takes three parameters
It is said to be a, b, t, or alpha
And receives three values
You can think of a as the beginning and b as the end
That t takes values ​​from 0 to 1
For example, if we call this a line, there would be a line like this
There is a line like this from here
There is a line that looks like this: and here is A, and here is B
Then, the t at the end is
A float type with a value between 0 and 1
For example, if you call this 0, then t will return a
It returns a itself; if it is 1, it returns b
If it is 0.5, it returns the midpoint between a and b
That's why we interpolate
It's called linear interpolation
Then, there is one way to move it like this
And a way to do it like this is when using Lerp
If you do it like this, you can do it like this
Originally, you would receive this after a and b and write a certain value
But this would be overwritten on again
Instead of adjusting the t value like this, t is not adjusted
And is fixed at 0.1
So what happens is that the Lerp is called once at first
Then, as long as it is 10% of the position of a and b, it will be like this
The position of A moves
Then, if you call it again, it will be 10% from here to here, about 10%
About this much
Place A here
You keep repeating this
Then, we will continue to proceed in this direction
For example, here we are
Then, it will only be about 10% from here to here
At first, the section is large
But as it converges to b, you can think of it becoming much smaller as it gets closer to b
That's why the movement moves slowly and suddenly
We can implement some type of movement that moves big at first
And then moves very small at the destination
By using this once
This is what we're trying to do right now, right?
So it's like this
It's like this
It's coming this way
Then suddenly arrives
I'm trying to create a production like that
I'll give it a try
Then, first of all, we are going to use something called a Lerp
And this is a float type
Since this value is a float
There is Lerp at Fmath
There is a function called Lerp
You can process it using this
Containing a, b, and alpha
Then I said I would fix the alpha
I want to fix it like this at 0.1
But this is also a movement rather than doing it like this
I would like to use this delta time to control it
Then, 0.1 is 1/10
Right?
Since normally, it is 1 in 60
In DeltaTime
So if you multiply 6, it becomes 6 in 60
So this will be 1 in 10
So, if you multiply the delta time by 6
It is approximately 1/10
Do it like this
Next, we need to put A and B
Should A be called float A?
This is the current value
The current value is the value in this Back
So I bring it by getpercent
And the target value is this
The HPBar's float B becomes the HPBar's getpercentage
Then you can just put A and B like this
I'm going to put this back into A
And let's change this A value back
To the percentage value of HB100
Write SetPercent
And add A again
If you do this, you interpolate
Then receive that value
Then reflect this value here
You can do this processing using linear interpolation
Then proceed like this
And this UI should appear on the screen
So, let's go to the player
And attach the player's UI
Please do UPROPERTY EditAnywhere here
Next, TSubClassOf
class Uuserwidget
And here is player's HpUI
Let's call it HpUI factory
Then you have to make this and keep using it
This is a class
The name of the UI we created is Player HpUI
It will be like UPlayerHpUI
As a pointer here, I'll call it HpUI
Configure it like this
You can just make this, attach it, and keep it
Then go to Player's BeginPlay
And do some work here
First, I will bring the player controller here
And do it below where we processed it
Do Createwidget
Do this
Add an HpUIFactory like this
Then this should receive this
Accept HpUI
I'll cast it and keep it
I'll cast UPlayerHpUI like this and keep it
To have this, you need to add a header like this
Let's add a header like this at the top
And I'll attach the screen first
I'll add it to the AddToViewport like this
And then I'll setHP in the HpUI
And add HP and MaxHP
While I'm at it, I'll also reset the max
Even with the current Hp here
Let's go to Unreal
And add a HP gauge to the player
After compiling
Then here it is, right?
Here, I will add the WVP player HP like this
Shall we compile and run it?
An error occurred
It occurred at line 85
If it's the player line 85, it's here
And says it wasn't made properly
I'll turn it off again and try again
Let's compile it
And debug it in runtime
Run
I ran it with F5
Let's open the player again
And make sure we're in here correctly
The factory here is well-stocked
Let's rerun it
If you come this way, this place is filled
If you look at it like this, it is null
Then, in this case
The parent of the UI has not been replaced yet
The factory exists
But we can imagine that
Casting like this failed
Then, we will run it again
And replace the parent class of HpUI
HP player, HP did not replace this
Because it is a user widget
Using the Reparent Blueprint like this
Let's replace this with the player HP UI
And if you look at the binding, it's fine
Compile it
If you run it again, you can see that the UI comes out well
And if you look at it, Enemy doesn't attack repeatedly
Only does it once
I think there was something we missed while working on this as well
If you go to Enemy FSM and look here
It looks like this is here
When the attack movement is over
You have to retry the attack
But in this case, you have to do true to attack
When you do False, it means wait and not attack anymore
It means like that
Now I have to attack again
So I think I'll have to change it to true
Then compile it again
Run it, and take a closer look
Now you can see that it's attacking repeatedly
And when it runs away, it chases and attacks again
Now it seems to be behaving normally
Then, the Enemy should attack the player
We need to handle shooting
So, on the main character
We need to create a function that shoots
So, here, I will create a function called void TakeDamage
Yes, like this
Let's say On Take
OnMyTake like this
OnMyTakeDamage
For now, we will only receive 1 point of damage
In this way, the implementation department can be created like this
Now we have to implement it
Come this way
First, I want to decrease my Hp by 1
If health is below 0
I want to call the game over
You have to do it like this
If you reduce this, the UI should also do the same
I want to reflect this in the UI as well
I want to do something like this
I'll try them one by one
Let's reduce Hp first
Stamina decreases by one HP
This is how it is reflected in the UI
HpUI
Here, you can see SetHP
I think it would be a good idea to add HP and maxHP here
And, if
If that HP is below 0
Then I want to process the game over
First of all, the game over-processing will be paused
Then, we will create a UI and display it on the screen
So, to handle this to pause
We need a player controller
So, I will bring auto pc from Getworld
Bring GetFirstPlayerController here
And with the PlayerController
I will do SetPause
We did it briefly when we were shooting
But there is a concept called input mode
You can control the mouse cursor to show or hide
I think we need some of that here, too
In case the game is over, the mouse should look like this
So, shall we handle it here for now?
Set true in SetShowMouseCursor on PlayerController
Next, set the input mode of the PlayerController
SetInputMode
Let's do FInputModeUIOnly
Then, on the contrary, when you first start the game
You should do all of this in reverse
And here it is, game over
Here, I want to create the Game Over UI and display it on the screen
Now, I think we should do this
First, I'll do this in reverse, set it to the current state
Then do additional work
If you come over here, there is a BeginPlay
BeginPlay already imports the PlayerController like this
Let us handle it together here
Then, if you paste it here like this
You don’t have to bring it back
After bringing it in like this
I'm not going to pose
False
After that, I will make cursor invisible
And I'm going to do this as a GameOnly
So, when you first start it, it goes well
But when the game is over, it changes to UI only
And now, if you restart from there, it will be called again
Then, we will set it up again and configure it with that structure
Game Over Processing
We need to configure the GameOver UI before it appears
We need to create a GameOver UI
So, I'll come to the header
And create another Game Over UI in the same format
So, let's call this the GameOverFactory
Let's create a GameOverUIFactory like this
And we'll come and create it here
Add Create Widget here as well
Add Getworld
Then add GameOverUIFactory here
I'll do auto here and handle the UI
First of all, I'm going to try handling buttons in Blueprint this time
After creating the UI like this, you should attach it to the viewport
In the UI, add AddToViewport like this
Then, let's go back here
And create the Game Over UI
At User Interface, choose Widget Blueprint
Let’s call it User Widget
And call it WBP_GameOver
We will configure it like this
Put a Canvas Panel here
And then add some text
So, I'm going to base this on the center as well
Enter some text
I'll say GameOver
And set the font size around 150
Adjust the fit at Size to Content
First, to place this in the center, we will set it to 0.5
Then place it in the center like this
And for this, we will call it 0
Raise it up a little bit
Set the color you want
Since it's game over, I'll use a slightly yellow color
And you can make the button like this
I'm going to put a button here
I'm going to put it a little bit bigger like this
Place this in the center
And also add text
This will now be called a Restart
I'll call this Restart
Restart
I will write it in large letters
Then we'll have to make another one
Press Ctrl D to end this
I'll give it a name like this
Configure it like thi
This is Restart
And this is Quit
I'm also going to install a background
There's something called a blur
It's called Background Blur
It's written like this
After adding the blur like this
I will place it at the top
And set the whole thing
If you set this to 0, it fills up completely
Here is the Blur Strength
If you increase the value like this, the back becomes blurry like this
If you increase it too much, it will become too blurry
So as an appropriate value, I will only add about 5
I think 5 is a bit high too
This blur is an image pixel
If you look at it on a screen
Like a monitor
Each dot is called a pixel
It is a pixel, and this pixel information is calculated
Then, it will be from the top left
The pixels will end up in a square shape like this
I wasn't good at drawing, but I'll draw again
If there are pixels like this
Let's say there are 9 pixels
Currently, this pixel is being calculated
And it goes through the order
If it is currently being calculated
Then how do you calculate it?
There will be colors here
Then, there will be RGB colors
Red, green, blue
Then, add all RGB colors
So, the R colors are added together, and the G
And B colors are added together
Then average this with Average
Express that color here
In fact, rather than being exactly average, there is a concentration
And the concentration becomes Strength
So, it's an algorithm that becomes blurry
So now we do a lot of blur like this
Even in my practice, artists like this blur
So, I remember them asking to add blur to the composition
So, let’s configure the UI like this with blur
And I will make it do this action when the button is pressed
Should I give it some color?
Since this is Restart, I'll make it a little bluish
And do Quit with a slightly reddish color like this
Then, we will process the button when pressed
But if you look at it like this, you cannot insert a button event
If you want to add an event to this button
You have to check is Variable here
You must check this before you can add an event like this
This is also the same
Then, let me add them one by one
This happens when you click
If you go to design, select quit
On Click, then the event will be arranged like this
So, let's try restarting here first
Restart will open the current level again by doing an open level
Then, you need to enter a name here
And the name, Current Level Name
If you look at it this way, there is a node like this
You can bring Get Current Level Name
If you put this name here
You will get a node that is converted like this
This is FString, and by changing to FName
You can put it like this
Then I'll try to end it
For Quit, when you search quit, there is Quit Game
Click this
You don't have to touch anything here
Because we will quit it
I explained this once last time
So I'll structure it like this
Then, we must arrange it so the entire UI appears on the player side
Compile it like this
I made it like this and attached it while playing the game
In the Player
This is not it, the main character
You can see it at the very bottom of the Player
In addition, we will arrange the Game Over UI like this
Then, if you run it, it will look like this
When Enemy hits the Player
This has to be processed
Then, when the Enemy hits the Player like this
This OnMyTakeDamage function will be called
To handle this
Go to FSM
If you look up from here, there will be a hit
It's right above
We only output logs in Hit
But here we are now the main character target
What is Target's current data usage?
Since I'm an ATPS player, I think I can use it immediately
Here, we will call the OnMyTakeDamage function like this
Save and compile again
Let me give it a try
Then, a lot of Damage is done
And show that the white color follows along
When the game is over, it becomes blurred like this
And the UI appears on the screen
You can restart again by pressing Restart
In the same way
It can also be quitted
Then, the Game Over UI that we just made
We will recreate in C++, process it, and finish it
On Tools
I will inherit the User Widget
Like this
Next
This time, I will call it Game Over UI
It's configured
We'll remove the existing blueprint content
Delete this
Go to Design
And bind the two buttons
Name, and Quit
Change the sector
Return here
Go to the Game Over header
Come here
Let's call it Public
UPROPERTY
And EditAnywhere
Then meta
And do Bindwidget
And that's a button
class UButton*
Then, the names must be the same
ButtonRestart
Make another one just like that
ButtonQuit
Please handle it like this
Then you have to connect this to the button
Then, there should be two functions
So, two functions
void OnClick
OnClickRestart
This always requires UFUNCTION
Because you're going to bind it like this
By doing AddDynamic, at the delegate
I will register this
So, you have to write UFUNCTION macro
If you don't do that, the call won't work properly
Write UFUNCTION as well
void OnclickQuit
I will make it like this
Now that we've created the button and function
There should be a point where we can connect them
So, when this UI was made
At virtual void NativeConstruct override function
Do you remember we handled it?
First, let's give the override keyword
And Alt Enter
To make implementation parts like this
Then
I will come to this function and connect it
Here, we want to connect the button to a function
Button's function
I want to connect the button's function
You should write like this
Then, there is a button restart
And Add Dynamic, oh it's not it
If you look here, there is Onclick
Write Onclicked.AddDynamic
And put this
Then, in the function name part
We just have to put the address of the function we want to call like this
Since it is a Restart, I will connect this function
This is called a Restart
To use this, you must add a header called button
I'll edit this a little bit like this
You can write it like this and do it like this
Then, make the same copy
Connect the Quit in the same way
Connect OnClickQuit like this
Next, there is Restart and Quit
We saw this last time, but we deleted it here
But if you double-click here, it will look like this as a symbol
There is also an Open Level
There's this one too, it's all there
So, I think we can use these functions
In cases such as termination, you may want to use this function
In the Kismet system library
Shall we try this first?
If you put it like this, it will look like this
You also need to add a header like this
You can do it starting with Kismet
And then we're going to put Get world here
And put Getworld
Here, bring GetFirstPlayerController
Then, here
You can put the end of Quit like this
The last factor value will be like this: False
If you do this, you can quit
And I'll also restart it
For Restart, when you look here, Open Level
GamePlayStatics is used
You can come here and use this
To create an OpenLevel
You can put name here
I first wrote world context
Put GetWorld
And then the name
You will also need to add a header for this as well
This is how we add the header
You can do this until here
Then, I'll get the current name
This is how you bring GetCurrentLevelName
Put the world here
This is string and f- name goes in
So bring the name with Fstring like this
Then cast it as an F-name and insert it
Write Fname
If you write it like this, you can enter it
Delete this again
And compile
I'll turn it off and compile again
Then, I'll run it again and see the results
It's working well
Game Over appears fine
But it doesn't work
Let's take a look for a moment
Ah, I don’t think I changed parents again
Here again, the parents have not been changed
Here again, Reparent
This is Game Over
Change the parent with Game Over UI
Then, it connects well
Compile and run it again to see the results
It restarts
And of course, Quit works well too
Still, I have to check
It becomes Game Over
And I confirmed that Quit is well working
Let's summarize what we learned in this unit
Player Health Management and Shooting Event Creating HP UI
How to implement the player's health function and display the health UI on the screen Click and drag the Progress Bar at the top left of the camera and adjust the Percent gauge
After overlapping two Progress Bars using Oberlay PANEL, change the names to HPBarBack and HPBar
After declaring class UProgressBar* HPBarBack, the virtual boid NatibeTick() function is implemented
After declaring class UProgressBar* HPBarBack, the void SetHP() function is implemented
Configure a Lerp function to fix the alpha value
Shooting Event
When an enemy attacks the player, their HP is consumed and the game is paused when the HP becomes 0
Implement Void OnMy TakeDamage() function Reflected in UI with SetHP(HP, MaxHP)
Game Over Process How to display the GameOver UI widget on the screen when the game is over and have it restart or exit when you press the button
Implement Auto ui=CreateWidget() function, and process button on Blueprint To add Button Event, check is Variable
Process Restart button by connecting Open Level node Process Quit button by connecting Quit Game node