[UMG] Drag & Dropping a Widget while detecting Mouse on another one

Development Programming & Scripting Blueprint
1

Hi everyone.

I’m trying to build a Diablo-3 like inventory system using UMG.

I built 3 Widgets: Item, InventoryBox and Inventory.

Inventory Box is just a widget that changes color on Mouse Enter / Leave. (composed of an empty Image)
Inventory is a box containing several Inventory Boxes.
Item is a Widget that can be drag & dropped on the screen. (composed of an Image within a Border)

Mouse Enter/Leave and Drag & Drop systems are working separately, I want them to work together.

I want my InventoryBoxes to turn White / Gray when my mouse enters or leaves while drag & dropping an item.

Here’s a video showcasing my problem:

Here are the screenshots of the Blueprints involved in the system:

Spawning the item: (custom event being in the Inventory Widget blueprint)

http://img11.hostingpics.net/pics/977839spawningwidget.jpg

This is obviously a temporary system that allows me to quickly test how widgets are behaving.

Drag & Drop System: (overiding functions / binding events on the Item Widget blueprint)

On mouse down:

http://img11.hostingpics.net/pics/240754itemdetectmousedown.jpg

Start Drag: (no parameters in because I wanted to handle the drag and drop process myself but I still needed Blueprint to fire the Drag Over process)

http://img11.hostingpics.net/pics/942212itemdragstart.jpg

While Dragging:

http://img11.hostingpics.net/pics/115791updatewidgetwhiledragging.jpg

Binding the item box color: (on the InventoryBox blueprint)

http://img11.hostingpics.net/pics/759890updatinginventoryboxcolor.jpg

Handling Mouse Enter and Leave

http://img11.hostingpics.net/pics/883894toggleinventoryboxcolor.jpg

I hope someone brings the light to me, I desperately need it :stuck_out_tongue:

If you have any question I’m around here more than often.

Good night :slight_smile:

2

Mouse enter and leave are suspended during drag. You should use Drag Over/Leave instead.

3

You’re awesome Nick! I never noticed those actions. I had created super wonky work arounds to get things similar to work. Should help me quite a bit as well.

4

Overriding the DragOver function didn’t work.
Using OnDragEnter and OnDragLeave event didnt work either.

It just doesnt detect my mouse when using these events / functions.

I tried forcing the focus on the **Inventory **using Set Input Mode Game and UI but it didn’t do anything.

What am I missing or doing wrong?

I added a **Border **component to my InventoryBox (which was only composed of an **Image **component).

Thanks for your time :slight_smile:

EDIT: What is “Widget Switcher”? I don’t seem to find any advanced informations about it.

5

Your user widget’s visibility needs to be Visible.

6

InventoryBox, **Inventory **and **Item **are all set to visible, from parent to children. Still not working.

I’m not sure if I used OnDragEnter and OnDragLeave correctly though.

Should one of these be working? Because it’s not the case (still 0 response from any of the events).

(these are on the **InventoryBox **blueprint, these are my attemps at changing the OnMouseEnter/Leave system by the DragEnter/Leave system as told to)

http://img15.hostingpics.net/pics/502065dragdetected.jpg

http://img15.hostingpics.net/pics/360983dragenterandleave.jpg

http://img15.hostingpics.net/pics/746401dragover.jpg

My InventoryBox widget is in a canvas (as follow):

http://img15.hostingpics.net/pics/399509componentswidget.jpg

So is my Item widget. Just poiting it out because I saw it removed in a tutorial and it might be interfering with what I’m trying to do.

Another lead: When my mouse is over one of the InventoryBox, the box is white. Then I press P to spawn a new widget (the Item to drag & drop) and my InventoryBox turns gray instantly (even if my mouse cursor is still above the box). The InventoryBox (or the **Inventory **itself) stops detecting my mouse.

/!\ I actually have two problems here: the first one is that I lose any focus on my **Inventory **as soon as I spawn an Item widget (the InventoryBoxes stop turning White and Gray, even if I’m not currently drag and dropping).

The second problem (that might be caused by the first one) is that I don’t seem to be able to detect my mouse over an InventoryBox while dragging an Item. /!\

7

Is that On Drag Detected image from your Item widget?

8

