How to get the position in viewport of a widget item

Hello! I’m working on an inventory system for my game following this tutorial. I’ve gotten to the point of adding an action menu for options such as use, examine or drop, and the tutorial teaches you how to get your mouse position for the action menu widget to appear there. I was wondering how to get the position of the slot you’re clicking to then set the action menu on the same place (and also push it a bit to the right, which could easily be done with an “add” node I assume), just like Resident Evil does (images for context)

How it looks (depending on where in the slot I click):
Captura

How I want it to look (next to the slot that was clicked):

it depends on how you are spawning that inventory. if you are using a wrap box, get each item size and make the newly spawned context menu to always snap to the top left corner of the wrap box slot using some math.
for example, if each wrap box item is 90 x 90 with a 5 pixel padding on all sides, get the mouse X position and divide by 100, Ceil (because you likely want it on the right), then multiply by 100 and subtract 5. do this for Y but floor and add 5 instead. this will make the context menu always snap to the top right for slots with sizes of 90 and borders of 5.
heres an image of the logic


This kinda works! How’s the size of the cells affecting the math? My cells are 75x75px with 10px space only between them (inner slot padding). Here’s a few examples of how it looks depending of the slot and where I clicked (if i click on the top half of the button it shows like images 1 and 3, if I click on the bottom half it shows like 2 and 4).

s1
s2
s4
s3

from what i see, i think your padding is correct, so your math in terms of that should be good.
one thing i forgot to mention, make sure to remove the wrap box location from the cursor location, do the calculation, then add the wrap box back. if the wrap box is part of a canvas panel, get the wrap box as a canvas slot. that will give you its coordinates on the canvas panel. i forgot that you’ll be referencing the top left of the screen, rather than the wrap box. see if accounting for the wrap box like this helps.

How would I do that? I’m sorry, this is the furthest I’ve ever gotten with Unreal and I don’t understand many things.

Here’s the code from the action menu:

Here’s the widget items:
s5

hmm… you may have to go up the chain the get all the offsets… maybe. you may be able to do something more procedural, like getting all the children of the base canvas panel, but for now ill just tell you the brute force way.
so youd go;
offset = WrapBox_Inventory → slot as size box slot → get padding + offset
offset = Sizebox ->slot as size box slot → get padding + offset
offset = Sizebox_72 ->slot as overlay slot → get padding + offset
offset = Overlay ->slot as canvas slot → get Layout Data + offset

note, if your padding on any of these is 0, then dont bother getting them. the canvas slot is a struct, so dig in and find the left and top offsets.

once you have all these values added together, that will tell you how far from the top left the inventory is, which you can use to do all your calculations nicely.

The slots are a different widget that get added to this one, so how can I get the offset of the wrap box, both size boxes and overlay in the slot widget? Does a variable referencing it work?

yeah. as long as you have a reference to the objects you are wanting to get the info, you can treat them as if they are working with them locally

inv_game.zip (150.1 KB)


ayy. its working. poggers

I don’t know how to apply this logic to my project :sob:

Just look over the project and take what you can :wink:

PM me if you have any questions.

That’s not me! I’m working on what you told me. Is this anywhere close to what you meant?

yes. you have all the objects now. now you can add all the padding and offset data together to get the true inventory location on screen

a procedural way might actually be a good method of finding all this is to recursively go up the stack of objects.
idk if theres an easy wat to set the object to slot type, but that could allow you to go up the object stack.

By add you mean an add node? So should I split all the pins and put them all in one add node? I’m sorry if I sound dumb I’m really confused

yeah. split up all the pins and add all the top pins together, and the left pins together. you only need the pins for the top and left and the bottom and right pins can be discarded.

Hello again! I’m sorry I didn’t reply sooner, I’ve been busy.

After trying your method and not getting it to work I found the issue: getting the padding and offset will always give me 0 since they’re all set to 0 in the widget. I’m alinging all those items to right and middle inside their parent. This is what the inventory looks like:

I’m using an overlay as a parent for everything else, with a size box with 0 padding, of 1200 width and 700 height, centered vertically and horizontally. Then inside that I have another size box for the inventory, for which I’m using a wrap box, to which the slots get added as children when the inventory is opened, centered vertically and horizontally again.

Is there another to get their position relative to the screen? There has to be something similar to the “Get mouse position on viewport” node…

send screen shots of the layout info for all the widgets individually. ill see if i can recreate it on my side and get the snapping behavior working nicely

Here you go! Top to bottom of the hierarchy:

inv2
inv3
inv4
inv5
inv6
inv7


inv9
inv10

It won’t let me post more images, but the one left is:

TextBlock_ItemDesc
Slot (Vertical Box Slot)

  • Padding: 0.0
  • Size: auto
  • Horizontal alignment: fill
  • Vertical alignment: fill