3. On Drag Detected

Choose your OS:

In this step, we determine what happens when the player is, in fact, dragging the HealthBar around on the screen.

Steps

  1. Open the OnDragDetected function, Right-click and add a Create Widget node set to Drag Widget, then Browse to it.

    UpdatedDragDrop1.png

    When drag is detected, we will create our DragWidget (which will hold our drag widget). Before we continue with our OnDragDetected function, we need to pass through the Health Bar widget as a reference when the DragWidget is created.

  2. Open DragWidget and add a User Widget variable called WidgetReference set to Expose on Spawn and Editable.

    UpdatedDragDrop2.png

  3. Compile and close DragWidget, then open the HealthBar Widget Blueprint and the OnDragDetected function again.

  4. Assign Self as the Widget Reference and Promote the Return Value to a variable called Dragged Widget and connect as shown.

    UpdatedDragDrop3.png

    Now when our drag widget is created, it will have a reference to the existing Health Bar widget. We also promote the dummy drag widget to a variable so that we have access to it later and can remove it from display when we choose to drop the widget.

  5. Right-click and create a DragAndDropOperation node set to Widget Drag with Pivot set to Mouse Down.

    UpdatedDragDrop4.png

    Pivot determines where the Drag Widget Visual will appear when being dragged relative to the pointer performing the drag operation.

  6. Add Self as the Widget Reference, DraggedWidget as the Default Drag Visual and Drag Offset as the Drag Offset on the node.

    Click for full view.

    Above we indicated what Widget Blueprint is our reference, what the drag visual should be and provided an offset in which to start dragging. There is an offset pin on the node by default, however, we are using our own in our own calculation to determine the position in which to start dragging when Mouse Button Down is pressed.

The last few things we need to do is to determine what happens when the player releases the Left Mouse Button and performs the OnDrop function. We also need to add the HealthBar Widget to our Main HUD Widget Blueprint and tell that to be displayed before testing everything out.