Is having a Polygon GUI possible?

  1. What do you want to achieve? Keep it simple and clear!

trying to make an ability hexagon GUI,and i want to tween it to different shape when something happened.

  1. What is the issue? Include screenshots / videos if possible!

I searched for a long time, and still can’t find about this or making polygons GUI.
As a lua noobie, It was suffering for not having any reference.

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

Thought about making polygons by models and using ViewportFrame , but that will be so hard to run by mobile or lesser device.

Also found a post about Splitting GUI into Geometric Shapes,
but that is not best ways for this.

Not going to use images, because of it’s Resolution, and it’s Non-deformable.

I’m trying to use Vertices to make polygons, but is there any functions about GUI Vertices?

Thanks for reading these and answering these, I’ll be grateful so much.

In what way are you trying to change the shape?

1 Like

I understand what you mean. Roblox has the general box shape, so you would have to invent your own shape made out of the rectangles.

Then you would have to make your own “Deform” script that changes the set of rectangles you use into a new set that conforms with the new shape you desire.

I Updated my post. just sorry for didn’t explain clearly.
I’m trying to tween the polygons in different shapes, that means i want to tween the Vertices.

Gotcha. One method to do this is called polygon triangulation. Given a set of vertices, it fills the shape with triangles. This is not ideal because it requires running the algorithm every frame of the tween. Also, triangle images are prone to seams, as seen here. Would a spritesheet work for your use case?

EDIT: A ViewportFrame might work. You could use a polygon triangulation algorithm on the vertices and fill it with wedges. Wedges won’t produce seams.

OP already looked into this I think. I dove into this thread (and the one it linked as well) which goes into the triangulation method.

OP also mentioned ViewPort frame can’t work since you cannot deform shapes - and again, your method requires the triangulation algorithm (which OP does not want to use). ViewPort frames are hard to work with and can be glitchy when dealing with complex parts/GUIs together as well.

To OP:
I’ve come up with a way to turn a regluar shape into another regluar shape that has 1 side less than the original. The issue is it cannot scale up unless you add new rectangles or start with extras, which is quite difficult to plan out (but will be a lot faster than triangulation).

Just outline your shape in rectangles, and fill in the center portion that is left out with another rectangle. If you want to scale down, just rotate two rectangles inward. Adjusting the form will be tricky, but it is feasible with this construct. Just make sure the rotations are about an outer pivot vertex, that way the overlapping parts don’t go outside the bounds of your morphed shape.

Also important: I have never tried this, so it would be beneficial to get some verification from others regarding this.

Hope this helps

Delaunay triangulation is different than polygon triangulation. And I’m not proposing that he deform shapes because you’re right, that’s not a thing. The shapes are made out of triangles, so you resize/reposition the triangles each frame. Also, what makes you think Viewports are glitchy?

Check this list of reported bugs. There are a lot of issues with VPF that people have when they try to implement new ideas. It’s better now (some of these bugs may have been fixed) but it’s risky working with this, especially given that VPF aren’t really meant for iterated transformations every frame that would be fairly complex (moving wedges in specified paths might work, granted that these are predefined). But it is still arises that recently in this thread, surface GUIs don’t work as intended in VPF, which leaves limited options using wedges as a make-shift GUI object.

The Delaunay triangulation Algorithm as mentioned above, (which is pretty much polygon triangulation) sometimes called Point set triangulation is sometimes useful over other triangulation methods because it tends to create less amounts and more uniform triangles and you can easily apply constraints.

in theory you can try to use a triangulation algorithm and place it directly in front of the camera, this can give the effect that it is a GUI similar to what Crazyman32 did for placing models within a frame, with this you can easily tween the shape as well (again this is theoretical)

Then if you wanted to you can place a surface GUI or part behind the polygon to make it “fit in” with surrounding GUI

Here, pentagon to hexagon with wedges in a ViewportFrame. I made a pretty busted triangulation module a while back that works for the most part but has some bad edge cases. Polygon Triangulation Module

6 Likes

i’m kind of interested in this thread now, did you use the ear clipping method for this?

Yep. IIRC the problem was with my point-in-polygon function. Here’s the place file. The code is super janky because I made it quickly. PentagonToHexagon.rbxl (23.7 KB)

2 Likes

Yes! Worked stablly!

2020-02-01_18-05-38

Sorry it’s late for this, but i still need to show this thread is work or not.
but there’s a question. In low Resolution device (like mobile) , this gui will get jagged.
Just a mention for anyone who reading this.

Thanks AstroCode a lot.

1 Like

Good work!

I want to clarify that the triangulator module has edge cases where it doesn’t work. Also, I hope you’re reusing the same triangles and not creating/destroying them every frame like I was. I only did that to make the concept quicker. It’s poor for performance.

2 Likes