Basic-Timer.mp4

Adding a Count Down timer.

Double-click on the FirstPersonGameMode.   It is in your Blueprints folder.  The Blueprint will open up. Create the following nodes.

Right-click on the work area and choose Event Tick > Delay > Branch   Click on the duration on the Delay Node and change the duration to 1 second for the delay

Create a seconds variable.  Under My Blueprint > Variables, press the plus (+) sign next to Variables tab, then add new variable button and name it Seconds.  Change variable type to Integer.

Create a minutes variable. Press the add new variable button again and name it Minutes.  Change variable type to Integer.  Then Compile & SAVE.

Once you compile, the default Value will show up.  Change the seconds to 13.  The will pre-set the time to 13 seconds 

Select the Minutes variable and change the seconds to 13.  The will pre-set the time to 0 minute.  Setting both variables will default the count time timer to 0 Minutes 13 Seconds.    Leave the Minutes to 0 just for initial testing.

Drag out Seconds and choose Get Seconds.

Drag the output of the variable and choose  == node (Equal Integer).  

Drag the output of the  == node to the Condition of the Branch node.    It says if the Seconds variable is = to 0 then you can perform a task if  True or False.

Drag out another Seconds node and choose Get Seconds again.  Drag the output of the new Seconds Node, search for SUB (subtraction node) and choose   

From the Branch Node, drag the False output out and choose Set Seconds.

Drag the output of the Subtract - node to the Seconds input of the Set Node.  What this does is if the Seconds variable is not set to 0, subtract 1 from the Seconds variable.

Close up . . .

Drag out Minutes and choose Get Minutes.

Drag the output of the variable and choose  == node (Equal Integer).  

Right-click on the on the workspace and choose Branch.  Drag the output of the  == node to the Condition of the Branch node.    

Drag out another Minutes variable and choose Get Minutes again.  Drag the output of the new Minutes Variable Node, search for SUB (subtraction node) and choose   

From the 'new' Branch Node, drag the False output out and choose Set Seconds.  Change Seconds  under the Set Node to 59.

Drag the output of the 'new' Subtract - node on to the workspace and choose Set Minutes.  

Drag the Output of Set Seconds to the Input of the Set Minutes

Drag the True Output of Branch  to the Input of the 'New' Branch

Compile and save.  The Close the Blueprint Editor.

Right-Click in the Content Browser.  Choose User Interface > Widget Blueprint

Rename it to GameOver

Double-Click on the GameOver Blueprint and the GameOver interface designer will open.

*You may have to resize the button.

Search for canvas panel

Drag the Canvas Panel out on tpo the workspace

Attention: You need to add a canvas to the work area.  Search for Canvas and drag out.

Select the Button again. Then change Background Color.

With the button still selected, scroll down on the Details and press the + sign On Clicked.

The Graph Editor will open.  Drag the output of the On Clicked node to the work area and choose Open Level (by Name) and change the level name to what ever your game level is called.  In this case, it is Hit_Test-Timer.

Compile and Save.  

Then switch back to Designer Mode.

Add a Horizontal Box and fit it to the center of the screen.  Type "Horizontal Box" in the search palette

Drag Text into the Horizontal Box, Change the text to Game Over!  Then color it, scale it,  and center it.  

Drag out the Background  Blur box and scale it to match the Game over Box.  Then change the strength to something greater than 10.

Change ZOrder to -2

Compile, Save & Close Graph Editor.  

Double-Click on the TargetScoreHUD

Drag the Horizontal  Box used by the score across the HUD window.

It should look like his

This part can be a bit confusing . . . So take your time.  

Switch to the Graph

Switch to the Event Graph

From the Event Construct drag the output onto the work area and search for Get All Actors of Class.  

Select the Dropdown menu from the Get All Actors of Class.  

From the Actor Class of the Get All Actors of Class node, search for FirstPersonGameMode and choose.  

Then from the Out Actors output of the  Get All Actors of Class drag out onto the work area and search for Get ( a copy) and choose.  

Then from the output of the Get (Copy) drag out onto the work area and search for Promote to Variable and choose.  

Drag the top Output of Get All Actors of Class to the top  input of the SET node.  Then select the Set node and under the Details tab change the new variable Name to FirstPersonShooter_REF and verify that the variable type is  First Person Game Mode.  If not delete the nodes and start over from the Event Construct node.

Compile and Save

In your Blueprint Folder, Double-Click on the TargetScoreHUD  

Content > FirstPersonBP > Blueprints

Select the first set of 00 labeled Minutes, press Bind & Create Binding next to the Text

Switch to the Function Tab

From the Variables list, drag the FirstPersonShooter_REF out to the work area and choose Get FirstPersonShooter_REF 

It should look like this . . .

Drag the output of the FirstPersonShooter REF to the work area, search for Get Minutes node and choose.  

Drag the output of the Get Minutes node to the Return Value of the Return Node and a ToText (integer) will be created. 

This will create a new node that converts the integer to a text value.

Change the Min & Max value to 2.  This will limit the variable to 2 digits like a timer has.

Compile, Save, and Close the Graph Editor

Repeat the same steps as before, but make sure you "Get Seconds" this time.

In your Blueprint Folder, Double-Click on the TargetScoreHUD  

Content > FirstPersonBP > Blueprints

Now we will repeat the binding for the seconds variable.

Select the Seconds set of 00 labeled Seconds, press Bind & Create Binding next to the Text

From the Variables list, drag the FirstPersonShooter_REF out to the work area and choose Get FirstPersonShooter_REF 

Drag the output of the FirstPersonShooter REF to the work area, search for Get Seconds node and choose.  

Drag the output of the Get Seconds node to the Return Value of the Return Node and a ToText (integer) will be created. 

This will create a new node that converts the integer to a text value.

Change the Min & Max value to 2.  This will limit the variable to 2 digits like a timer has.

Compile, Save, and Close the Graph Editor

In your Blueprint Folder, Double-Click on the FirstPersonGameMode  

Content > FirstPersonBP > Blueprints

It should look like this . . .

Drag True From the upper Branch Node out on to the work area, Search for Create Widget and choose.

In the Create Game Over Widget, under the Class drop down menu, change the Class to Game Over

From the Create Game Over Widget, drag the output to the work area, search for Add to Viewport and choose.

From the Create Game Over Widget node, drag the Return Value  to the Target of the Add to Viewport node.

From the Add to Viewport node, drag the output to the work area, Uncheck Content Sensitive, then search for Set Show Mouse Cursor and choose. 

On the Set node, make sure you to Check Show Mouse Cursor

From the Set node, drag the Target Input to the work area, search for Get Player Controller, and Choose.

From the Set node, drag the Output to the work area, search for Set Game Paused, and Choose.

Compile,  Save, and Close Blueprint Editor

Under the Blueprints menu choose Open Level Blueprint

Confirm that at Event BeginPlay it is adding the HUD widget to the viewport.

Compile & Save

And now try it out!!!

I noticed that the score was hidden once the game was over, so I had to fix it.

Open the Level Blueprint,

Change the ZOrder of the TargetScore_HUD to 1, this will move the TargetScore_HUD above the GameOver_HUD