Game Advanced Alpha version 3
Hello, everyone?
This is Kim Hyunjin of FPS game development
In this lecture, we will
change the exterior of the player using Asset Store
and apply the animation
Also, develop the enemy physical strength UI
Implement so that it can be represented according to the physical strength
The damage UI for when the player is damaged
will be developed and applied
Application of Player Model and Animation
Application of player model
This time, the model of the player
will be applied
I will go into the Asset Store
Select Window menu from the upper editor menu
Choose Asset Store
Press the search online button
then Asset Store will open up
Search for soldier in the search engine
Then, filter the price into Free
Then, the first thing that pops up is
Low Poly Soldiers Demo asset
Select the asset
And press the 'add to my asset' button
Press confirm
Select 'open from unity'
Select 'open from unity editor'
In the package manager
If Low Poly Soldiers Demo has been selected
Please download it
Then press the import button
When the window pops up, press the import button in the bottom
Add it
If it has been added, close the package manager window
Activate the scene window
Below the asset folder
A folder called Low Poly Soldiers Demo
has been created
If you go into the Models folder
There is a file called Soldiers Demo
This file should be
dragged and dropped into the player
For this asset, the material needs to be modified
Looking into the folder, there is a Materials folder
Double click on the material folder
to go in and
The files with blue icon
The two files need to be selected
In the upper left menu, Edit menu
And then at the bottom, Rendering
Next, Materials
Covert Selected Built in Materials to URP
Please select this menu
And click on the Proceed button
Now, I will eliminate the capsule
After selecting player game object
Deactivate the Mesh Renderer component from the Inspector
Then to show that it is the front side
I have made the eye with a cube
But I will erase the eye
And this soldier model
is slightly up in the air
After selecting soldier game object
In the Inspector
I will set the y value of the position into -1
Compared to the zombie, the size
feels a little bigger
The scale value will be modified into
about 0.7
Like the Enemy zombie, the player
has been modified into a
human exterior instead of a capsule
Player animation
Now, the animation of the player
will be applied
In the Low Poly Soldiers Demo
There is an animation folder
Over here, there are 3 animations
which are called Idle, Run, and Shoot
I will try to apply these animations
After selecting the Animations folder in the Assets folder
I will create an Animator Controller
after pressing the + button in the project
I will select the Animator Controller menu in the middle
I will name this as SoldiersAnim
At first, the basic action
demo_combat_idle animation
will be added by dragging
It is automatically connected in the Entry
Then the SoldiersAnim file that has just been created
that has been added below the player
and attached to the soldier demo game object
which is the Animator component
I will put it into the Controller attribute
Drag and then drop
And then when moving with wasd key
walking animation
running animation should be operated, right?
Below the Low Poly Soldiers Demo folder
below the animation folder
demo combat run animation
should be put on to the Animator to be proceeded
But this time, we will use Blend tree
to apply the idle and run animation
The animations that has been put on
Please erase everything
Press the right button of the mouse on to an empty space
In the Create State menu
bring over the mouse
select thee From new Blend tree menu
Let's name it Locomotion
I will double click on the Blend tree that has been added
Then there is a node like so
And a Parameter has been made
I will select this Blend tree node
If I look at the Inspector
there is a button to add a motion
I will press on the + to select Add Motion Field
Also, I will add another one
+ Add Motion Field
For the first motion, I will put in the demo combat idle
If I expand the file
There is a triangle shaped file, right?
Drag the file to put it in
For the second motion, expand the demo combat run
The triangle shaped file will be
dragged and put into
Then it will naturally become connected
This Blend tree, according to the parameter value
plays the role of deciding whether to do Idle animation
of the Run animation
For now, if this Parameter called Blend
is close to 0, then it will be Idle
If it is close to 1, it will be Run
That is how it is set
Select the Blend tree
and in the area on the right where we added the motion
The value is set with Treeshold
0 for Idle and 1 for Run
Then let's take a look with the preview
If you look at the bottom of the Inspector
this soldier is maintaining the basic steps
Then there is a play button over here
For those who can't see the screen
it will be covered like so
It's over here in the bottom
you can either click on this
or drag it up
If you click it, this is how it's turned out
If we play it
It is staying still as if breathing
In the Animator window on the left
this Blend Parameter value
will be dragged and modified
Then what happens when it gets closer to 1?
It shows the action of running, right?
What if we bring it over to the middle?
It shows the walking animation
This is because
Idle animation and Run animation is
mixed half and half
So using these functions
we can make the model take the action of walking
So when it is staying still
we will set the 0 value over here
to make sure it doesn't move
once it starts to move
Change this value to 1
to modify it into take moving actions
Change it to a running model
Instead of choosing the Parameter value as Blend
I will change it to another one
If I click it slightly once more
I can change the name of it
I will say it is MoveMotion
Then automatically, the name below the Blend tree changes
The Parameter name on the Inspector will change as well
Now, based on how it is moving
the MoveMotion Parameter value
will be modified
Open PlayerMove script
I will receive the Animator as a global variable
Animator variable
Declare the Animator which is a data type
I will name it anim
When starting, bring the animation component
Hey anim, I will insert the value over here
We have to use GetComponentinChildren
The component we will bring is
We will bring the Animator component
Let's move over to Update function
whether it is moving or not
they way to tell this apart is
through this dir
If we don't press the wasd key
the h and v value is 0
So at first, the dir value will be 0,0,0
That means the length of the dir is 0, right?
It means that it is not moving
The h has become a 1
Then the length is not 0 anymore
That is why we can define that
it is moving
Through the length of dir
let's modify the MoveMotion value
Hey anim, out of the functions you have
there is a function called SetFloat
The reason why we are using float this time is
When we create Blend tree
This Parameter value has been made
This Parameter value is equal to
what is created from Float, by pressing the + button
So in order for this MoveMotion to be modified
which is a Parameter value
We have to utilize what the Animator has
which is a function called SetFloat
Open up brackets and the first argument value
can use the Parameter name
MoveMotion
And the second argument value
The Float value can be written
which is named as the particular Parameter
Now, we can insert the length of the dir
Hey dir, out of what you have
a value called Magnitude
has the length of the dir
Save it and come back to the editor
and we will play it
It is standing still
It is doing the Idle animation
I will press w to move forward
Then we can see it doing the jumping animation
I will explain a new function
When we want to place this gam object
in the middle of the scene window
We utilized a function called Object Focusing
If we double click in the Hierarchy window, it moves forward
But if we move at this moment
then it disappears
This time, after selecting the player game object
When we press on f while pressing the shift key
I will try to move around
then the scene window will place the player in the center
and move along as well
So if I press the wasd key
The running animation will operate
If I let go of the key, you can see that
the Idle animation will be operated
Now, I will try to adjust the location of the camera
The CamPosition is on top of the head
so the camera will move to the location
and follow the player around
After selecting the CamPosition game object
I will try to place it in front of the eye
Now I will play it
You can see the gun when standing still, right?
I will tilt the head down
I tried to tilt down to see more of the gun
The close part of the gun looks like a knife
as if it has been cut
When the camera is selected
the area where the camera can see is marked
with this white line
This is called a truncated cone
You have to be inside this area
in order to see it
But in this location of the camera
This area, to the direction of the blue axis is empty
If an object comes into this area
it can't be seen
So that is why this part
looks as if it has been cut with a knife
Therefore, from the location of the camera
I will make sure that the area that is seen will be close
For this option, it is below the
camera component of the camera game object
Below the Projection option
Over here on the bottom, the Clipping Plane's
value called Near should be minimized
If I put the mouse on the Near
In the left and right of the mouse point
You can see the triangle shaped icon, right?
Click the left of the mouse while in the same condition
The value will change when it is pulled to the left
0.01 is the minimum value
How did it turn out once I modified it?
The part where it looked like it was cut off
looks normal
from what we see
Currently, we changed to play mode so
We have to stop and modify the value again
Stop and the Clipping Plane's
Near value should be altered to 0.01
Now the gun shooting animation
will be applied
Open up the Animator window
If you can see the Locomotion Blend tree screen
Select the Base Layer part
and come over to the upper layer
Over here, from what we have downloaded
Below the Low Poly Soldiers Demo folder
under the animation folder
The demo combat shoot
should be dragged and pulled upwards
The name of the animation
will be Attack
and this animation
will be connected from Any State
Press the right mouse button in Any State
Operate Make Transition
and connect to Attack
Then in order for the Attack animation
to be executed
I will add a trigger Parameter
Press the + button to select the trigger
and I will name it Attack
Next, to get to the Attack animation
I will select a transition and
Press the Condition + button from the Inspector
and modify it to Attack
And once this Attack is over
automatically Locomotion
to be able to operate Idle and Run animation
It will be connected to Blend tree
Press the right mouse button in Attack
Operate Make Transition
and connect to Locomotion
this transition does not need Condition
It will pass over once it is finished
And open up PlayerFire script
Animator component is needed in this case as well
So the variable to hold the Animator
Animator variable
The data type called Animator
We could receive the anim once it is started, right?
We receive it through anim=GetComponentinChildren function
What component?
The Animator component
and coming down to the bottom
come to FireRay function and
press on the left mouse button
to operate the gun shooting animation
Only in situations where we have bumped into something
should we operate the gun shooting animation?
Not at all
Although the gun might not shoot an object
Even though it might shoot in the air
the bullets will be fired
So when pressing the left mouse button
Let's check
If the MoveMotion value is
bigger than 0, let's exit from the function
What does this mean?
We will set it so that it cannot shoot when moving
It will be set so that it can only shoot when paused
If the MoveMotion is 0
It will continue with the bottom
If it does not move on
Let's operate the Attack trigger
if hey anim
There is a function called GetFloat
When we set the value of the Parameter
We used SetFloat, right?
In order to know what the value is
We can utilize GetFloat
Open the brackets and over here
Write down the name of the Parameter
MoveMotion
If that value is bigger than 0
Exit the function, return
If this condition is not satisfied
then it will execute the bottom part
Let's operate the Attack trigger
Hey anim, out of what you have
Using the SetTrigger function
Let's operate the trigger
What trigger?
The trigger called Attack
Save it and come back to the editor
and play it
Let's shoot it, bang
The gun shooting animation is being operated
Like so, in the play
we have applied the animation
Let's quickly go over one more
What we expressed with a red dot
the Crosshair, by downloading the image
we will change the shape of it
If you access the URL on the sceen
It will go to this page
Over here, the Crosshair.png file
download by pressing the right key
and there is the White.png file
Clicking on the right key, this file can also
be downloaded
If the download has been finished
In the Materials folder of the Assets folder
I will add two files by dragging
Select the files that have been downloaded
Drag and drop on to it
You can see that it is being added like so
Over here, the Crosshair file
In the Hierarchy window below the Canvas
attached to a game object called Crosshair
in the image component
I will add to the source image
But if we try to insert by dragging it
It won't be inserted
We need to convert the file into Sprite form
Select the Crosshair file
In the Inspector, the texture type is
currently set to default
Click this part
and open up the menu
Over here, select Sprite 2D and UI
as an option
and if you scroll down over here
There is an Apply button at the bottom right corner
You have to click on the button
And then below the Canvas
Select the Crosshair game object once again
Drag the Crosshair file that
we have converted into a Sprite form
If we insert it
We can see that it fits perfectly
But this screen is difficult to see
It is because of its small size
If you look below the image component
There is the Set Negative Size
If you click that button
The size of the image will be set to its original size
As you can see from here
It doesn't show up in green
but it is in a darker color
That is because the image and the color value below
has been combined
So this red color
has to be selected and converted to white
Physical strength UI and Damage UI Development
Physical strength UI development
This time, the enemy physical strength UI
will be developed
The enemy physical strength will be on top of the zombie's head
It will be represented with an image
that is colored in red
So depending on the physical strength, the red gauge
will be developed to decrease
This physical strength UI
shouldn't be developed into a UI that is attached to the screen
But should be made into a UI that is
able to be located in the 3D space
So I will create a Canvas
Press the + button from the Hierarchy
and select the Canvas of the UI
The added Canvas will be
named as EnemyHPBar
And there will be a Canvas component in the Inspector
There is a Render Mode option
It is set in the option called screen space overlay
Like the Crosshair, it is an option that
allows the UI of the screen
to be shown
But I mentioned that it will be changed so that
it can be shown as a 3D space, right?
So click the menu
and change the option to World Space
Then, this Canvas and
the UIs that are attached below this Canvas
will be able to be located in the world space
I will attach one more image over here
Press the + button and select an image for the UI
I will name it as Back
And the Rect Transform's
Pos x and Pos y value will be 0
Now this EnemyHPBar will be
dragged to the Enemy game object
and made into a child like so
Then in the EnemyHPBar Rect Transform
position x,y,z will all be
set to 0,0,0
The image will be this large
and shown in the location of the Enemy
This is because it is too big
Below the EnemyHPBar
select the Back game project
The width and height of the Rect Transform
set the Width to 1
The Height will be 0.3
Then this will be the size
This UI will need to be moved up a little higher
Select the EnemyHPBar
and lift it up
Select the Back game object
Copy it by pressing Ctrl+D
It will be created
in the same size and same location
I will change the name of it
Let's name it as HPBar
Over here, in the source image
this White will be inserted
In the source image option that is in image component
in order to insert the image
I have mentioned that the image will need to be converted
into a type called Sprite, right?
So after selecting the White file
From the Inspector, the texture type will be
converted to Sprite
And in the bottom
Pressing the Apply button is a necessity
Apply
And then select the HPBar game object again
Below the image component
I will drag the source image and attach it
When the source image is inserted
An option called image type will be created
Currently, it is set as simple
We will click this and
change it into a Fill option
Then options like Fill Method, Fill Origin
Fill amounts etc will be created
Let's take a look at the basic setting
It is set to Radial 360
And the Origin is set as Bottom
The Fill Amount is set to 1
Looking at it from the back side
I will try to reduce the Fill Amount
Nothing looks like it has been changed
It is because the Back and the HPBar
is in the same color
So after selecting HPBar
We need to change the color value to red
Then I will reduce the Fill Amount once again
Then 360 degrees from the bottom
The red has been eliminate, right?
If it is set as 1, more and more
we can see that it gets filled up
I will change the Radial 360 into Vertical
And then if I control the Fill Amount once more
It will reduce from the top to the bottom
and gets filled up from the bottom to the top
Now, what would happen if this set as Bottom
is changed to Top
It reduces from the bottom to the top
and gets filled up from the top to the bottom
We will operate with these actions left and right
That's why the Fill Method
needs to be set to Horizontal
so that it would be filled up from the left to the right
and be reduced from the right to the left
The Fill Origin will still be set as Left
So it will reduce like so
and also be filled up like so
Now, if the player
has hit the zombie with the left button of the mouse
Using this image component
that the HPBar game object has
By reducing the Fill Amount value that image component has
the Hp reduces
can be expressed visually
The PlayerFire script
Double click to open it up again
When the left button of the mouse is pressed
and it hit the enemy
bring the EnemyFSM component and
Out of what FSM component has
operate the function called HitEnemy
and it passes over the damage value
So looking at the HitEnemy function
of the EnemyFSM
It is reducing the current HP value
Using this value
the UI that has just been created
the Fill Amount value in the image will be altered
The current HP value
will be altered to a value in between 0 and 1
The altered value is set as
the Fill Amount of HP UI
In order to set the value of the UI
we need an image component
So we will create a global variable on the top
HPBar Image
The Public data type should be the image
There are three names with the word image
For this case, the image that is in
UnityEngine.UI should be utilized
It should be added like so
Then automatically on the top
you can see that UnityEngine.UI has been added
The code should be added
And we will name it as hpbar
After finishing the code
we will drag and drop to the variable in order to add
Coming back to the bottom
We arrive at the HitEnemy function
The value that is currently in CurrHP value
will be altered to a value in between 0 and 1
The maximum value of the current CurrHP will be 100
We have inserted 100 after creating a variable called MaxHP
When starting, in the CurrHP value
we have inserted this value
That is why the minimum value of the CurrHP is 0
And the maximum value will be 100
We should make the minimum value into 0
and the maximum value into 1
So what should we do with this value?
It needs to be inserted in Fill Amount
Let's say the CurrHP has been set as 50
Then, to make the value in between 0 and 1
The value should be 0.5
In order to do this calculation
CurrHP should be divided by
the MaxHP value
Since MaxHP is 100
If the current HP is 50
What happens?
A value called 0.5 will come up
What if this value is 0?
0 comes up
and what happens if this value is 100?
Then it will be 1
So with the divided value
We will change the value to in between 0 and 1
float Ratio is CurrHP divided by MaxHP
This value is HPBar
It means the Fill Amount value that you have
will be set as Ratio
Save it and come back to the editor
Select Enemy game object and
in the HPBar option of EnemyFSM
The HPBar game object that we have added
should be dragged and inserted
then we will play it
As you can see, if we shoot
you can see the HPBar decreasing
But there is one odd part
I will play and
stand next to the zombie
Then you can't see the HPBar clearly
If I shoot, the HPBar reduces
but you can't see it clearly in the game window
So, UI like this
It should look in the direction that
the player is currently looking into
I will try to change it manually
Select EnemyHPBar and
I will try to rotate it
It will turn out to be in this shape
And if the player moves like so
What should we do again?
EnemyHPBar should rotate like so
In order to make the EnemyHPBar move like so
The direction that the camera is currently looking into, must be this way
If this direction and the EnemyHPBar's
front direction is identical
The HPBar will maintain to be seen in the
direction that the player is looking at
This operating function is called Billboard
I will make a script and apply it
Select the script folder and
Press the + button to create C#Script
I will name it as Billboard
I will insert into the EnemyHPBar by drag and drop
Make sure to check that it has been assembled
Then open up the Billboard script
For this case, just set my front direction
as the front direction of the camera
My front camera
will be set as the front direction of the camera
Hey transform, the Forward value that you have
What should it be set to?
Hey maincamera
It will be set as the forward value of your transform
This one line will finish everything
I will play it again
then depending on the movement of the player
The viewpoint of the camera will change
So the HPBar above the enemy
can be seen rotating
So, the HPBar will be seen clearly in any situation
Now when the player has been
attacked by the enemy
I will develop a damage UI
that makes the screen flicker in red
Select Canvas game object
Press the + button in the Hierarchy
I will add an image in the UI
I will name it Hit
and this image
will be covered by the whole screen
In the Inspector window, below the Rect Transform
If you click on the icon that is shown with Center and Middle
An Anchor Presets window will pop up like so
While pressing the Alt key
If you select the icon on the bottom right side
It will change to an image
that will fit the whole screen
So the color value of the image component
will be set to red
And out of the RGBA color attribute, A
alpha value, transparency
The transparency will be changed to 100
So this UI will be turned off at first
When the Enemy has attacked the player
it will turn on and off
Again, turned on and off
It will take actions like this
After you have opened up PlayerMove script
I will create a function at the bottom
When the Enemy has attacked the Player
the function that is invoked will be created
public void Damage Action
In this function, the Coroutine function will be executed
And below, the Coroutine function will be created
For Coroutine value, the return value has to be
IEnumerator
And you can write the name of the function
PlayHitEffect
First, activate damage UI
and then wait for 0.3 seconds
And then deactivate damage UI again
In order to activate this damage UI
We need a variable that has the damage UI
I will create it on the top
Damage UI variable
Public Game Object HitEffect
I will finish the code and move over to Edit
to do the setting
Hey HitEffect, out of the function you have
SetActive function can be used to activate
In the brackets, if you insert true
It will be activated
And then wait for 0.3 seconds
Over here, use values like yield return new waitforseconds
Open up brackets and insert 0.3
And if you use yield return
General process
It will yield to the general system
So it will wait for this amount of time
Then after 0.3 seconds have passed from the general settings
Come back to the Coroutine function
and proceed with the next step
So the function that HitEffect has
Through SetActive function
insert false
In Coroutine function
we need at least one yield return
We must have it at least once
So in DamageAction function
this Coroutine function will be operated
Just like operating general function
PlayHitEffect and
semicolon isn't how you operate it
The Coroutine function must
be activated through
a function called StartCoroutine
So write StartCoroutine and open up brackets
And then PlayHitEffect function
must be operated and inserted
You must follow this progess
for the Coroutine function to operate normally
When the Enemy has attacked
the DamageAction function must be operated
Come to EnemyFSM
If you look at the end, there is AttackAction
Erase the attack written in Korean
Let's bring PlayerMove component
From the component that has been brought
Execute DamageAction function
The PlayerMove component
can be brought over using the player transform
Hey player, out of the functions you have
utilize GetComponent function
to bring PlayerMove
GetComponent will find the PlayerMove
and throw it to the front
So let's create a variable that will receive it
Using the data type called PlayerMove
I will name it as pm
So hey pm, out of the functions you have
Please execute the function called DamageAction
Save it
and come back to the editor
Select the Player game object
In the HitEffect of PlayerMove
Below the canvas that we have added
Drag the Hit game object
and insert it
Then we will play it
If you approach close and get attacked
The red UI will flicker on and off like so
You can see that it is flickering on and off
For the next lecture
I will modify the name that is set as sample scene
Below the Assets folder
Select the scenes folder
There will be a SampleScene file
Press the F2 key
set into name changing mode
I will name it as MainScene
Then after selecting Env game object
Please press Bake
Then below the scene folder
a main scene folder will appear
A navigation data will be created in this folder
So erase the SampleScene folder that existed originally
Now, we will do an overview of this lecture
Overview Player model and animation application Player model Window Asset Store Search online Deactivate the Mesh Renderer component of the Player
Hide the basic shapes, adjust the transform position and scale value Player Idle, Move animation Blend tree that decides the animation condition based on the parameter
Click the right button of the mouse in the empty area of the Animator Click on Create State From new Blend tree to create new node
Add two motions, demo combat idle file for the first motion Drag and drop demo combat run file in the second motion
Modify the Blend parameter value to MoveMotion and write code to express delay,move, run Bring over Animator component
anim= GetComponentInChildren Animater; Use dir length to alter MoveMotion value anim.SetFloat MoveMotion,dir
Player model and animation application Player Shoot animation Click and drag demo combat shoot file in the Animator window to create Attack node
Connect to Any State Node since it is operated regardless of Enemy's condition Write trigger operating code based on the transition connecting situation from Attack node to LocoMotion node
Physical strength UI and Damage UI Development Physical strength UI Red gauge of the UI decreases depending on the Enemy's physical strength Locate in World Space for it to be in a 3D space
Select Hierarchy + UI Canvas to create EnemyHPBar game object and transfer to Enemy object's child
Select Hierarchy + UI Image to create Back game object Copy Back game object as well as drag and drop to HPBar object source image
Modify Image Type to Field and adjust the attribute of Fill Amount, Fill Method, Fill Origin Alter the current HP value to in between 0 and 1
float retio=currHP maxHP; The modified value is set to HP UI's fillAmount value hpBar.fillAmount = ratio;
Billboard The sight direction of the camera and the front direction of HP Bar needs to be synchronized transform.forward=Camera.main.transform.forward;
Physical strength UI and Damage UI development Damage UI UI that is showed when the player is attacked by the Enemy Select Canvas object and choose Hierarchy + UI image
adjust to full screen size in Anchor Presets option Write code so that it will flicker on and off when the player is being attacked
Damage UI Variable public GameObject hitEffect; Coroutine function with a return value called Enumerator Ienumerator PlayHitEffect
Activate damage UI hitEffect.SetActive true; Waits for 0.3 seconds yield return new WaitForSeconds 0.3f;
Damage UI Deactivation hitEffect.SetActive false; Execute EamageAction function when the Enemy has attacked