Jason's [Not-So-Simple] Tutorial Series: Basic Blueprint Quest System (Part 1/1)

Introduction:

Welcome,

Several months ago I created a short tutorial for someone detailing how to create a simple player goal using blueprints.

Sometime after, I was contacted by user nancyclue to add onto that tutorial and create a full-fledged quest using blueprints.

It’s been a few weeks since I got that PM and well…better late than never I suppose.

Description:

In this tutorial you will learn how to create a simple quest that features a handful of enemies the player has to kill (kill X amount of enemies, get reward).

Just some things to take note of before we start:

  1. Each step is represented by both an image (the base images are at a resolution of 3840 x 2160, but, unfortunately they weren’t coming up well on the forums which means I had to downscale the images to 1080p which resulted in a loss of quality; if anyone knows how to properly place images on here let me know), description, and explanation. Although this is a simplified system, you may want to set aside a good hour or two in order to give you ample time to not only complete the quest system, but also understand it (which is really what this tutorial is about).

  2. Whenever a step requires the creation of something new, I usually put quotes around the name I chose; ensure you don’t try and use quotes when naming it in the Editor (in fact I don’t believe the Editor allows the use of quotes in names so don’t think you’re doing something wrong if you can’t use quotes).

NOTE: Sorry if that second statement seems oddly convoluted; I’d say ignore it, but your life my depend on it later.

  1. If an important term or name appears in one of the steps, I will bold it and continue to bold it throughout the tutorial. Additionally, I tend to highlight important aspects of images (drop down boxes, check boxes, etc. that you need to go into) so you’ll be able to witness my more Photoshop skills first hand!

4.** NOTES** (as you will see in several seconds) are placed throughout the tutorial; this serve as tips or to convey extra information.

  1. Focus less on the actual process and more on what is actually going on. Anyone can connect nodes on a Blueprint Graph, but if you understand what exactly those nodes are doing you’ll be one step ahead.

  2. Yes, you’re here to learn, but be sure to have fun as well! You’re starting (or continuing) your path of creating a game; enjoy it!

NOTE: For this tutorial I’m using UE4 version 4.10. If anything doesn’t show up in your version, or things aren’t working properly (or you don’t understand something) post a message in this thread or Private Message me.

[HR][/HR]

Alright, let’s get started!

Step 1:

First create two rooms connected by a hallway. I used Static Meshes in the “architecture” sub-folder of the “Start Content” folder. You can use anything you’d like to make the map, just be sure to keep to layout the same as in the tutorial as it will be much easier to follow. In the image, the rooms have a number associated

with them. I will be using this number to refer to the rooms. In Room 1 ensure you add a Trigger Box

NOTE: The trigger box should not encompass the entire room; it should only take up a small section

…and place a **Cylinder (or any static mesh) **in the center of the Trigger Box. Additionally, place a **Player Start **actor in Room 1 (and any Light Sources if need be). In **Room 2 **add a Trigger Box and this time make sure it is the size of the room (there’s no need to make it as tall). **DO NOT PLACE CYLINDERS IN

ROOM 2**; we’ll get to that later.

The Trigger Boxes that were placed will be used to communicate three different UI elements to the player’s HUD. The Cylinder is used as a stand-in for a Quest Giver. When the player steps within the bounds of the **Trigger Box **that surrounds the Cylinder, they will receive a message that tells them about the quest.

The player will then go to the quest area and the other Trigger Box will produce a Kill Counter on the player’s HUD. When the player kills all three enemies they will then be able to go back to the Cylinder and it will give them a congratulatory message. If players only kill one or two of the enemies, they will receive a

message telling them to go kill all three enemies.

Step 2:

Now go to the Content Browser and make a new folder (I named mine: Tut_SimpleQuest; I recommend using that name as I’ll be referring to the folder by that title). Within the Tut_SimpleQuest folder, make another folder and call it UMG_Widgets. In the UMG_Widgets folder Right Click, go to User Interface, and