It’s on the InventoryBox blueprint. The one who is supposed to turn White when mouse-over and Gray when not. The one who was using **OnMouseEnter **and OnMouseLeave.

The Drag/Drop on the Item is shown in the first post.

EDIT: Was the Variable name missleading :frowning: ?

9

I made a quick and dirty sample. I’m not sure where your problem lies, but maybe this will help you find it. I did notice you’re using the detect drag node wrong, you just need the “Detect Drag If” node, it generates the proper Reply struct based on if drag needs to be detected for the incoming key.

10

It was very toughtful thank you :slight_smile:

However it is only half of what I’m trying to achieve here.

I want my **InventoryBox **to detect my mouse over while I’m dragging another widget (which I called Item here).

On the video I shared you can see a Potion Icon, this is the **Item **I’m talking about. This is a Widget I’m dynamically spawning, it is not a component of the **Inventory **(my plan was to make a widget for each item stored). I can drag and drop it anywhere on the screen (for now). But I want the **Inventory **to still respond to the mouse over while dragging the Item.

I want multiple size Items, that’s why I’m not simply using Images inside my InventoryBoxes to represent the Item.

I want to do this : https://youtu.be/bIHHoIQNYNc

EDIT: I feel like I’m going the wrong way to do what I want.

11

If I were making a diablo style inventory, my Inventory (the one that contains all sub-boxes) would likely handle all Drag Enter/Leave and Overs, and would handle drawing the outline probably though another widget held in an overlay to ensure I drew on top of other subwidgets.

I’d probably just build it in Slate, avoid the overhead of allocating several tiny box widgets, and instead just have it draw the tiled grid of boxes. For really sophisticated layout panels jumping back to Slate can be a better solution. You could make one SInventoryGrid, that took care of all layout, and drag drop logic. Wrap it in a UWidget and reuse it elsewhere in UMG.

12

Using what you said I did this :

[video]https://youtu.be/XCIqHsrvPWo[/video]

This totally fits a one-sized inventory system, and it’s clean. But before I abandon my idea I will try to build an hybrid system using UMG and Slate together.

All I found about Overlay was that so I’m not so eager to dig into it right now.

Thanks for your time and effort to help me :slight_smile:

Also thanks you for building Unreal 4, it is such a beast.

EDIT:

The idea I have in details:

Inventory is a widget composed of several InventoryBoxes.

InventoryBox is a widget composed of an **Image **(a brown box). It listens to drag events, holds an integer **Slot **(from 0 to max number of boxes in an inventory), holds a boolean **IsUsed **(false if empty), holds a texture2D **ItemImage **(saving the image of the item stored, this will be used for drag & drop, see below) and holds another integer **ItemIndex **(to have a reference of what item it is actually storing among all the inventory, will be used to search in the structure below).

ItemImageHUD is the HUD who draws the owned items images (Slate based). It holds an array of a structure composed of texture2D **ItemInventoryImages **and an integer InventorySlot. **ItemImageHUD **draws all **ItemInventoryImages **at the given **Slot **position (**ItemImageHUD **will probably cast to **Inventory **to get the position of the **Slot **InventoryBox).

When Dragging an item, **InventoryBox **will handle the drag and drop process, I will use the CreateDragDropOperation to spawn a new image (I will get the **ItemImage **from the InventoryBox).

When Dropping an item I will check the **Slot **number of the **InventoryBox **dropped over and tell the **ItemImageHUD **to change **InventorySlot **value for this item (using ItemIndex).

I’ll probably also draw the white frame using Slate and I’ll get the current **Slot **on mouse over (the frame which is supposed to show the player what will be the new location of the item).

What do you think? It might be confusing :stuck_out_tongue:

13

There is a guy in the marketplace or WIP, I can’t remember which who has successfully created a diablo style inventory. Maybe you should find him and try to see if he can give you some pointers. I will look to see if I can find him/her again

14

I’ve recently had similar problem. Every new widget that I spawned would make previous widget inaccessible, so I couldn’t drag an item between widgets. Turns out that I had Visibility set to visible in my canvas components which blocked all input for previous widgets. After I had changed it to Not Hit-testable(Self Only) I could access every widget (including 3d widgets) without a problem.

P.S. I know this is an old post, but I hope it can still help someone.

2 Likes
15

Great! Thanks!