Unreal Engine 5 Waypoint System – Drop Markers & Measure Distance in Meters

In this tutorial, you’ll learn how to create an Unreal Engine 5 Waypoint System that allows players to drop markers on the ground and dynamically measure the distance between the player and the marker in real-time. This system is perfect for navigation, level design, and open-world games, providing an easy way to track distances and set waypoints.

With this Unreal Engine 5 Waypoint System, you’ll be able to spawn markers on key press, display real-time distance updates, and ensure the markers always face the player, preventing them from getting hidden behind objects. This technique is useful for RPGs, strategy games, open-world adventures, or even VR navigation systems.

We’ll also cover optimizations, including performance-friendly Blueprints, randomizing marker colors, and using Screen Space vs. World Space UI for the best visibility. By the end of this tutorial, you’ll have a fully functional Unreal Engine 5 Waypoint System that you can integrate into any project!

📺 Watch the full tutorial here:

What You’ll Learn in Unreal Engine 5 Waypoint System

✅ Creating a Widget Blueprint for the waypoint
✅ Adding a floating animation to the UI
✅ Spawning markers dynamically on player input
✅ Fixing UI scaling and making waypoints always face the player
✅ Bonus: Changing marker colors dynamically for better customization

This tutorial uses an empty Third Person Project in Unreal Engine 5, making it beginner-friendly and easy to integrate into any game.

1. Creating the Waypoint Widget

To start, we need to create a Widget Blueprint that represents our marker UI.

Steps:

1. Download an icon for the marker (e.g., from SVG Repo).
2. Import it into Unreal Engine by dragging it into the Content Drawer.
3. Create a new Widget Blueprint:

• Right-click in the Content Drawer → Go to User Interface → Click Widget Blueprint.
• Name it WBP_Marker.

1. Design the UI:

• Add a Size Box (Width: 100, Height: 150).
• Inside the Size Box, add a Vertical Box.
• Inside the Vertical Box, add an Image and a Text Block.
• Assign the imported marker icon to the Image component.
• Set the Text Block to show a sample distance (e.g., “10m”).

2. Adding Floating Animation

To make the waypoint more dynamic, we’ll add a floating animation to the UI.

Steps:

1. Open WBP_Marker and switch to the Animations tab.
2. Click “Add Animation” and name it Floating.
3. Select the Size Box, click Add to Animation.
4. Modify the animation:

• At 0 seconds: Set Y Translation = -20.
• At 2 seconds: Set Y Translation = 0.

1. Enable looping so the animation plays continuously.

3. Creating the Blueprint Actor for Markers

Now, we’ll create a Blueprint Actor that will spawn this widget in the world.

Steps:

1. Right-click in the Content Drawer → Select Blueprint Class → Choose Actor.
2. Name it BP_WaypointMarker and open it.
3. In the Components panel (left side), click Add Component → Select Widget.
4. In the Details panel (right side), set:

• Widget Class to WBP_Marker.
• Draw Size to 100×150.

1. Switch to the Event Graph:

• Drag the Widget Component → Get User Widget Object.
• Cast to WBP_Marker to access the text block.
• Promote it to a local variable for better performance.

4. Calculating and Displaying Distance

To measure the distance between the player and the marker:

Steps:

1. Inside BP_WaypointMarker, go to Event Tick.
2. Use Get Player Pawn → Get Actor Location.
3. Use Get Actor Location for BP_WaypointMarker.
4. Use the Distance (Vector) node to calculate distance.
5. Convert centimeters to meters by dividing by 100.
6. Truncate the value to remove decimal points.
7. Use an Append String node to format:

• First input: Distance value.
• Second input: “m” (for meters).

1. Set this value to Text Block Distance.

Now, the widget will dynamically update the distance between the player and the marker.

5. Spawning Markers on Key Press

To make the player drop waypoints on command:

Steps:

1. Open ThirdPersonCharacter Blueprint.
2. Right-click → Search for “Keyboard X” (or any key you prefer).
3. Add Spawn Actor from Class → Set Class to BP_WaypointMarker.
4. Use Get Actor Transform to set the marker’s spawn location.
5. Connect the Transform output to Spawn Actor’s Spawn Transform input.

Now, when you press X, the marker will spawn!

6. Fixing Widget Orientation

By default, the marker might not always face the player.

Fix:

1. Select the Widget Component inside BP_WaypointMarker.
2. In the Details panel, change Widget Space from World to Screen.

Now, the marker will always face the player and won’t get hidden behind objects.

7. Bonus: Randomizing Marker Colors

To make each marker unique, we’ll assign a random color on spawn.

Steps:

1. Inside BP_WaypointMarker, get the Image Component.
2. Use Set Color and Opacity.
3. Right-click on Color and Opacity → Split Struct Pin.
4. Add Random Float in Range (0,1) for Red, Green, and Blue values.
5. Connect them to the Color inputs.

Now, every spawned marker will have a random color! 🎨

Final Thoughts

You’ve now successfully built a waypoint system in Unreal Engine 5! This system lets players:
✔ Drop markers dynamically
✔ Measure real-time distances
✔ Ensure UI is always visible and facing the player
✔ Customize marker colors dynamically

👍 If this tutorial helped you, don’t forget to LIKE & SUBSCRIBE!

🔔 Stay tuned for more Unreal Engine tutorials!

Setting Up an RTS Camera in Unreal Engine: A Complete Overview – Rambod

This article is fully optimized for SEO, detailed, and easy to follow. Let me know if you need any tweaks! 🚀🔥