UE5 Drop Waypoints Distance Meter

What You Will Build

By the end of this tutorial, you will have a working waypoint marker system where the player can press a key, spawn a marker, and see the distance from the player to that marker displayed directly above it.

The final system includes:

• A custom UMG marker widget
• A marker icon imported into Unreal Engine
• A distance text label
• A simple floating UI animation
• A Blueprint actor that holds the widget component
• Real-time distance calculation from player to marker
• Conversion from centimeters to meters
• Player input for dropping markers
• Screen-space widget setup so the marker stays readable
• Optional random marker colors

This is a small system, but it teaches several important Unreal Engine concepts: widget components, actor spawning, UMG animation, distance calculation, unit conversion, and runtime UI updates.

Why a Waypoint System Is Useful

A waypoint system gives players a clear visual reference for locations in the game world. It helps with navigation, objective tracking, exploration, and user guidance.

In many games, players need to know where something is and how far away it is. That could be a quest objective, a dropped item, a teammate ping, a custom map marker, a mission target, or a resource location.

A distance marker improves player orientation because it answers two questions immediately:

• Where is the target?
• How far away is it?

Without this feedback, players may feel lost, especially in large levels. With a marker system, navigation becomes more readable and more intentional.

This tutorial builds the basic version. Later, the same foundation can be expanded into a full objective marker system, compass marker system, minimap ping, squad marker, or mission navigation tool.

Unreal Engine Units and Distance in Meters

Before building the system, you need to understand one important Unreal Engine rule: Unreal uses centimeters by default.

That means:

100 Unreal units = 1 meter

If you use the Vector Distance node between the player and the marker, the result is returned in Unreal units, which means centimeters. To show the result in meters, you divide the distance by one hundred.

Distance In Meters = Vector Distance / 100

For example:

• 500 Unreal units = 5 meters
• 1200 Unreal units = 12 meters
• 3500 Unreal units = 35 meters

This conversion matters. If you skip it, your UI will show huge numbers that do not match real-world expectations.

Step One: Import a Marker Icon

First, you need an icon for the waypoint marker. A simple white marker icon works best.

White is useful because it can be tinted easily inside Unreal Engine. If the icon is already colored, changing its color dynamically later becomes harder or less predictable.

You can use:

• A white SVG marker icon
• A transparent PNG marker icon
• A simple custom icon created in Canva, Figma, Photoshop, or any vector tool

Import the icon by dragging it into the Content Drawer.

A good folder structure would be:

Content/UI/Icons/T_Marker

Clean naming helps later. For textures, using a prefix like T_ is common. For example:

T_WaypointMarker

Step Two: Create the Marker Widget

Now create the widget that will visually represent the waypoint marker.

In the Content Drawer:

Right Click > User Interface > Widget Blueprint

Name it:

WBP_Marker

Open the widget and build a simple layout.

Recommended hierarchy:

Size Box
  Vertical Box
    Canvas Panel
      Image
    Text Block

The Size Box controls the overall widget size. A good starting size is:

Width: 100
Height: 150

The Vertical Box lets you stack the icon above the distance text. The Canvas Panel gives you more control over the icon placement. The Text Block displays the distance.

Set the Image brush to your imported marker icon. Then create a Text Block under it with placeholder text such as:

10 m

Select the Text Block and enable:

Is Variable

Rename the Text Block to:

Distance

This is important because the Blueprint actor will later access this text and update it at runtime.

Step Three: Style the Marker Widget

Make sure the marker is readable during gameplay. A marker that looks good in the widget designer may be unreadable inside an actual level if the text is too small or the icon blends into the background.

Recommended styling:

• Use a clear icon shape
• Keep the icon white or bright
• Use a readable font size for the distance text
• Use a shadow or outline for the text if your background is busy
• Keep the widget compact so it does not block too much of the screen

For the distance text, keep the format simple:

25 m

Avoid overly detailed text like:

Distance: 25.782314 meters

That is ugly and bad UI. Players do not need decimal precision for a waypoint marker.

Step Four: Add a Floating Animation

A small floating animation makes the waypoint feel more alive. It also makes the marker easier to notice without adding complicated effects.

In the widget designer, select the Size Box or the main container you want to animate.

Create a new animation named:

Floating

Add keyframes for translation on the Y axis:

This creates a simple up-and-down motion.

Then go to the widget Graph. On Event Construct, play the Floating animation.

Set the animation to loop so it continues while the marker exists.

The logic is:

Event Construct > Play Animation Floating

This keeps the visual behavior self-contained inside the widget. The marker actor does not need to care about the animation.

Step Five: Create the Waypoint Actor

Now we need an actor that can exist in the world and display the marker widget above it.

