Hello developers! We wanted to let you know that the new 9-Slice Editor is now live for all users in Roblox Studio. This editor was previously a Studio Beta Feature.
We’ve made a few changes and improvements since the 9-Slice Editor beta was released:
New enhanced image dragger design allows you to easily select the dragger you want to move when 2 draggers are nearby or overlapping.
The 9-Slice Editor will now update if you swap the Image property of the selected ImageLabel/ImageButton while the editor is open. The slice offsets will be saved when you swap images.
The 9-Slice Editor won’t reopen automatically if you had it open last Studio session, in order to help de-clutter your Studio workspace.
We appreciate all the feedback during the beta for the 9-Slice-Editor. It was a huge help in improving the tool. Let us know if you have any questions!
This makes creating UIs 10 times easier, without having to import new UIs every time you need to simply size one differently. I’m excited to experiment and find all sorts of new uses for this tool.
Can you toggle visibility for each “slice”, so certain sections can be invisible in images?
This is going to make my UI-designing life a lot easier, great job!
However, I must say the creative potential in this tool is hindered by the inability for it to update in real-time. Since I, like many developers (probably), are not familiar with the slice tool yet, we essentially have to “wing it” when trying to figure out exactly what look we’re going for.
(Video example of what I mean, the image only changes after you finish dragging the draggers instead of updating while you drag them)
It’s a minor inconvenience and not that much of a concern, but I think it’s worth pointing out.
Never heard of a 9-slice editor until now. I guess this might help UI designers? Not sure how it works, but I’ll check it out later. Maybe you could add a small tutorial for people who don’t know how this works?
EDIT: I checked it out. It turns out you can make some starnge things with it. For example, I made an automatic deforming dog face:
Here’s the code, in case anyone’s interested (put this inside an imagebutton):
local tinfo = TweenInfo.new(1,Enum.EasingStyle.Cubic,Enum.EasingDirection.InOut)
script.Parent.MouseButton1Click:Connect(function()
while true do
local goal = {SliceCenter = Rect.new(math.random(20,160),math.random(20,160),math.random(20,160),math.random(20,160))}
local tween = game.TweenService:Create(script.Parent,tinfo,goal)
tween:Play()
tween.Completed:Wait()
end
end)
None of this feedback has been addressed. I cannot effectively use this tool in my game.
The only time I use 9 slice is for small UI elements, so there not being a way to toggle between pixel perfect and interpolated makes it impossible to be precise. All of my UI is also built as components under replicated storage, and thus the images are not “loaded”. This tool should load them instead of forcing me to copy the component template into startergui.
Awesome update! This should make setting up and adjusting UI frames FAR easier from now on. No longer will I have to take multiple images to stretch out a single style of framing (without deformation)…
Seems like this has much potential. Can’t wait to see what others will do with this.
Is there a chance that people could upload images which appear harmless, but when used with 9-slice and deformed, could turn into something which should be moderated?
That’s true with anything. Roblox doesn’t actively monitor text in your labels, for example. It’s up to the developer to do the right thing and up to the community to report something if they see something wrong.
It would be pretty nice if we could zoom in on the images in the editor. If the image is only 50x50 for example, trying to line up the draggers is really hard if your monitors pixel density is high
I have been using this since the beta came out and I must say it is a pretty useful tool!
No complaints here, however I’ve noticed the “Image Size” text in the window and wondered, would it be considered in the future to also add a read-only property to Images and ImageButtons that tells us the Image Size in the properties window, whenever I forget a image’s size, I often use the 9-Slice Editor to get the size.
Thank you so much for this! I’ve wanted this for a while. Admittedly I’ve used the same rectangle frame out of laziness because I didn’t want to manually resize it… Now making new sizes will be easy!
I’m trying to use the slice tool to change the size of this image without distorting the borders.
I’m having trouble deciding how I want to slice this image and how far I want the corners to be from the middle when sliced. However, it’s difficult to decide this because the image slices don’t update while you’re dragging the draggers, as shown here:
It is difficult to get the precise look you want when it only updates after you finish dragging the draggers.
To fix this, I made a mockup of the 9-Slice toolthat actually updates in real-time (it updates while you’re dragging the draggers). It’s very rough, but it accurately shows precisely what I want:
As you can see here, the image slices update while you’re dragging the draggers, which makes it much easier for me to get the exact look I want.
It only took about an hour to make the whole thing, so I don’t think it would be difficult to implement.
Hi, glad to hear this tool will be useful to you! Can you explain more about your usecase for toggling visibility of each slice individually?
If you are looking to crop the image being sliced, you could try using the ImageRectSize/ImageRectOffset properties. These currently don’t work with the 9-Slice Editor yet, but I am planning an update to support these properties in the next few weeks.
Sure thing. Correct me if I’m wrong here, but the 9-Slice editor exists to allow easy modifications of images, without having to mass-import individual assets, correct? In such a way, toggling visibility allows you to easily customize what you are showing to your users.
On some images, you may simply not need a portion to be visible, and either don’t have the capabilities or time to edit that portion out. This would resolve that dilemma.
It would also fix issues with mass importing images. You may need a series of images to produce an animation. However, if even a single one of those is blocked, you have to file separate appeals to get it un-moderated. Having every part of that animation on one image, on a spritesheet where you can toggle “slice” visibility, would make it so you have only one image to worry about.
Take a script that routinely changes the image of an imagelabel, to produce an animation. When changing images, no matter how performant your code is, there will usually be a slight “pause” when the image is just appearing (as it loads in). Instead, using a single image, but making only one “slice” visible at a time would fix this issue. It would help animate a spritesheet, giving clean transitions, and hopefully resolving that latency. This would be easier than importing 9 separate images, then having to load and loop through them all.
A third example may be for toggling visibility for a button that changes when you click it. You can easily switch back and forth between these two “slices” without having two separate gui elements that roblox has to load.
It is my belief that this would allow developers more flexibility, giving them more control and variety in their gui elements. It would help further the purpose of the 9-Slice editor, making images easier to work with. I would certainly use this function.
I understand this. However, the point of this feature is that of convenience. Technically, the 9-slice editor isn’t essential. That doesn’t mean it isn’t nice to have.
