Creating the Project

Let’s start by creating a project using the First Person Template. Open Epic Games Launcher and click the big yellow Launch button in the top-right corner. This starts Unreal Engine, and soon, you are greeted with the Unreal Project Browser window (see Figure 7-1).

Select Games and click Next. From the template selection screen, select the First Person template and click Next (see Figure 7-2).

In the Project Settings page, you set the initial settings for your project and the type (Blueprint or C++). Start with a C++ project and create Blueprints. Choose C++, set a location, name your project, and click Create Project. It’s important to remember that the files are named in this context: <ProjectName><ClassType>.h. In this example, I named the project Chapter07, so my files are named based on that—for example, Chapter07Character, Chapter07GameMode and so on (see Figure 7-3).

Once the project is created, Visual Studio automatically opens with the project’s solution file. Unreal Editor also starts. Press the Play button (or Alt+P) on the toolbar to test the FPS template. While playing, use the W key to move forward, S to move back, A to strafe left, D to strafe right, the mouse to look around, and left mouse button to shoot projectiles. The template also includes basic physics simulation, so that when you shoot any of the white boxes, it tumbles around (see Figure 7-4).

Ammo Setup

As you may have noticed, you can shoot the projectiles as much as you want. We need to change this. We need settings for the number of clips the weapon can have and the amount of ammo per clip. For example, if this weapon has 3 clips and 20 rounds of ammo per clip, then the maximum amount of ammo this weapon can have is 3 * 20 = 60. Every time you shoot 20 rounds of ammo, each clip is depleted. There is a two-second timeout before shooting the next clip. In a real project, this timeout is replaced by a reload animation. We will use variables to define the values so you can adjust everything without having to worry about the inner workings.

Press F5 to compile and start the project from Visual Studio. After the Editor has started, open FirstPersonCharacter Blueprint and the Construction Script graph.

Drag a wire from Construction Script’s output pin, search for Sequence node, and add it. The Sequence node is a special Blueprint node that allows you to run multiple outputs (you can add as many outputs as you want) from top to bottom. Add a Branch node and connect the first output of the Sequence node (with the label Then 0) to the Branch node.

You need to use the Branch node condition to ensure that Starting Clips is not greater than Max Clips. Drag and drop both Starting Clips and Max Clips from the My Blueprints tab to the Construction Script graph. Drag a pin from Starting Clips, search for the > symbol, and select integer > integer node (Starting Clips is now automatically connected to the first input of the > node). This node returns true if the first input is greater than the second input, so connect Max Clips to the second input of > (greater than) node and connect the red output to the Condition input of the Branch node.

To set the value for the Starting Clip node, press and hold the Alt key on your keyboard, and then drag and drop the Starting Clip node again from the Blueprints tab to the Construction Script graph. This creates the Set node for Starting Clips. Connect the True output of the Branch node to the Set node. Connect Max Clips as the new input for the Set Starting Clip node. The graph should like Figure 7-5.

The second step is to set the current ammo for this weapon. You need to set current ammo only if you have at least one clip to start with. So you first set Current Clips to Starting Clips and then check if Current Clips is greater than 0. If it is, then you set the Current Ammo to the same value as Ammo Per Clip. If Current Clips is 0, then Current Ammo is also 0. The second step of the graph should look like Figure 7-6.

Connect the Current Ammo node to the first input of the > node, and connect the red output of the > node to the Set Can Shoot node. The final graph should look like Figure 7-7.

You have now defined a basic logic for ammo and clips, so it’s time to make use of them.

Press F5 to compile and start the project from Visual Studio. Once the editor is started, open our FirstPersonCharacter Blueprint. Inside the Event Graph, right-click and search for On Fire Event. You can see the event that you declared in C++ is now accessible inside the Blueprint Graph (see Figure 7-8).

Select it and right-click again in the graph, search for Get Current Ammo and select it. Drag a wire from the Current Ammo and search for Decrement Int and select it. This macro node takes an integer, subtracts it by 1, sets the value, and returns it, so the output pin contains the result of Current Ammo – 1.

If the output node of Decrement Int is not 0, don’t do anything because the player can fire again. If it is 0, it means you ran out of ammo. To compare the results, right-click the graph, search for Compare Int, and add it. Then connect the Decrement Int node’s output to the first input (with label Input) of Compare Int.

This is also a macro that has three output nodes and two input nodes. The first input node is the value to compare, and the second input is the value to compare with. If the first input value is greater than the second input, the first output triggers. If the first input is the same as the second input, then the second output is triggered. If the first input is less than the second input, the third output is triggered.

In our case, you are interested in the second output (with label ==) so set the input named Compare With to 0. Right-click the graph and search for Set Can Shoot. Add it to the graph and set it to false. Connect the second output of Compare Int (with label ==) to Set Can Shoot node. If the player tries to shoot now, nothing happens because you just told the weapon that it can’t shoot once the current ammo is 0 (see Figure 7-9).