In the Content Drawer:

Right Click > Blueprint Class > Actor

Name it:

BP_Marker

Open the Blueprint and add a Widget Component.

Select the Widget Component and set:

Widget Class: WBP_Marker
Draw Size: 100 x 150

This component will render the UMG widget in the world.

At this point, BP_Marker is a world actor with a UI marker attached to it.

Step Six: Get a Reference to the Marker Widget

The actor needs to update the Distance Text Block inside the widget. To do that, you need a reference to the actual user widget object created by the Widget Component.

In BP_Marker Event Graph:

1. Drag the Widget Component into the graph.
2. Call Get User Widget Object.
3. Cast to WBP_Marker.
4. Promote the cast result to a variable.

Name the variable something clear:

MarkerWidgetRef

This reference allows BP_Marker to update the Distance Text Block during gameplay.

Recommended flow:

Event Begin Play
> Widget Component
> Get User Widget Object
> Cast to WBP_Marker
> Set MarkerWidgetRef

Step Seven: Calculate Distance in Real Time

Now we calculate the distance between the player and the marker.

In BP_Marker, use Event Tick for this beginner version. Since each marker updates its distance every frame, this is simple and easy to understand.

The logic is:

1. Get Player Pawn.
2. Get Player Pawn location.
3. Get Marker actor location.
4. Use Vector Distance.
5. Divide by one hundred to convert centimeters to meters.
6. Truncate or round the value.
7. Convert it to text.
8. Append "m".
9. Set the Distance Text Block.

Formula:

DistanceMeters = VectorDistance(PlayerLocation, MarkerLocation) / 100

If you want a clean number, use Truncate or Round.

Truncate removes decimals:

12.9 becomes 12

Round gives the closest whole number:

12.9 becomes 13

For waypoint distance, Round usually feels better, but Truncate is fine for a simple tutorial.

Step Eight: Update the Distance Text

After calculating the distance in meters, update the text inside WBP_Marker.

Example text format:

25 m

Blueprint flow:

DistanceMeters
> To Text
> Append " m"
> SetText on Distance Text Block

Make sure the Distance Text Block inside WBP_Marker is marked as a variable. If it is not marked as variable, you will not be able to access it from the Blueprint graph.

This is one of the most common beginner mistakes in UMG. If you cannot find your widget element in Blueprint, check Is Variable first.

Step Nine: Spawn the Marker from Player Input

Now we need the player to drop the marker.

Open your Third Person Character Blueprint:

BP_ThirdPersonCharacter

Add a key input. For this tutorial, use:

X

On X Pressed:

1. Get Actor Transform.
2. Spawn Actor from Class.
3. Set Class to BP_Marker.
4. Connect the player transform to Spawn Transform.

Basic flow:

X Key Pressed
> Get Actor Transform
> Spawn Actor From Class BP_Marker

Now every time the player presses X, a waypoint marker spawns at the player location.

That works, but it is not always ideal. In many games, you may want the marker to spawn at the ground location under the player, under the crosshair, or at a clicked location. This tutorial keeps it simple by spawning from the player transform.

Step Ten: Fix Widget Scaling and Visibility

Widget Components can render in either World Space or Screen Space.

For waypoint markers, Screen Space is usually easier because the marker always faces the camera and stays readable.

In BP_Marker, select the Widget Component and change:

Space: Screen

This solves common issues such as:

• The marker appearing too small from far away
• The marker rotating away from the camera
• The marker becoming hard to read
• The marker behaving like a flat object in the world

World Space is useful when you want the widget to physically exist in the world and be occluded naturally. Screen Space is better when readability is the priority.

For a navigation marker, readability matters more.

Step Eleven: Randomize Marker Colors

As a bonus, you can randomize marker colors so each dropped marker looks slightly different.

This works best if your imported marker icon is white, because white accepts tint colors cleanly.

In WBP_Marker, make sure the Image widget is marked as a variable. You can name it:

MarkerImage

In BP_Marker, after getting the widget reference:

1. Access MarkerImage.
2. Call Set Color and Opacity.
3. Use Random Float in Range for R, G, and B.
4. Keep Alpha as one.

Random range:

R: 0 to 1
G: 0 to 1
B: 0 to 1
A: 1

This gives each marker a random color when spawned.

For a real game, pure random colors can look messy. A better production approach is to create a predefined color palette and randomly choose from that palette.

Example palette:

• Blue for player marker
• Yellow for objective marker
• Red for danger marker
• Green for safe location
• Purple for custom ping

Performance Notes

The tutorial version updates the distance on Event Tick because it is simple and beginner-friendly. For a few markers, this is fine.

But if your game may have many markers at once, updating every marker every frame can become wasteful.

