Hello, in this post I will be sharing my experience with attempting to design a note reading system in Unreal Engine 4. I have not fully completed that system yet but I will talk about the progress I have made so far.
As I am learning more about Unreal Engine 4. I am getting more and more ideas as to what I want to make for my first original project. Making the projects provided in the Udemy courses I am taking is good, but I think making something on my own is a great first step even if it feels a little bit early. The key to making this work is to keep it small and not ambitious. Not only will this help improve my confidence in my skills, but this process itself will teach me new skills within UE4.
One mechanic of my first original project is going to be reading notes, similar to how it’s done in the Resident Evil games. The player should be able to walk around the level andpick up notes to read. How I want this to work is that when the player is near a note, they will get a prompt to hit the E key to read the note. If the player is too far from the note, the E key prompt should disappear. If the player is within the range of the prompt and they hit the E key, the note should come up right in front of the player so they can read it. There will be multiple notes around the level that will have an outer glow to them to indicate that it is a note.
As I am still an Unreal Engine 4 beginner, I had to go to YouTube to see how this would work. I found a video that I thought was helpful and did what I wanted to do. We will call this video #1. Video #1 was actually covering how to display an interaction prompt for the player like “Press E to read note”. It was doing it in the context of opening a door but that doesn’t matter. I will tell you about my experience with Video #1, but I will also tell you right now that Video #1 did not work for me. I followed what was shown but it for whatever reason didn’t do what was intended.
Video #1 is helped me learned about Widget Blueprints. Widget Blueprints are a way to implement Unreal Motion Graphics UI Designer or UMG. Widget Blueprints have pre defined functions that can help you design parts of your UI as you please. One of these functions is the text function. It is relatively simple to use. In the Widget Blueprint, there is an outlined area that is meant to represent a user’s screen.
After setting up prompt message, I want the user to be able to hit the E key so the user can have the note appear right in front of them. Setting up the prompt message is rather simple from what I have seen from Video #1, but before we get into that let’s go over some game development terminology. We are going to explore what the terms Mesh and Box Collision. As I understand it, a mesh is simply any 3d model that is made up of polygons. A mesh is used to define the physical structure of a model in the game engine. For example, a building mesh would be polygons that make up the shape of the building. This building mesh doesn’t have any textures on it, or animations, those are added later to make it a model.
Box Collision refers to a technique that is used, to detect when an object is intersecting with another. In this example, I have a note, and when the player is within close proximity to the note, I want the prompt to appear. I can place a box collision component around the note, and I can define how big it is. By defining how big it is, I am determining how far away the player needs to be front the note for the prompt to appear. Through Blueprints, we can program the game so that when the player is inside of the box collision component, the prompt will pop up. If I have explained these improperly or if you have anything to add, please let us know in the comments below.
Let’s go on with setting up the note prompt. We have already explored some of this from the term explanation I have written above, but Video #1 says to set up a box collision component around your note. Then in the note event graph, call events On Component Begin Overlap and On Component End Overlap on the box collision component. Next we have to cast the “other actor” to our player type. If the cast is successful, meaning if the object overlapping with the box collision component is the player character, we will call a function called Create Widget. Now it’s starting to make sense, we will call the widget that we made that prompts to user to press E to pickup the note, when we detect that the player character is colliding with the box collision component that’s on the note. The last step is calling the add to viewport function to place the widget on the user’s screen.
Now that we have done that, we have to further implement the prompt message going away when the player character exits the box collision component. Doing this is again, simple. We call the On Component End Overlap on the box collision component and cast the “other actor” to the player character. If the cast has succeeded, meaning if the player character has exited the box collision component, we call the Remove From Parent function and we drag the return value from the previous create widget function and drag it into the target pin of the remove from parent function. Now when the player character leaves the box collision component, the prompt should disappear. This didn’t happen for me, this was the problem I ran into that I mentioned before. I combed over the video multiple times and did some troubleshooting but I could not fix my issue. I assume the problem was most likely a simple logic error, but instead of spending more time resolving this issue. I decided to approach the note reading system another way.
Enter Video #2. Video #2 was another YouTube video I found that was doing the same thing I wanted to do, read a note. The video was first covering the functionality of actually picking up and reading the note instead of displaying the prompt. To approach this, you still need the box collision component, and the same On Component Begin Overlap and On Component End Overlap events. From there, if the player character is overlapping with the box collision component, we call a function called Enable Input which enables input for the player character. From there we connect that node to the Gate flow control node. The Gate node in UE4 is used to control the flow of execution. A gate can open, so the traffic or data is flowing, and a gate can be closed, which as you can imagine does the opposite. The Gate node has an Enter, Open, Close and Toggle pin. We will be focusing on the Enter and Open pins. The Enter pin accepts whatever information or data is being passed through, but the data will only pass if the gate is open. The Open pin let’s you determine by which parameters should the gate be open, in this case, when the input is enabled, the gate is open. By extension, the gate is open when the player character overlaps with the box collision because the input is enabled then.
So we will use the gate to bring up the note on the user’s screen to read. Similar to how we display the “Press E to read note” prompt, we will use a Widget to display the note on the screen. This is done in a similar way to the prompt, but except for using the text component, we will use the image component. The image component by default doesn’t actually display an image, so we have to change the image to our note texture. We want to be able to also put the note down, so we will use the Flip Flop function here as well. The Flip Flop node has two output pins which are A and B. Every time this node is called, it will execute A then B. In this case, when A executes, we will use the Create Widget function just like before and select out note widget that we created.
When B executes, we will call the remove from parent function to remove the note from the user’s screen. We will also call remove parent function if we stop overlapping with the box collision. In other words, if you walk away, you will automatically put the note down.
A view of the event graph of our note blueprint
So as my project stands right now, when you overlap with the note’s box collision component I can pick up the note with E and put it down with E. You will also put the note down if you walk away. There are still some little bugs and things that aren’t working properly. For example, if you walk away from the note and it gets automatically put down, you have to hit E twice to pick it up again. I’m not sure why this happens but I think that happens because when you walk away, the flip flop node isn’t called, so the next order of execution is to remove note from the screen instead of picking it up. I will be talking more about my note reading system in the future as this is only part one, and I still have a long way to go.
An example of how the note would pop up on a user’s screen after they hit the E key in my project
Thank you for reading, please let me know if I had some of my facts about Unreal Engine 4 wrong in my post. I am still learning the engine and there is a chance everything here isn’t 100% accurate despite my research and experience.
Saarim