Im trying to achieve something I couldnt find in tutorials, or that anybody has done before - hence im looking for ideas to make this…
to make it simply:
I just want a window, in which I can add “X” icon (example, a blue square) that when I mouse-down that square I can move it inside the window (draggable in other words). When I mouse-up, the new location of the blue square is set. Please note this is NOT a drag and drop inventory with grid. I want it without grid, in which the icons will have “X” coordinate inside the window to save the location.
Besides that, I dont know if this is possible, but I want not only squared icons to be moveble, but ore like if I have a “weapon” icon (transparent background) I can set that weapon icon and i would be able to move only the weapon icon itself (not including the transparent area).
Widgets can handle this easily, every widget has certain functions you can handle to control its behavior, for example mouse button up and down will trigger when you click on the widget, mouse move is a function that fires every tick when your cursor is moving over the widget so you can combo this with the mouse button down function to move the widget.
Moving the widget depends on where the widget is, for example if the widget is added to a canvas you can simply call the the SetPosition on the widget and it will update its position.
The X icon should be a widget and you’ll be able to handle all its events like mentioned above.
If you have an button and place an image on it, the “click area” would be that of the button itself (whole square), doesnt matter if the icon has transparent background. So google any weapon png image. I want it to be able ONLY to click the weapon area, not the transparent area. I read a while back about maybe having to use masks, but I didnt read much to be honest.
Here, we can no longer click on the Border, but the Image was left as is, Visible - clickable.
Per pixel is pretty much impossible in UMG (afaik, but rough shape approximation can work OK); there may be some new plugins on the marketplace that can help. Can’t recall whether I ever saw one that dealt with this in an elegant fashion.
Imagine the green area is an image.png transparent (green=transparent)
The red squares are the button, so there is a button and inside an image.
Based on what I mentioned in my first post, I want to be able to drag these “buttons/images” around the “Window UI”, probably similar to the second post from answer hubs (i dont know if thats inside a window though).
However, I dont want that if I click the green (transparent) area, to be able to move the button/image. I want it only to be clickable on the sword image itself.
Currently like you explained, probably if I click the transparent area the whole button will trigger/move (I think I tested that quite some time ago).
It is, it’s a matter of having a canvas. You can nest canvasses, too.
Indeed. UMG does not support the behaviour you’re after.
I mean, you can drag just the transparent sword - instead of shifting the whole thing with the border move just the transparent image, but the click detection will revolve around the entire area of the Visible element.
And here’s what I meant by approximation:
You make only the greenish elements hit-testable. While this is fine for some UI bits, hacking around 100s of inventory items would not count as time well spent.