Better options for larger projects:

• Update distance on a timer every 0.1 or 0.2 seconds
• Disable marker updates when the marker is far away
• Destroy old markers after a lifetime
• Limit the maximum number of active markers
• Update only markers visible to the player

A timer-based version is cleaner for production.

For example:

Set Timer by Function Name
Function: UpdateDistance
Time: 0.2
Looping: True

Updating five times per second is usually enough for distance text. The player will not notice the difference, and your Blueprint does less work.

Common Mistakes

Forgetting Unreal Uses Centimeters

Vector Distance returns centimeters. Divide by one hundred if you want meters.

Not Marking the Distance Text as Variable

If your Text Block is not marked as a variable, you cannot update it from Blueprint.

Using a Colored Icon for Tinting

A white icon works better for dynamic color changes. Colored icons can produce muddy or unexpected tints.

Leaving the Widget in World Space When Readability Matters

World Space widgets can look good, but for waypoint markers, Screen Space is often easier and more readable.

Spawning Unlimited Markers

If every key press spawns a new marker forever, your level can become cluttered. Add marker limits or cleanup logic if needed.

How to Improve This System

This tutorial creates the foundation. From here, you can turn it into a much more complete marker system.

• Spawn marker at mouse click location using a line trace
• Allow only one active marker at a time
• Destroy old markers before spawning a new one
• Add marker fade-in and fade-out animations
• Add marker icons for different objective types
• Add custom marker names
• Add a compass indicator
• Add minimap integration
• Add multiplayer marker replication
• Add team-based marker colors
• Add marker lifetime and auto-remove logic
• Add distance-based opacity scaling

The best upgrade is spawning the marker from a camera line trace or mouse click. That would let the player place waypoints on the ground instead of only at the current player location.

Blueprint Architecture Recommendation

For a beginner project, putting the spawn logic directly inside the player character is fine.

For a larger project, the better architecture would be:

• A Waypoint Manager actor or component
• A Marker Actor for world placement
• A Marker Widget for UI display
• A data struct for marker settings
• Events for marker created, updated, and removed

This keeps your system modular and easier to expand.

A possible marker data struct could include:

That type of structure gives you a clean path toward a proper objective marker system.

Best Use Cases

This waypoint system can be used in many game types.

Open-World Games

Players can mark destinations and track how far away they are.

Survival Games

Mark resources, shelters, danger zones, or dropped loot.

RPGs

Display quest markers, custom pins, NPC locations, or exploration targets.

Battle Royale Games

Let players ping positions, enemies, loot, or movement destinations.

Level Design Tools

Use markers during development to measure distance between points in a level.

Final Result

At the end of the tutorial, you have a Blueprint-based waypoint marker system with distance tracking in meters.

The player can press a key to drop a marker. The marker displays a floating UI, shows the distance from the player, and remains readable using Screen Space.

You also have a bonus color randomization setup that gives each marker a different visual identity.

This is a strong beginner-friendly foundation for more advanced navigation systems.

Conclusion

You now know how to create a waypoint system in Unreal Engine 5 using Blueprints and UMG. The system teaches practical concepts that apply to many gameplay features: spawning actors, using widget components, updating UI from Blueprint, calculating distance, converting centimeters to meters, and keeping world markers readable.

The beginner version is simple and works well for learning. If you want to use this in a larger game, improve it with timers, marker limits, cleanup logic, predefined marker types, and a dedicated waypoint manager.

Watch the full tutorial: Unreal Engine 5 Drop Waypoints & Measure Distance in Meters

More Unreal Engine tutorials: rambod.net

Subscribe for more: Rambod YouTube Channel

Frequently Asked Questions

Why do we divide distance by one hundred?

Unreal Engine uses centimeters by default. Dividing by one hundred converts Unreal units into meters.

Should the marker widget use World Space or Screen Space?

For readable waypoint markers, Screen Space is usually better because the marker always faces the camera. World Space is better when you want the widget to behave like a physical object in the world.

Can I spawn the marker where the player is looking?

Yes. Use a line trace from the camera or mouse cursor and spawn the marker at the hit location.

Can I show decimals in the distance text?

Yes, but whole meters are usually cleaner for gameplay UI. Decimal precision is rarely useful for waypoint markers.

Is Event Tick bad for updating distance?

For a few markers, Tick is fine. For many markers, use a timer instead and update distance several times per second.

Can this system work in multiplayer?

Yes, but spawned markers and marker data need replication. You also need to decide whether markers are private, team-visible, or visible to all players.

How do I make only one marker exist at a time?

Store the spawned marker as a variable in the player or waypoint manager. Before spawning a new marker, check if the old marker is valid and destroy it.