click on Widget Blueprint. Name the Widget Blueprint: “HUD” (without the quotes).

This HUD widget will be the Kill Count that will be produced on the screen for the player to see. As the player kills an enemy, the counter increases by 1.

Step 3:

Double click the HUD widget and look at the left-hand side of the widget blueprint screen. Navigate through the Palette until you find a **Horizontal Box **(which is located under the Panel tab). Click and drag the **Horizontal Box **onto the Canvas (the grid). Rename the **Horizontal Box **“GoalTracker” by clicking on the

**Horizontal Box **in the **Hierarchy **panel and going to the right hand corner of the screen (in the Details panel). Go back into the Palette and find a Text string. Drag out two and ensure both are placed inside the GoalTracker by clicking and dragging them into while on the Canvas. Rename the first Text string

TargetsEliminated” and the other “TargetCount”. Now click on the TargetsEliminated string and navigate to the right hand side of the screen. Under the **Details **panel there is a Contents tab. In the Contents tab, navigate to where it says “text” and replace “Text Block” with “Targets Eliminated:”. Now go to TargetCount and replace “Text Block” with “0”.

**NOTE: I recommend clicking on the Horiztonal Box and move the White Star on the up left corner of the grid to the middle of the Horizontal Box. The White Star, which is actually an Anchor, will keep the text in a specific position (in this case the center of the screen). Alternatively, you can

click on the Horizontal Box, look to the right, and click the “Anchors” drop down menu**.

Now this was a mouthful! All we really did here was setup exactly what the Kill Counter will look like when it is placed on the player’s HUD.

Step 4:

Alright we’re actually going to need to do something else first. Go to the FirstPersonBP folder and find the First Person Character. Open it up and go to the Graph and on the right hand side of the screen you should see a tab labeled Variable. Next to the tab, there should be a Plus Sign. Click it and navigate to the

right hand side of the screen. Change the variable type to Integer and make sure Editable has a check mark next to it. Change the name of the Variable to “Target Kill Count”.

Creating the new Variable,** Target Kill Count**, was a huge step in this process. What this really does is give us a way to change the TargetCount text. A Variable in Blueprints acts just like a real-life mathematical variable; it can change its value to fit the equation. In this case it will take the place of the 0 text block we

created and switch that number to something else (1,2,…).

Step 5:

Alright now go back into the HUD widget. Click on the 0 and look at the right hand side of the screen where it says Text. Click on Bind and add a binding.

We’re using a Bind here to attach the Variable we previously created to the Text Block. With these two bound together, we can then use that to increase the Kill Counter’s numerical value by “1” each time an enemy is killed.

Step 6:

Create a Cast to First Person Character node and connect it to the Function (the purple node). Next, create a Get Player Controller node and connect it to the **Cast to First Person Character **node. As First Character (on the **Cast to FirstPersonCharacter **node) should be attached to the Target Kill Count

variable we made earlier. To do this, drag out a link from the **As First Person Character **port (by clicking and dragging) and in the search box type in Target Kill Count and choose Get Target Kill Count. Drag out the Get Target Kill Count node and connect it to the return node.

This process simply binds the 0 Text Block to the Variable, Target Kill Count and will increase the Variable by a value of 1 each time an enemy is killed.

Step 7:

Now go to Room 2 and select the **Trigger Box **there.

We’ll be using this Trigger Box to produce UI Elements (the Kill Counter) to the player’s HUD.

Step 8:

Look at the top of the screen and select Blueprints then Open Level Blueprint. Ensure that the Trigger Box is still selected!

Due to the Trigger Box being an Actor within the Level, we’ll need to communicate to the Level that once the Trigger Box is entered, something should happen.

Step 9:

Right click anywhere on the Graph and click the tab labelled **Add Event for Trigger Box X **(X being the number of the Trigger Box in Room 2). Then click the tab labelled Collision and finally, Add On Actor Begin Overlap. With the new node created, drag out a connection and in the search box look for **Create

