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.