Unreal Engine 5 Drop Waypoints & Measure Distance in Meters

Create a waypoint system in Unreal Engine 5 to drop markers, measure distance in meters, animate UI, and customize colors for navigation mechanics.

This is Rambod and in this tutorial we build a dynamic waypoint system in Unreal Engine 5. The system allows players to drop markers on the ground and automatically display the distance in meters between the player and each marker. It’s a simple but powerful mechanic for RPGs, open-world games, and survival projects.

1) Import a marker icon

• Download a simple white SVG image for the marker.
• White is important because it allows tinting and randomizing colors later.
• Drag and drop the icon into your Content Drawer.

2) Create the marker widget

• Right click → User Interface → Widget Blueprint.
• Name it WBP_Marker.
• Add a Size Box (e.g., 100x150).
• Inside it, add a Vertical Box → Canvas Panel.
• Place an Image (use your imported SVG).
• Add a Text Block placeholder (e.g., 10 m).
• Style text and check Is Variable, name it Distance.

3) Add floating animation

• In the Widget Designer, select the Size Box.
• Create a new animation named Floating.
• At 0 sec: Y translation = 0.
• At 1 sec: Y translation = -20.
• At 2 sec: Y translation = 0.
• Loop infinitely for a smooth floating effect.
• In the Event Graph, play this animation on Event Construct.

4) Create the waypoint actor

• Right click → Blueprint Class → Actor.
• Name it BP_Marker.
• Add a Widget Component, set its class to WBP_Marker.
• Adjust Draw Size to 100x150.
• In Event Graph:
  • Get User Widget Object.
  • Cast to WBP_Marker.
  • Store reference to update Distance text.

5) Update distance in real time

• On Event Tick:
  • Get player pawn location.
  • Compare with marker’s location using Vector Distance.
  • Divide by 100 to convert from cm → meters.
  • Use Truncate to remove decimals.
  • Append “m” and set as text for the Distance variable.

Now the widget displays the exact distance in meters between player and marker.

6) Bind to player input

• Open Third Person Character Blueprint.
• Add a key binding (e.g., X).
• On press: Get Actor Transform → Spawn Actor from Class → BP_Marker.
• Now pressing X drops a waypoint marker.

7) Fix scaling & orientation

• In the Widget Component, switch Space from World to Screen.
• This ensures the marker always faces the player.
• Prevents hiding behind objects and keeps it readable.

8) Bonus: Randomize marker color

• In BP_Marker: get the Image Component.
• Use Set Color and Opacity.
• Split the struct and assign Random Float in Range (0–1) for R, G, B.
• Each spawned marker now has a different color automatically.

Wrap up

You now have a fully functional waypoint system with:

• Droppable markers.
• Distance tracking in meters.
• Animated floating UI.
• Markers that always face the player.
• Bonus randomized colors for variety.

This mechanic is great for navigation, exploration, or level design features in your projects.

For more Unreal Engine tutorials, visit rambod.net, subscribe on YouTube, or watch this tutorial here: Watch on YouTube.