This is where you add the reload logic. Right-click the graph, search for Set Timer By Event, and select it. This node can trigger a given event after a set time, which is the reload time. The event is the reload event. Right-click the graph, search for Get Reload Time and select it. Connect it to the Time input of the Set Timer node. Then drag a wire from the red input of Event input of the Set Timer node and select Custom Event from the Add Event section (see Figure 7-10).

After the event is selected, rename it Reload (or any name you like) and connect the Can Shoot variable to the Set Timer By Event node (see Figure 7-11).

The Reload event is simple. In a nutshell, it is what is going to happen.

1. 1.

   Check if you have any clips left. If you have a clip, then decrement it by one and set Current Ammo to Ammo per clip.

    
2. 2.

   Enable or disable the Can Shoot variable based on Current Ammo (see Figure 7-12).

    

With the reload event done, you have finished our ammo setup. If you go back to viewport, press play, and start firing, you eventually run out of ammo, and it automatically reloads after 2 seconds. Once you run completely out of clips, you won’t be able to shoot the gun anymore.

From here, you move forward to implement a HUD and a pickup item. First, you create a basic HUD using Unreal Motion Graphics (UMG), which displays the amount of ammo you have. Then you move on to create an ammo pickup item that replenishes ammo.

Head over to the Content Browser, right-click and select Widget Blueprint from the User Interface category. You are prompted to rename the Blueprint. Let’s call it WBP_PlayerHUD (WBP is a short form of Widget BluePrint). Open it, and add a text block from the Common category in the bottom-right corner of the designer (see Figure 7-13).

Keep the text block selected. In the Details panel, set the name to AmmoText (or anything you want) and make sure Is Variable is selected (see Figure 7-14).

It is important to set Is Variable to true; otherwise, you can’t access it in the Event Graph. You can also expand the Anchors section and set Minimum and Maximum to 1. Now you can switch to the Graph tab (top-right corner) and create a new custom event by right-clicking inside the graph and selecting Add Custom Event… under the Add Event category. You call this new event UpdateAmmo and add two integer parameters. The first input is called CurrentAmmo, and the second input is called TotalAmmo. Since you enable Is Variable for AmmoText in the Designer tab, you can now drag and drop a reference to our text block from the My Blueprint tab. Drag a wire from the Ammo Text node and search for set text and select it. This node takes a Text input, so you create a formatted text using a special node. Right-click inside the graph, search for Format Text, and select that node. This node helps to build formatted text using curly braces {}.

Inside the Format input of the Format Text node, type {Current}/{Total} and press Enter. The node now updates itself with two new gray input (a.k.a. wildcard) called Current and Total, which can directly accept any node (see Figure 7-15).

Connect the current ammo of the UpdateAmmo event to the Current gray input and connect the Total Ammo of UpdateAmmo event to the Total gray input (see Figure 7-16).

Now all that is left is to call this event from our First Person Character Blueprint class. To do that, you first need to create this HUD in that class. Open the FirstPersonCharacter Blueprint class and find the Event BeginPlay node. This node is automatically called when the game starts for this actor.

If you are not using VR (virtual reality ), feel free to delete all the nodes connected to Event BeginPlay (for this tutorial, I’ll delete them since VR is not our focus). Right-click the graph, search for Create Widget, and select that node. This node creates a widget based on the class input, so click the Select class button (purple input) and select our previously created WBP_PlayerHUD class. Right-click the Return Value output of Create Widget node and select Promote to Variable. This is because you want to access this later when ammo is changed. To add this widget to the screen, drag a wire from the PlayerHUD node’s output, search for Add to Viewport, and select it (see Figure 7-17).

If you press Play (Alt+P) now, you can see the default text block (the one created in UMG designer) on the screen (see Figure 7-18).

Since you have to update the ammo whenever the game starts, you need to call the Update Ammo event in multiple places when you shoot and after reload. It’s better to create a function, so from the My Blueprint tab, create a new function and name it UpdateAmmo. Open this function graph, and drag and drop the PlayerHUD (select Get PlayerHUD in the context menu) variable into this graph. Drag a wire from the PlayerHUD variable and search for Update Ammo and select it. You made two inputs for that, so for the first input, connect the Current Ammo variable. For the second input, you need the total ammo.

Remember, at the beginning of this chapter, I showed you how to get total ammo count using the number of clips and Ammo per Clip. To get the total ammo, first drag and drop Current Clips into the graph. From this Current Clips node, drag a wire, search for multiply node, and select integer * integer. Now drag and drop Ammo Per Clip into the graph and connect it as the second input to the multiply node, and connect the multiply node to the second input of Update Ammo node (see Figure 7-19).

Now the only thing that remains is to call the function. You can drag and drop the function from the My Blueprints tab to the Event Graph. The first location where you call this function is at the end of the Begin Play execution chain (see Figure 7-20).

The second location is right after reducing the Current Ammo count in the InputAction Fire node (see Figure 7-21).

The third location is inside the Reload event. After setting the Can Shoot variable, call the Update Ammo function (see Figure 7-22).

If you press Play (Alt+P) now and shoot, you can see the ammo count updated correctly (see Figure 7-23).

Ammo Pickup

