How do I transform certain parts of a UI element?

Help and Feedback Scripting Support
1

  1. What do you want to achieve? UI with rotation in the middle (preferable with nine slicing since I start from a circle)

  2. What is the issue? I can’t find any API for curving parts of UI

  3. What solutions have you tried so far? I have looked for solutions and I got UI Corner stuff (not what I’m looking for). The only solution I have tried so far is overlaying the images but that doesn’t allow me to have clean curves at the edges.

an example would be: image
I also want the lines in the center removed if possible (curve API would be able to do that)

The image I’m starting with is: image

I’m hoping there’s also a way to script this in too!

One last thing: I’m looking for some API reference or an idea to get me on the right path, not an entire script. I still need to learn!

2

You mean a ui roundifier? If so, look up ui design in plugins in toolbox (in roblox studio).

3

Or just use this: link to plugin

4

I meant what I showed in the top image where I can stretch/move/rotate half of the image and keep the other half static. This is because I cant create a new image every time if its user generated. (sorry im on mobile so this may be hard to read)

Edit: kind of like the transform tools in gimp/photoshop but I can do it in studio with a script

5

Honestly, check out the plugin I sent. I’m also on mobile atm, and also don’t really know anything that would fit your needs more.

6

I see your point, although I don’t know if its just the light version but it seems to only do gradients and roundify (as I recall?) Thanks for trying though.

7

Yeah, is roundify not what you’re looking for…?

8

So basically create one (white) ui, another inside of it, slightly smaller (black) ui and stretch the first one.

9

I already have the gui round, idk if you can see the images. im looking for a way to transform parts of the image like tools such as stretching rotating and moving certain parts of the image (half stays the same, half I stretched to the left and rotated it down)

and no im not just looking for nine slicing

edit: didnt catch your comment in time, is there a way to do it without multiple guis?

10

Sorry, I’m still not quite sure I understand…

11

i’ll continue the draft when im on pc! should be easier for me to explain when I can get images

12

I just thought of something quick: the simplest form of this is warping the image, can i warp the image in any way to get a new image?

13

Yeah, what exactly do you mean by “warp”?

14

distort the image through roblox studio

make the image messed up without resizing it?

1 Like
15

so like changing the ImageLabel.ImageColor3 and such?

16

search something like image fisheye effect, is there any way to edit an image like that?

17

Sorry, that isn’t possible with Studio’s limited tools. For that reason, you see people using Photoshop and getpaint.net and Photopea to make their UI as Roblox lacks distortion tools.

2 Likes
18

Yeah, I do believe that is possible with slicing and such. Basically take a rounded imageframe from the roundifier and replace the image with the image of your choice. Not 100% sure if this works, I haven’t tested it.

19

I recommend using UICorner more, since it’s easier to manage. It’s its own thing on Roblox Studio, put it in a frame, button, it will round it. Some stuff isn’t compatible with UICorner like TextBoxes, I use roundify on those.