Widget**. On the Create Widget node there is a small drop down menu next to Class; choose HUD (or whatever you named the UMG Widget that has the Kill Counter). Drag out a connection from the Return Value port on the **Create Widget **node and search for an Add to Viewport node.

All we did here is tell the level to bring up the Kill Counter on the player’s HUD when they enter the Mission Area, which is designated by the Trigger Box.

Step 10:

Next, go into Tut_SimpleQuest and make a new folder; label it “Enemy”. Right click in the folder and select New Blueprint Class; choose **Actor **when prompted. Name the Blueprint Class, “CylinderTarget”.

Here we are beginning the first steps to creating an enemy. When the enemy is shot by the player they will disappear and we will make it so the player’s Kill Counter is increased by a value of 1 each time an enemy is killed. The enemy is an Actor because it is a simple object in the Level; it cannot be “possessed” or

controlled by the player.

Step 11:

Double click the CylinderTarget Blueprint and look to the top left corner. Click Add Component; find and select a Cylinder. Then go to the Event Graph (the tab can be found directly above the viewport; below the bar with Compile, Save, etc.).

In this step we have added a model to our enemy.

Step 12:

Right click on the Graph and search for Event Hit. Drag out the first port and search for a Cast to FirstPersonCharacter node. From the Cast node’s Object port add a Get Player Character node. Drag out the As First Person Character port and search for Get Target Kill Count. Right click on the Graph and

search for a Set Target Kill Count node. Connect the Cast to FirstPersonCharacter to the Set Target Kill Count node. Search for an Integer + Integer node and connect the **Get Target Kill Count **node to the top port; on the bottom port type in the number 1. Connect to Integer + Integer node to the **Target Kill

Count** port on the Set Target Kill Count node. Navigate back to the Cast to FirstPersonCharacter node and attach the As First Person Character port to the **Target **port of the **Set Target Kill Count **node (both the **Get Target Kill Count **and Set Target Kill Count nodes should be connected to the **As First Person

Character** port). Lastly, drag out a port from the Set Target Kill Count node and search for a Destroy Actor Node.

I just want to take a step back here and explain why exactly we’ve used Cast to FirstPersonCharacter nodes in both this step and Step 5. Simply put, the **Variable **we need, Target Kill Count, is only present in the FirstPersonCharacter Blueprint. The Cast to FirstPersonCharacter node allows us to communicate

with the FirstPersonCharacter Blueprint and draw or use Variable from it. The Event Hit node tells the Actor to do something once another Actor touches it (whether it be the player or the player’s projectile). The **Get/Set Target Kill Count **nodes simply call upon the Variable; the Integer + Integer node is placed

in a position where it communicates with the Variable so that once the Actor is hit, the player’s Kill Count will increase by a value of 1. The reason the Get Target Kill Count node is attached to the top port of the Integer + Integer node is that we are using the value of Kill Count (Integer) and adding (+) the value in

the second port (Integer). The **Set Target Kill Count **node does exactly as the name suggest; it sets the Kill Count to be something (NOTE: I don’t necessarily mean that it’s setting it to a new value, more so that it’s setting it so that it knows to add a value of 1). When the object is hit, we want it to

disappear as if it was killed which is why the Destroy Actor node is used.

Step 13:

Now go into Room 2 and place three **CylinderTargets **there.

This is going to be out “mission area”.

Step 14:

Alright, we’re almost done; this is the final stretch. Go to Room 1 and click on the Trigger Box; create an **OnActorBeginOverlap **node in the Level Blueprint. Add a **Cast to FirstPersonCharacter **node and attach a **Get Player Character **node to the **Cast **node’s **Object **port. Drag out a line from the **As First Person

Character** port and search for Target Kill Count; choose **Get Target Kill Count **and drag that out and search for a Integer >= Integer node. Make sure the second port has a value of 3. Drag out a line from the port on the Integer >= Integer node and create a Branch node. Connect one **Create Widget **node to

