Hello, this is Youngho Lee
Today we will cover Crosshair and bullet UI, as well as reloading
We will create Crosshair UI that stands for the aiming point
This lets the user know where the collision happened
Using LineTrace
Second, we will create bullet UI
This will show the user how many bullets are left
And using Uniform Grid Panel widget
We will learn about how to polish UI layout
Finally we will implement reload
We will learn how to process by syncing
UI intialization work with reloading animation
Here, we will use Notify Event of animation to process
Crosshair and Bullet UI
Let's create Crosshair UI
Crosshair UI requires UMG at Unreal Engine
Or Unreal Motion Graphics
For that, let's first create a C++ class
To control this UI
Content Browser, at C++ Class folder
Right click and New C++ Class
Select All Classes
And search for User Widget
And as its parent class
Select User Widget Class
Next
This class name is MainUI
And Create Class
And load everything again
With this here
This C++ class is now in the project
MainUI
And let's create a class that takes MainUI as its parent
Let's create Widget Blueprint class
NetTPS Content Browser, there's the UI folder below
Let's make it here
Right click
User Widget, below User Interface
We have Widget Blueprint, click
As its parent class, at All Classes
Search for MainUI
Here, we have the freshly made MainUI class
Select, rename as
WBP that stands for Widget Blueprint, so WBP_MainUI
And double click on MainUI Widget to open
At MainUI Widget, we will be working on Crosshair
So at the center
We will add a crosshair
So if this is the game screen, the crosshair will be here
With the two lines on top of each other, thus crosshair
We will create this crosshair here so that
Whenever we shoot
We can aim for the target
That's the UI work we will do
For that, first
Let's add a Canvas Panel
See the palette at the left
At Palette, serach for Canvas
Then we get Canvas Panel
Drag and rop this Canvas Panel
Into Hierarchy
Then based on the resolution
We get the outline for it
It automatically resizes based on screen size
And for Crosshair, we will have an image at the center
We will add an Imadge Widget here
Palette, Common, down there we see Image
Image Widget, drag and drop
Let's add it as the child of Canvas Panel
See how Image Widget is here now
Let's rename it
Name it as img_Crosshair
And since this crosshair will be at the center
To the right at Details, we have Anchor
Open the dropdown menu and we get anchor presets
Let's align it to the center
Then the anchor value goes in the center
But this widget is at the top here
So in order to position it at the center
We need a few steps for that
Let's add 0,0 for position X and Y
Like so
Center alignment for the anchor
And 0,0 for position X and Y
For size
For both size X and Y, let's add 150, 150
Which is huge
And Alignment, 0.5, 0.5
So 0.5 for each
Then we see an image at the center
And at Appearance, we need an image at this brush area
So we can add the crosshair image right here
Use a png image here
So let's go to the class assets
We have one in blue and one in red
You can use whichever you like
Let me start with the red one here
For you, you can choose whichever
Let me bring in this red Crosshair.png image
Since png has the background
As transparent, we can use it here
So here at Contents Drawer
We have UI folder
Over here
Drag and drop the image
Then it is now here
So this Crosshair image
Drag and drp at the brush area like so
Then now we get that Crosshair image here
So now let's make sure this crosshair
Is visible on screen
It's not that when we play the game
This crosshair widget will appear on the screen
When we create this widget
We need to add this widget to Viewport
So go back to Visual Studio
And at Visual Studio, go to NetTPSCharacter.h file
At NetTPSCharacter header file
Let's add some content regarding the widgets
Public
Let's add the widget classes for use
U PROPERTY EditDefaultOnly
At editor mode, at Blueprint
We will allow for a drag and drop
So category is UI
TSubClassof class UMainUI type is the class we will accept here
Our widget Blueprint
It is also made out of inheriting MainUI class
So through TSubClassof
We can accept children of MainUI
Let's add MainUI widget
This widget that is made
It will be on screen but it can also disappear if needed
So we need to remember this widget that we created
So in order to remember this widget instance
Let's add a variable so that it remembers
This instance made out of MainUI widget
U PROPERTY class UMainUI
Let's add that MainUI here
And let's add a function that creates and initializes
This widget right here
So this is the initialization function
void InitUIWidget
InitUIWidget, at C++
Let's add it to NetTPSCharacter.cpp file
So this is autofilled
Alt Enter
Or if you're using Visual Assist, Alt Shift Q
That's how you can make it
Add Init Widget function at ANetTPSCharacter
And let's now add a code to create the widget
First, when the user
Adds MainUI Widget
They should be able to create this
If this is trying to create it even without the user assigning it
This will be an attempt out of data that does not exist, which is an error
So let's first check if MainUI widget is Null or not
Or whether it has value or not
Let's add this code that checks for that
And then for MainUI
Let's create it from this MainUI widget
Use create-widget
And GetWorld, and add MainUI widget
So since widget just creates User widget
Let's just cast it here and wrap it
Now we will be using UMainUI
And in order to print MainUI on screen
AddToViewport is needed
In order to use MainUI widget
We need a header file at the top
# include
And add that MainUI header file
That's how
We can use this
So this InitUIWidget
Let's call it so that it appears on screen
Where do we work on it?
Let's do it at BeginPlay
Over here, below fire, we can add it here
Notice how this initialization function
Is right next to the user input function
So let's place this along with BeginPlay
That take care of init function
I will cut this part
Ctrl+X to cut
And over at BeginPlay function
At the bottom of BeginPlay function
Let's paste it like so
Then, this lifecycle function that is called when BeginPlay starts
Below this BeginPlay, I have added
That InitUIWidget function is declared
And at the bottom of BeginPlay
Let's have InitUIWidget called like so
Then, when it is born
BeginPlay assigns the input
And the actors needed for the gun search
Searching for gun actors
And the code for the UI goes here
So let's process this build
When the build is successful
Go to Unreal Editor
Go to Blueprint folder, below NetTPS
And open BPThirdPerson Blueprint
At Details, let's search by UI
As MainUI
Then we get that MainUI widget that we created
Like so
Over here
Let's choose WBP_MainUI
And compile
Let's run this
Now we see the crosshair
Let's go grab the gun
And aim and shoot
We see how it shoots right at the center of our crosshair
But there seems to be a problem
When we run it
It's good that our crosshair is at the center
But it appears even when we don't have the gun yet
So let's process it so that
We only get Crosshair when we hold onto a gun
So in order to hide and then show the crosshair
We need a function to process that
And then we need a logic that tests conditions
So that Crosshair UI is not visible on screen
Based on whether Player is holding onto a gun or not
For that, let's go back to Visual Studio
Go to MainUI header file
MainUI literally is
The C++ class file that shows Crosshair now
Here, the one in use now
This Crosshair, this
Let's make it visible and invisible on screen
For that, first
Public to declare
MainUI.header file
And what of this are we
Trying to show and hide?
It's this file, img_Crosshair
This UI or widget is what we want to show and hide
Here we have options for Visibility
Here's that Visibility option
It is at 'visible' now
Let's try changing it
We have other things like 'Hidden'
Let's set it as Hidden, and when we compile it
When we go back and play
It is now hidden on the screen
When we work on it
We don't see it when we run it
So right now Visibility is set as Visible
For us to control this option
Between Hidden and Visible
We need some set of works
First let's allow for control for img_Crosshair
So here, class U imae img_Crosshair
Let's declare to control
So this img_Crosshair corresponds to who?
It corresponds to WBP MainUI's img_Crosshair
With that same name
So this corresponding
Also means that they are bound
So let's bind this variable with this widget variable
Using the binding
Therefore, we need to declare a property that binds the two widgets
For which we use UPROPRETY
Here, Blueprint
I will add ReadWrite
So for category, let's just say UI
And using the meta keyword
We process it by using bind widget
And let's build it
So this that is declared with bind widget
This binds all widgets with the same name as img_Crosshair
Meaning, the two becomes one
So what value goes in here?
This img_Crosshair over here
And where do we check for this?
BindWidget, we have another tab here
So click on that tab
And we see the BindWidget being processed
So here, img_Crosshair is added to BindWidget
It has the tick mark
So we can see that the work is done
So at C++, when we run the Blueprint
At img_Crosshair, this widget is to be added automatically
Next, let's add a variable that will
Make this widget visible and invisible
So this variable processes
Whether to show this Crosshair
So void show Crosshair, and isShow
Let's add this parameter
So let's add implementation to our cpp file
Here, we will be processing
To show and now show img_Crosshair, so isShow option
It will change based on its variable value
If isShow value is True
It shows, so at img_Crosshair
Set Visibility
So this Set Visibility option
Is set as Visible
And if not
We will keep it hidden
And over at the top, to use that image widget
With the Include option
At Component
Let's add Image.h
And this ShowCrosshair function should be called somewhere
So call when Player has the gun
And if now
Call False, and with the gun
Call True, that's how it works
Let's now build where it calls ShowCrosshair
Which happens at
NetTPSCharacter at cpp file
InitUIWidget, when UI is first built
Player won't hold the gun when it's first born
We need to go pick up the gun
So what happens then?
Crosshair is invisible
So at MainUI
At MainUI, go to ShowCrosshair and add False
Then it becomes invisible
And when it picks up the gun, then Crosshair should be visible
This is attachPistol, so here
ShowCrosshair should be True
Meaning Crosshair is visible
And with Detach
With Detach
LIke so, since the gun is away, it should be invisible
So the Crosshair should be gone
That's how we process it
Let's build it
Done
Let's go to Unreal Editor and play
At first, we don't see Crosshair
Let's go hold onto that gun
Then we get Crosshair, try shooting with z
And let's let the gun to, and Crosshair disappears
Press f again, and it appears, and drop
And it is gone, so this works
We worked on displaying Crosshair on screen
Next, let's create our Bullet UI
Bullet UI means, when we play here
When we hold the gun, we get our Crosshair
But it does not have any limitation as to how many bullets I can shoot
So it doesn't have infinite bullets
It should stop shooting when it runs out of bullets
So let's work on that part
So this is about adding to this screen
The Bullet UI at the bottom
Like as I'm outlining here
It will show remaining bullets
So that whenever I shoot, this number of bullets
Get updated based on how many is left
For that, go to WEB MainUI at UI folder
Same thing, since it is a widget that shows UI on screen
We will be adding here at the bottom
Let's add that UI
Like so, at the bottom
But we won't set up all the bullets in advance
Instead
It only displays the remaining number of bullets
So we need that automatic increase
So the panel for that is
Let's use Uniform Grid Panel
Grid, literally
It is in shape of a grid
So we can add that grid and add each like so
It's like a matrix, or a tile
Like so, we can add
Each of the widgets we want
Search for Uniform Grid Panel at Palette
And it is the child of Canvas
Let's drag and drop to add so
Then we get that panel here
Let's set its location value
Let's align it at the bottom left
So its anchor value at Details
Let's add it to the bottom left
Then it pivots to the bottom left, the anchor value
Its position X and Y values, 10
And let's bring it up a bit, so -10
And alignment
X value stays, and Y is 1
So this is what we see over here
So here
So this is the X value for this spacing, by 10
And by Y value, this spacing by 10
That's how it is made
And we will be adding the widgets here
And in order for this to resize itself based on the attached size
Let's go to Details and go to Size to Content
Let's tick this box
Then now it is tiny
It's because we don't have anything
And the moment we add that bullet widget we need
It will resize itself based on that
Done
Now let's add the widget here
First compile
Go to UI folder, right click
At User Widget, select Widget Blueprint
Select User Widget
Select
There is User Widget on top as well
It's the same thing, so you can choose whichever
Let's say WBP_Bullet
Its name is WBP_Bullet
Double click to open
Let's add an image here
At Image Palette, we have Image Widget
Add it like so
Drag and drop at Hierarchy
Do we not need a canvas?
It's not necessary
Since we are only using a widget, this is fine
So select this, and we have a few tings at Details
We need an image for that brush
And we don't have that image yet
We will be importing an image
And we have Image Size
For this size, let's add 50 and 50
And this widget will be at the bottom left with this size
And then we need an image to add at this Widget
Go to our Assets
And we have our bullet asset
See this BulletSprite.png?
Let's bring it to our project
And put it in our UI folder
Drag and drop
So it drops like so
So to this image
Add our Sprite image
Then we see this bullet
Compile
You can close WBP_Bullet now
So let's check if this is working well
We have WBP_MainUI
And we have Uniform Grid Panel here, right?
Let's rename this Uniform Grid Panel
Let's rename it as BulletPanel
So with this BulletPanel
Let's add one by one at BulletPanel
So at Palette, we just made our WBP_Bullet
We can search for it
And drag and drop
To add it as the child of BulletPanel, and ta-da
It is on the screen, it shows like so
See how it is at the bottom left?
And now, Ctrl+D to add another WBP_Bullet
It does add, but
Under Hierarchy, it says that it has been added
But that's not what we see here
The reason it
Its position is overlapping
Thoes added as children of BulletPanel
At Details, we have options for row and column
The options for row and column
For row and column
Let's skip row and add to column
So that it adds to different columns, like next to each other
So for this first one
If I add 1 to its column, this is what happens
For the second, I can say 2 to its column
See?
So their row, let's try 0 and then 1
Then we see how it moves starting with 0
Thoes that are 1 right now
These are 1, so they are at the bottom, and these 0's are at the top
This is how we can work with different row and column
So these are up just for the sake of testing
We will only use one row
And we will have as many columns as there are bullets
To control this, let's go to MainUIWidget C++ Class
And add a code for that
Let's go to Visual Studio and to the MainUI Header file
Over here
Let's add the members to show Bullet UI
MainUI.h file
And the panel to add Bullet Widget
It's our Uniform Grid Panel
And then we had Bullet Widget Class, WBP_Bullet
Let's bring them in and add to the Bullet Widget
That's the code we will write
And we will create a function where
This Bullet Widget keeps getting added to BulletPanel
So the function to add Bullet Widget
So, first the panel to add Bullet Widget
Let's create using U PROPERTY
And at Blueprint ReadWrite
Shall we bring it from the top?
Done
And class UUniformGridPanel
Declare the class
The name is BulletPanel
And then Bullet Widget Class
Same thing, UPROPERTY
DefaultOnly
And Blueprint ReadWrite
Category, let's say Bullet to distinguish
TSubClassof, class UUserWidget
Let's say Bullet UI Factory
I said Factory for a reason
Because this is different from instance, it's a file
And the function that adds Bullet Widget
Let's add it in the name of void add bullet
Let's implement add bullet
Let's add the implementation at the cpp file
Let's create a WBP bullet here
Its instance, so auto
BulletWidget
CreateWidget, GetWorld
BulletUIFactory
With that, WBP_Bullet
We just wrote a cote to create a widget
So we created a widget like so
And we need to add it to BulletPanel
So at BulletPanel
Add it to the function AddChildtoUniformGrid
Add BulletWidget here
And at the back we have the row value
Keep the row value as 0
And following that we need the column value
Whose default is 0
But for us we need different values based on how many are in there
And we need the increasing value by one
So for example if we have three bullets now
Then the next one should have the column of 4
And then next one 5, like so
We need to increase the size by its max + 1
So this is the adding index for this
At BulletPanel we can import the number of child it has
By using getChildCount
So we need as this number, why?
When the child is added
It adds starting with 0, 1, 2, 3, 4
So all the added things are here
And the first one is added at 0
So getChildCount becomes 0
And with one new, it's 1
And the count is 1
Meaning, the second one has its index at 1
Because 0 contains the one before
The second one goes into 1
So it should go into the index 1
So by using getChildCount
We can keep adding to the desired index
So here BulletPanel
Let's add by including Uniform Grid Panel
Inside the component, add Uniform Grid Panel header file like so
And now call AddBullet
The bullet number we want
It calls AddBullet for the remaining bullet number
Then it will show on the screen
And this part is worked at
NetTPSCharacter Header file
Let's add that content
Below the bottom of the file, add public
I will add Bullet UI
And Bullet Member
And we don't know how many is left
But it starts with the maximum bullet number
Whether it loads 10 or 20 bullets
So after Player shoots it all, 10 or 20 bullets should be reloaded
So we need that maximum number first
So let's declare that max bullet number here
In order for designer to edit later
Let's use UPROPERTY to expose it on Editor
Edit Anywhere, and category
It's Bullet
int32 MaxBulletCount
I will only allow for 10 bullets
And then the remaining bullet number
How many
How many have I shot and how many do I have left?
So let's add BulletCount
And initialize the remaining bullet number with MaxBulletCount
It's in capital letters because this is to be used as a constant
So we could use const for constant
But then this won't be exposed to Editor
So I didn't use const
So in order for this to be used as a contstant
I wrote the variable name in capital letters
Since its value keeps changing
I wanted to keep editng it as a variable, so this is in small letters
So this initializes BulletCount
And one by one, bullet goes away
This part should be added
So based on BulletCount
Let's allow for adding Bullet UI
And that is done at
The beginning at InitUIWidget
So at cpp, let's get into InitUIWidget
Under Crosshair
It's about Bullet UI
So let's add that initialization part
So first for BulletCount we need MaxBulletCount
Did we not do it here?
Did we not do it at the header file?
We did, but
In order to process many things such as reload
We need to call it again
So how?
In order to initialize this part
Let's add that code
In order to initialize the bullets
Let's add the widget one by one to the UI with this code
SO for int I starting with 0, I gets as big as BulletCount
And it repeats
And at MainUI
Call AddBullet and
It adds UI Widget
Or Bullet Widget one by one
So build
Build and open Editor
That's it
Now go to WBP_MainUI
And then to Graph
At Details, let's serach for Bullet
And it shows here
We need the Widget for BulletUIFactory
It's set as none here
This, let's
Select WBP_Bullet
Let's add WBP_Bullet to BulletUIFactory
Compile
And play now
And it shows the bullet UI at the bottom left
Like so
Then, grab the gun, and shoot
But what happens?
We haven't added the reduction part with the gunshoot
It only shows the UI that we want
So in order for this UI to reduce
And remove the bullet
Let's work on that part
Visual Studio, now at MainUI.h file
Let's add a function to remove bullets
void, and to mean remove bullet, let's say 'pop'
PopBullet int 32, and which of the index to be removed?
Let's work on this
It could start with the last one, or select a particular
For me, I will bring in that index value
And reduce it in this code
So PopBullet, let's add it to MainUI.h cpp
And here, at BulletPanel, we have
Simple 'remove child at'
And add the index value
Then it removes UI of that index
So when should this happen?
When Player shoots
At NetTPSCharacter.cpp, we have fire function
So whenever Player shoots
What happens?
Bullet UI should decrease by one
When Player does not hold the gun
It can't shot, so leave it be
When animation plays, right before that
Let's add the logic to
Remove the bullet here
To remove bullet, we need one less BulletCount
With the gunshoot
The remaining bullets should decrease by one
So we remove one UI from MainUI
popBullet, and add to BulletCount
Then it removes the last one, right?
And then build
If it succeeds, go to Editor and play again
So get the gun, shoot, shoot
And the UI gest reduced
So that happened, but there could be a problem
Player moves, get the gun, shoots
And the UI is removed well
So it is out of bullets
Now there are no more bullets
But somehow it can still shoot
Which shouldn't happen
So we need to add that it can't shoot if without bullets
So at Visual Studio
At our fire function
At NetTPSCharacter.cpp, at 'fire'
We need to add a code
If without bullet
Meaning, if Bulletcount is equal to or less than 0
That means there is none
Then this does not proceed
Can't it just be equal to 0?
That's right, it will be reduced here as well
So if it is 0, it won't enter here anyways
But then, somehow, with programming
Somehow
There could be a random bug for things like this
So when this should be 0, it may overlap and ignore
And proceed with something strange
So just to be safe
Let's just say less than or equal to 0
So that was on creating the Bullet UI
Reload
So let's now work on the reload
We built it well, and let's get the gun
So after using all the bullets, it can't shoot anymore
And since it can't proceed here
We now need to work on the reload part
To reload, let's add an input for that
NetTPS, go to Input folder
At action, choose TaskePistol, Ctrl D
And add IA_Reload
It uses bool value to determine whether pressed or not
So I just simply made Reload like others
To check if there is or is not an input
And then the Reload value
Let's set to assign it to a key
Open IMC default
Add a Mappings
At the bottom we see IA Reload
So add IA Reload
Once IA Reload is added
There is a keyboard here
Click on that keyboard button
And add 'r' for the key value
The 'r' key
Then we added that input
Now close IMC default window
At Visual Studio, let's declare to process this input
Go to NetTPSCharacter.h
And at the bottom, public
I will say 'reload' here
so for reload, at the top for input we have one for shoot
Let's bring it down and use it
Like so
Let's just change the name to Reload
So it becomes ReloadAction
And to process this in a function
Let's bring in the structure of our fire function
And change its name to Reload
Let's say ReloadPistol
Done
Now let's work on ReloadPistol
For ReloadPistol, let's bring it down
And paste on top of SetupPlayerInputComponent
Let's move it over here
Just to make it easier to work
So at the function SetupPlayerInputComponent
We need to bind ReloadPistol and ReloadAction
So at the bottom of SetupPlayerInputComponent
We have 'fire'
At the bottom, Ctrl D
So this time, it's not FireAction
But ReloadAction added
And not fire but ReloadPistol
Let's add it like so
So this part has been added
That's it
So we added that function for reload
Though it is empty for now
And we have bound the inputs
So what does ReloadPistol process?
Let's make it initialize Bullet UI and set the current bullet
To our max bullet value
For that
Over here
Let's say that here we have a few UI Widget left
Let's say we have around 3 bullets here
Then if we use add bullet here
Meaning, we add 10 more bullets on top
There could be 13 in total
So before working on this
We need to remove these
And then set the 10 bullets again
That's the clean way
So all Bullet UI, however many is left
For example, even if 3 bullets are left
It removes all Widgets, and since the max is 10
It sets 10 bullets again
That's the clean way
So let's add a function to remove all Bullet UI
To our MainUI.h
popup, below this pop bullet function
Let's add a function to remove all Bullet UI
void RemoveAllAmmo
Let's do that
And let's work on RemoveAllAmmo
So let's add this implementation part
So here
We remove all children at BulletPanel
So at BulletPanel we have ClearChildren
See?
This will remove all child widgets
Here is says 'remove all child widget'
So it removes everything at once
So we can call this
Or we could call every pop and remove it
That's a way, but
Let's rather use ClearChildren that does it at once
And then
At NetTPSCharacter, let's implement ReloadPistol
Remove all widgets
And we will be setting the structure again
So let's work on this part where
The user presses 'reload' to initialize bullet count
And then for Bullet UI
Remove all Bullet UI Widgets
And then
Set the Bullet UI back again
That's the structure here
But there needs a condition
A condition of
Only when Player holds the gun
Are all these possible, right?
If Player does not have a gun
The content below won't be processed
So this part, if
If bHasPistol is False
Then this part does not go through
So return
If this is False
This doesn't work since Player has no gun
And if True, since Player has the gun, reload is possible
So let's initialize bullet count here
BulletCount, initialize with maxBulletCount
And remove all existing Bullet UI Widgets
At MainUI
We just made RemoveAllAmmo
This will remove all UI first
And for in I that re-sets the Bullet UI
At 0, I repeats as much as BulletCount
And at MainUI
We do AddBullet as before
So let's see how this builds
So when user presses 'reload'
Then this bound function ReloadPistol is called
If Player has the gun, bullet is initialized
UI is removed and set up again
This part of the code works out
And Blueprint
At this folder, open BPThirdPerson
Search for Reload and at Input we are to add ReloadAction
Here we can add IA Reload that we made before
Compile
Let's run
Press f, and shoot
We shot everything
And press 'r' to reload
And we shoot again, and we still have a few left
And press 'r' and now
We have 10 bullets, the maximum number, reloaded
And next, when reloading
This works now
The UI refills again
And let's add an animation here
So in our list of animations, we have
One regarding reloading, so search for
'Reload' and we get MM_PistolReload
See?
So right click on MM_PistolReload
And make it into a Montage file
Create AnimMontage
Don't change the file name
We have MM_PistolRealod AnimMontage file
Here it is
Let's save all to save everything
And let's open this animation file
So this is the animation
Good, but here
When the bullet is being reloaded
I want the UI to fill it at this last moment
So it can't fill up the bullets at the beginning
Let's sync it to the animation so that
When this actions is all done
Around here
The bullets should fill in, so here
Let's wait until the bullets are reloaded
And then let's make the UI fill up here
So we should add a Notify event for this
Here, let's right click
On this Notify part
Click on Add Notify
And add New Notify
Let's name it
OnReloadFinish
Here, this Notify Event of OnReloadFinish
It's added here
So now that we have this Notify Event
Let's close this
And at Montage, when the event is called
When OnReloadFinish is called
Let's make a logic to process that
So at Visual Studio that controls the animation
We have the class NetPlayerAnimInstance
This is the calss that controls animation on Player
Here, at the bottom, let's say public
And add content regarding the reload
Let's add Reload Montage Instance
UPROPERTY EditDefaultOnly
And Category, Anim
Same as above, add Anim
And calss UAminMontae
And for reload, let's say Reload Montage
And in order to play that reload animation
Just as the shoting animation, we should be able to play reload
For that, we need a function
Let's make a function to play the reload animation
void Play
Reload animation, let's say that
And at Montage, at our reload animation
We added Notify Event
The function to get that event
Let's add it here
Reload Animation Notify Event
And the function to process it, UFUNCTION
We need UFUNCTION here
In order to sync Unreal Editor and C++ to process further
UFUNCTION void AnimNotify, add prefix for the name
And underbar, until here is what processes Notify Event
Following that, add the name of the Notify Event
OnReloadFinish, like so
Then since we have OnReloadFinish for the Notify Event
The function to process it is AnimNotify_
And this function is to be called
Here, when OnReloadFinish Notify occurs
This function is synced to run
So let's finish the two functions
First, add PlayReloadAnimation
And then let's add again AnimNotify ReloadFinish
We added two classes at NetPlayerANimInstance.cpp
First, PlayReloadAnimation function needs the gun
Only when Player has it, right?
And when with reload montage
That's when to process it
So if bHasPistol
So Player has the gun
And with and reload montage
At MontagePlay, reload montage
Its default is 1, so let's add that
Then reload montage is now play
So here, when it is now OnReloadFinish
Then what do we want?
We need to
Update the Plyaer UI
Here, at reloadPIstol, notice this part
This is what gets updated
So we need to call that in
But when the animation is playing
This is only processed with the input
Which is good to do it then, but
What we want is
Play the animation here, and when it does that
At a certain point, after some time passes
When AnimNotifyEvent occurs
That's when we want to do this
So since the poitn of time is a little different
We need to add another function
That can process this part
So let's move to the header file of NetTPSCharacter
Here
Let's create a function to initialize Bullet UI
void initAmmoUI
Create one InitAmmoUI
And let's add the code to initialize this UI
So at reloadPistol, add it up until here
So that this code to call this is included
And then here
All initialization part should go down here
So that this part moves to down here
Then, at initAmmoUI, it initializes the bullet
Initializes Bullet UI
Here, the bullet count is initialized
And the setup part goes here
Right?
And at reload, the animation
It should play the reload animation
Then when is InitAmmoUI called?
When the animation plays
During that reload animation
When Notify Event enters
Then what do we do?
This processes to update Bullet UI
Right, so here at Player
InitAmmoUI is now
Being called in here
That's when the bullets are set up
So that this code updates the UI
So let's add the code that
Plays the animation right here
At reloadPistol, with the user input
It only plays the animation
And from the animation it gets the event to update UI
Let's add 'auto anim' here
Add Cast UNextPlayerAnimInstance
At GetMesh, bring in GetAnimInstance class
And we've done the casting
Next, at anim
Add PlayReloadAnimation
Then it plays ReloadAnimation
So build
And let's check
At animation, we have ABP_Manny
At ABP_Manny, which is in NetTPS animation folder
Double click on ABP_Manny to open
Done, and then
At Details
Search for 'reload'
And we are to add reload Montage
NetTPS, here at the header file of Player animation
We implemented to get this reload Montage
This is the exposed result, so
Let's choose MM_Pistol_Reload_Montage here
Then it adds like so
Now, compile
And let's play here
Play
So we have the gun, bang bang
And let's reload by pressing r
Then we get the animation
Ta-da
And ta-da again
So the animation plays
And when it puts it in, then the UI is updated
See?
But the problem is, let's shoot and press reload
So let's shoot and press reload
And then here, press reload again
Then the reload animation repeats itself
See?
This is what we need to work with
So that it cannot reload again when it is reloading
When it is reloading, it shouldn't reload again
So we need a variable that remembers
If it is reloading right now
At NetTPSCharacter, at the very bottom
Let's add a variable
That remembers if it's reloading
So bool, isReloading
At first it is False
When isReloading
Let's make it impossible to reload again
So at NetTPSCharacter
ReloadPistol
If Player does not have the gun, what else do we need?
And if Player is not reloading
Or, in order for this to process nothing, if it is reloading
It should not process it
So let's add 'or' so that it doesn't process if isReloading
That's how it works
So how do we set that it is reloading?
So, when reload is successfull, when isReloading is False
Then this will be running, but
If it is reloading, playing the animation
Then it is True
So when does reloading end?
When InitAmmo
Is called and when the animation ends
Then if it is IsReloading as False
Then it is processed as reloading has been complete
If this becomes False then we can reload again
It's not only this
We can shoot like bang, bang
And we reload
And we cannot shoot during the reload animation
This will halt the reload
So only when the reload animation ends
Can Player shoot, let's make it so
So it's not just about here, we need to go to 'fire'
We need to make it do nothing when reloading at 'fire' too
So don't process if IsReloading
And when Pleyer lets go of the gun, it can't be reloading
So even when it drops the gun
When isReloading, this does not process
Let's add that part
So here
Even at Release
Let's make it not process
So when reloading, all these should not be possible
At releasePistol, when reloading
This should not occur
So when reload animation is playing
When Player drops the gun, it halts the animation
So we should only allow for the drop
Only after the animation is complete
So let's finish the build here and play
Press F, shot, and press R
Then you can't shot
Press R, and keep pressing R
But it doesn't overlap
It only reloads again when this is over
That's when we can shoot as well
So that concludes
The reload part
Let's summarize what we've learned today
Crosshair and Bullet UI Crosshair How to use Unreal Motion Graphics (UMG) to display UI How to create a MainUI C++ class of UserWidget type
Building Bullet UI UI is only visible when Player holds the gun
At UMG widget, use Univorm Grid Panel to add and remove Bullet UI Use MainUI C++ Class to control data of Widget Blueprint
Reload Reload Implementing input action creation and mapping for reload
To implement reloading, first remove all remaining bullet widgets and add new widgets
Implement logic to process animation when reloading using animation montage Use Notify event to update bullet UI according to animation timing
The End