2. Widget Setup

Choose your OS:

In this step, we determine when the Left Mouse Button is pressed and store the location where it was pressed in screen space. We also use the DetectDragIfPressed to determine if the player is dragging with a specified key.

Steps

  1. Open the HealthBar Widget Blueprint and delete the Canvas Panel in the Hierarchy window.

  2. Add a Progress Bar, then Right-click on it and Wrap With a Size Box set to 500 x 50 in the Details panel.

    DragDrop4a.png

    Optionally you can stylize the Progress Bar. Below we set the adjusted preview to Desired on Screen, set the Percent to 1.0 so the progress bar is filled and changed the color to green.

    DragDrop4b.png

    In this tutorial, we will not be creating a functional Health Bar and this is intended for demonstration purposes only.

  3. Switch to the Graph Mode, then in the My Blueprint panel add the OnMouseButtonDown and OnDragDetected overrides.

    DragDrop5.png

    There are several functions that you can override to call your own custom script. Here we will perform some checking when the Mouse Button is pressed and what happens when a widget drag is detected.

  4. Inside the OnMouseButtonDown node, drag off the My Geometry pin and add the Absolute to Local node.

  5. Drag off the Mouse Event pin and add the Get Screen Space Position node and connect as shown below.

    DragDrop6.png

    Here we are converting the absolute coordinates of the Health Bar widget to local space by getting the screen space position in which the mouse button registered a button down key press. This will tell us where on the widget the player actually clicked so that we can use that to determine where we should place the widget when we choose to drop it so we will store it as a variable.

  6. Right-click the Return Value of the Absolute to Local pin and Promote to Variable called Drag Offset.

    DragDrop7.png

    Don't worry if you see an error on the On Mouse Button Down node, once we complete the function it will go away.

  7. Right-click in the graph and add a Detect Drag if Pressed node.

  8. Set the Drag Key to Left Mouse Button and connect the Mouse Event and remaining pins as shown below.

    DragDrop8.png

    Here we are determining if the player is dragging the Left Mouse Button before which will start the On Drag Detected script.

With the ability to detect if the player is dragging in place, next we will finish off what happens when the drag is detected.