Implementing a basic Radar System

In this post we’re going to create a simple radar hud for our character. Before we start, take a look at the end result:

All the source code is available on my github repo.

Drawing the radar in our HUD

Create a C++ First Person Template project and open up the generated HUD class. Before we draw our radar, we need to decide its location on the player’s screen.

Be aware that players may have different resolutions, so we need a way to tell UE4 to draw our radar in a relative location instead of hardcoding the width and height values. Fortunately, inside the HUD class UE4 has included a Canvas, which holds the actual width and height of the players’ screen. In order to leverage that functionality, we will expose a 2D vector, named RadarStartLocation, which will be a multiplier in order to decide the position of our radar by giving relative values instead of hardcoding.

So, let’s say that my resolution is 1920 x 1080. If I multiply both the 1920 and the 1080 with a value of 0 I would get the upper left corner of the screen. With that said, here is a graph explaining how this works:

The X and Y values, correspond to the values of our multiplier (in this case: RadarStartLocation). So, if I enter the values 0.9 and 0.2 on the radar start location, UE4 will place our radar somewhere close to the top right corner. Once we draw our radar, I suggest to temper with the values a bit in order to get the hang of it!

Having explained that, let’s draw our radar. Open up the HUD class provided in the First Person C++ Template project that you’ve created and enter the following property:

Then, create the following private functions:

Switch to the source file and implement the following logic for the previously declared functions:

Here is the explanation of the drawline parameters:

1. The X coordinate of start of the line
2. The Y coordinate of start of the line
3. The X coordinate of end of the line
4. The Y coordinate of end of the line
5. The Color of the line
6. The thickness of the line

Assuming you’ve implemented the logic above, navigate inside the DrawHUD function and after the default pre-implemented code, type in call the DrawRadar() function.

Once you save and compile your code, switch to your Editor and:

• Create a game mode Blueprint based on the default game mode Blueprint
• Create a hud Blueprint based on our C++ hud class
• Assign the game mode and the blueprint hud in the world settings:

You can assign the C++ class in the hud class as well, however since we will expose more properties later on I suggest to follow this approach in order to avoid compiling your code if you temper with the exposed properties.

By now, you should be able to see the gray radar in the upper right corner.

Drawing the Player’s position in the radar

Since the player will always be located in the center of the radar, create a function named DrawPlayerInRadar and implement the following logic:

Then. navigate to the DrawHUD function, and right after the DrawRadar() function, call the DrawPlayerInRadar().

Locating nearby Actors for our Radar

In this case, I decided to raycast for multiple actors near the player and reference all the actors that contain the tag “Radar” in an array, to display them in my Radar. However, depending on your game, your case may vary! I suggest to follow my approach and once you have a fully working radar, implement your own logic.

Having said that, create the following protected properties in the header file our HUD class:

I will not be covering in length the logic for this raycast, since I’ve already written a dedicated tutorial here.

Then, create the following private function:

Once you’re done with that, right after the DrawPlayerInRadar() function call inside the DrawHUD function, call the PerformRadarRaycast() function.

Drawing Raycasted Actors

In order to draw the raycasted actors, we will create two functions:

• One that will convert their location from world location to local location, based on our player and
• One that will draw the raycasted actors inside the radar

Declare the following property and functions in the header file of our HUD class:

Here is the logic of the convertion function:

Then, type in the following logic for the DrawRaycastedActors function:

Once you’re done with that, right after the PefromRadarRaycast inside the DrawHUD function, type in the following code:

Here is the full implementation of my DrawHUD function:

Save and compile your code.

Then, navigate to your editor and DO NOT FORGET  to assign the Tag Radar in some actors:

Once you’re done with that, test your radar!