Hello everyone!
I would like to create an inventory system composed of hexagon-shaped slots. As far as I know, there is no way to alter the shape of a button. I can, of course, fit a hexagonal image inside a square shaped button. That way, I can create inventory looking like this:
The desired appearance, however, looks this way:
It is unachievable without square buttons overlapping and that is not good. The first solution that comes to mind is to have three rectangular buttons per hexagon, like this:
This is a completely naive and inefficient approach and I’d like to avoid it if possible. Not to mention it would become completely tedious with octagons and such, and impossible with circles. Is there any better solution to this? Also, what would be a good panel to put such buttons into? Is there a way to give every second row in a grid panel a slight offset?
I got something that looks good, but… with a catch.
Basically, I have everything like so:
There’s a vertical box which holds everything: a horizontal box that holds each row. Within each horizontal box there are buttons. The second row holds a lovely spacer.
Now here’s the trick: Make the “right padding” on each button 10, and the “top padding” on each horizontal box -20. This moves the boxes up.
And here’s the catch: depending how close you move each button and horizontal boxes, the buttons overlap. In other words, crazy things happen. One “fix” is to make the buttons far apart like I did, (but even for mine there is a bit of glitchyness), but other than that… idk, mate. You could try to do some fancy cheese with math and computing whether the mouse is within a hexagon shape or not, but other than that… I would do your 3 box idea.
In other words, I would create a widget called “hexaButton”, which has an event “onHover”, “onPress”, etc. Then you would need to create the fancyness only once, and just drag it in like any other widget.
I wish UMG had the ability to have custom shapes
Is it possible to make your own UMG widget class? Like extend the image into a button?
^I would consider doing that, with a checker that looks at the mouse location and checks to see if it’s within the bounds of a hexagon, like so:
Thank you for all your suggestions. The button overlapping is exactly what I want to avoid, so I’ll probably have to decide between doing the simple 3-button way, or dabbling in fancy math 
Checking if the cursor is within a hexagon seems much easier on paper than in blueprints, and also I’m not sure how much more efficient this math-solution will be in terms of performance, though. But anyway, thanks again
The math is just a very simple equation:
public function isInside(pos:Vec2Const):Boolean
{
const q2x:Number = Math.abs(pos.x - _center.x); // transform the test point locally and to quadrant 2
const q2y:Number = Math.abs(pos.y - _center.y); // transform the test point locally and to quadrant 2
if (q2x > _hori || q2y > _vert*2) return false; // bounding test (since q2 is in quadrant 2 only 2 tests are needed)
return 2 * _vert * _hori - _vert * q2x - _hori * q2y >= 0; // finally the dot product can be reduced to this due to the hexagon symmetry
}
Unreal devs have also stated creating custom shaped buttons is planned but no date on when it will be added.