True and another one to False. Ensure both have an **Add to Viewport **node attached to them as well.

NOTE: Do not add a widget to the Create Widget node, we still have to create out UMG Widgets for them.

Now, exit that screen and go back into your **Tut_SimpleQuest **folder. Make two new UMG Widgets, one entitled “TraderScreen” and another called “QuestGive”. In QuestGive, add a Text Box and change the text to: “Can you kill all three enemies?” In TraderScreen add a Text Box and change

the text to: Good job!

NOTE: Anchor these to the center of the screen!

Go back into your **Level Blueprint **and go to the **Create Widget **node attached to True; add **Trader Screen **as it’s Class. Place QuestGive as the Class for the False Create Widget node.

Lastly, create an OnActorEndOverlap node and attach a Destroy Widgets node to it.

NOTE: You’ll have noticed all of my Blueprint scripts have white boxes surrounding the nodes; this is called a “Comment”. Right click and search the name to find it. You can then add a title to the Comment to keep track of your work.

All we really did in this step is tell the Trigger Box that if the player killed less than 3 enemies, they wouldn’t get the congratulatory message. If 3 [or more] enemies were killed (indicated by the Integer >= Integer node) they will get the text. The Branch node looks to the **Integer >= Integer **node for guidance; if the

**Condition **(indicated by the red ports) is True (the Target Kill Count value is 3 or greater) the congratulatory text is shown, otherwise the player continues to get information about the quest.

The last aspect of the step deletes all widgets from the HUD when the player leaves the trader.

Step 15:

Click Play in Editor and notice how no Widgets appear onscreen.

This is because we are not in any Trigger Box.

Step 16:

If we walk up to the Cylinder in Room 1, text appears and it gives us a goal.

While approaching the Cylinder, we entered a Trigger Box which communicated with the Level Blueprint to draw a Widget to the HUD.

Step 17:

If we walk into Room 2, we’ll get the Kill Counter to appear.

This is due to walking into the Trigger Box in Room 2.

Step 18:

Shooting the CylinderTargets in Room 2 causes them to disappear and have the Kill Counter increase by a value of 1.

This is the working of the CylinderTarget Blueprint where we used an Event Hit node to start the process of it disappearing when shot, but not before increase our Kill Counter.

Step 19:

When we go back to the Cylinder (which represents a Trader or Quest Giver NPC), a new message appears; this one is congratulating us on our accomplishments.

The congratulatory text is a result of the Integer >= Integer and Branch nodes. Due to our Kill Count being 3, the Condition of the Branch node was made true.

Step 20:

Walking away from the Cylinder removes all Widgets from the HUD.

This happens because of the OnActorEndOverlap node; when the Actor walks out of the Trigger Box, the Destroy Widgets node is executed.

NOTE: Admittedly, Steps 14 – 19 should have been done while we were creating this stuff and then repeated at the end. For the sake of this tutorial, I just checked that everything was working once, but really you should be checking after you create something new.
[HR][/HR]

That about does it. I hope you all enjoyed this little adventure!

If you have any questions, comments, tutorial requests/tutorial update requests, or you just want to say, feel free to post in this thread or Private Message me at any time.

Oh, and please, some one remind me to make a video next time…

You’re still here?

The tutorial is finished! Go out and make a game!

~ Jason

Thanks! Excited to try this out :slight_smile:

Anytime.

~ Jason

thanks so much for taking the time to do this, I’m going to try this out when I have the time

No problem!

Let me know how it goes!

~ Jason

Just went through this and it was v quick and understandable! Thanks for all your help. This def helped me understand some things Ive been using in blueprints better and having this example will really help me understand how to create quests w my own specifications i think! :slight_smile:

I’m glad I could be of service.

Thanks for the kind words.

Let me know if you need anything else.

~ Jason

I’m glad it helped!

Let me know if you need any tutorials done.

~ Jason