In Chapter 5, you learned how to create input keys and use tracing to detect an item in front of us. As an exercise, I want you to recreate that setup but with two differences.

1. 1.

   Instead of using MyItemTrace for the name, use ItemPickup.

    
2. 2.

   Set the start location of the trace to the world location of Sphere Component. Add this location to the multiply node and then connect the result to the Line Trace node’s End input (see Figure 7-24).

    

Right-click the graph, search for Input Action Trace, and select the Trace node. Connect the Trace node Pressed execution pin to the Line Trace By Channel node. You have the tracing setup done, for now, so let’s create our Replenish ammo function, which grants us a single clip.

Create a new function and call it ReplenishAmmo. This function has no inputs, but you create a boolean output, which determines if the ammo was successfully replenished. To create an output, select the function (either in My Blueprint tab or open function graph and select the purple node), and in the Details panel, click the plus button under the Outputs category. This creates a new Return node with a boolean output.

Rename the NewParam output to bReturnValue. This function is responsible for adding a new clip under Max Clips. First, drag and drop the Current Clips variable into the graph (select Get CurrentClips in the context menu). Drag a wire from this variable, search for less, and select integer < integer node. CurrentClips is now automatically connected to the first input of < node. Let’s drag and drop the MaxClips variable into the graph (select Get MaxClips in the context menu) and connect it to the second input of < node.

Create a Branch node and connect the output of < node to the Condition input of Branch input. If the current clips are less than max clips, the True output of the Branch node trigger drags a wire from Current Clips, search for Increment Int and select it. This is the same as Decrement Int except instead of subtracting by 1 this node add 1. Now drag and drop the Update Ammo function and connect it to the ++ node. After that, connect this to the Return node and make sure the return value is true. Right-click the graph, search for Add Return node and select it. Connect this to the Branch node’s False output and make sure it is set to False (see Figure 7-25).

Go to Content Browser, create a new Blueprint class (Actor based), and call it BP_AmmoPickup. This is our class that grants the player a single ammo clip and destroys itself. Open our newly created actor (BP_AmmoPickup) and create a new custom event. Let’s call it GiveAmmo and add a new input to this event, set the type to FirstPersonCharacter, and name it Character.

This input is our FirstPersonCharacter, so drag a wire from this input, search for Replenish Ammo and select it. Create a Branch node and connect the output of Replenish Ammo to this Branch node. Then right-click the graph, search for DestroyActor and select it. Connect the True output from the Branch node to the DestroyActor, and you are finished with this class (see Figure 7-26).

Even though you have done our functions and events, you aren’t using any of it yet, so let’s fix that. Let’s go back to the tracing setup. Create a new Branch node and connect the Return Value of Line Trace node to the Condition input of the Branch node. You only want to continue if the trace hits something.

Drag a wire from the Out Hit node and select Break Hit Result. Expand the Hit Result node by clicking the arrow button and drag a wire from the Hit actor pin. Search for Cast to BP_AmmoPickup node and select it. This is a handy node that tries to convert the given Object input to the respective type and triggers the first output if successful or Cast Failed if the conversion has failed.

Drag a wire from the output node labeled As BP Ammo Pickup and search for Give Ammo, which was the event you created. Select it, and you can see that it requires an input that should be the First Person Character class. Since you use the trace inside the First Person Character, right-click the graph and search for self and select Get a reference to self. The Self node outputs a reference to an instance of this Blueprint, so connect it to the Give Ammo input (see Figure 7-27).

And you are done! Drag and drop the BP_AmmoPickup class into the game world and press Play (Alt+P). Keep shooting until you run out of ammo. And then go near an ammo pickup item in the world and press E to trace and pick up the item.

Package Game

The packaging game is a straightforward process. Packaging is the process of compiling and cooking the content in an optimized way for the target platform it is meant to run. When the packaging command is invoked, all the source code (if any) is compiled first. If the compilation is successful, then all the contents (Blueprints, Meshes, Textures, Materials, and so on) are converted (also known as cooking) into a special format that can be used by the target platform. Unreal Engine supports a wide variety of platforms, and from a Windows machine, you can compile and package for any platform except Apple Mac.

Each platform has its own settings that you can override. To do so, click Edit from the toolbar and select Project Settings (see Figure 7-28).

In Project Settings, on the right-side panel, scroll down until you reach the Platforms category. From this category, you can select your desired platform and override any settings (see Figure 7-29).

To package your project, open Packaging Settings from File menu ➤ Package Project ➤ Packaging Settings (see Figure 7-30).

This opens the settings for packaging. In the settings window, under the Project category, switch the Build Configuration to Shipping and make sure the Full Rebuild and For Distribution checkboxes are turned on (see Figure 7-31).

Once you verify these settings, click File Menu again and select Windows (64-bit) from the Package Project menu. If this is the first time, Unreal Engine now prompts you to choose a location to save the packaged build. Navigate to your desired location and click Select Folder. Unreal Engine now starts packaging your build, and you see a toast notification on the button right corner of your screen (see Figure 7-32).

You can click the Show Output Log on the Toast notification to see the build process.