Creating Your First Custom Marker

In the Quick Start guide, we used the built-in sample marker. Now, it’s time to build your own from scratch!

In this tutorial, we will create a custom quest marker that hovers over an NPC and changes color when the player looks directly at it.

---

🎨 Step 1: Create the UI Widget

First, we need to design how the marker looks on the screen.

1. In your Content Browser, right-click and select User Interface > Widget Blueprint.
2. In the popup window, do not select the standard User Widget. Instead, expand the All Classes dropdown at the bottom, search for MageItWorldMarkerWidget, and select it.
3. Name your new widget WBP_MyQuestMarker.
4. Open WBP_MyQuestMarker.
5. Add a Size Box to the hierarchy and set its Width and Height Overrides (e.g., 64 x 64).
6. Inside the Size Box, add an Image or Text block to represent your marker. Let’s use a simple Image (a white circle or star).

Adding Interaction Logic (Hover Effect)

Let’s make the marker react when the player aims at it.

1. Switch to the Graph mode in the top right corner.
2. In the Variables panel on the left, under the World Markers category, you will see all the built-in properties you inherited.
3. Right-click in the Event Graph and search for the Event On Crosshair Focus Changed node.
4. Drag off the node and add logic to change the color of your Image:
   • If bNewIsUnderCrosshair is True -> Set Image Color to Yellow.
   • If bNewIsUnderCrosshair is False -> Set Image Color to White.
5. Compile and Save your widget.

---

⚓ Step 2: Attach the Marker to an Actor

Now that we have our visual UI, we need to anchor it to a 3D object in the world.

1. Open any Actor Blueprint in your project (e.g., an enemy, a loot box, or an NPC). If you don’t have one, create a simple Blueprint Class of type Actor and name it BP_QuestGiver.
2. Open your Actor Blueprint.
3. In the Components panel on the left, click + Add and search for MageIt World Marker.
4. Select the new component. In the viewport, you can move it up (e.g., above the NPC’s head) so the UI doesn’t cover their body.

---

⚙️ Step 3: Configure the Component

With the MageIt World Marker component selected, look at the Details Panel on the right.

1. Find the Widget Class dropdown and select the WBP_MyQuestMarker you created in Step 1.
2. Ensure bEnabled is checked.
3. Check the bCrosshairInteractionEnabled box. (If this is off, our hover logic from Step 1 won’t fire!)
4. Set the Marker Size to match the Size Box you created in the widget (e.g., X: 64, Y: 64). This tells the math system how to perfectly calculate the screen edges.
5. (Optional) Set MaxVisibleDistance to 3000. This ensures the marker will automatically fade out if the player walks more than 30 meters away.
6. Compile and Save the Actor.

---

▶️ Step 4: Test Your Marker

1. Drag and drop your BP_QuestGiver actor into your level.
2. Hit Play.
3. Look around! You should see your custom WBP_MyQuestMarker floating above the actor.
4. Move your crosshair directly over the marker. If everything is set up correctly, the image will instantly turn Yellow!
5. Turn your camera away from the NPC. Because bStickToViewport is enabled by default on the component, your custom icon will elegantly slide along the edge of your monitor, pointing you back to the objective.

---

🎉 Congratulations!

You have successfully created a fully interactive, optimized world marker.

Next Steps:

• Try overriding the Event On Screen Side Changed in your widget to rotate an arrow icon when the marker is clamped to the edge of the screen!
• Explore the Blueprint API Reference to discover how to fade markers in and out when they go behind walls.