This topic was automatically opened after 11 minutes.
Am I correct when I say that UIs in experiences will look way better now?
17 Likes
This is amazing.
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 really will improve workflow, thanks roblox 
8 Likes
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.
26 Likes
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)
21 Likes
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.
16 Likes
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)…
I can’t wait to try this out!
3 Likes
Not really, 9-slices already existed before this.
4 Likes
What are you trying to accomplish, not sure I’m clear on the use case.
4 Likes
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?
3 Likes
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.
2 Likes
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
1 Like
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.
3 Likes
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!
1 Like
The image I used wasn’t the best example, my apologies. I’ll try to create a better model.
Here’s a more practical example.
I have created this image to use for testing purposes:
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.
Thank you for your response!
5 Likes
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.
You can already accomplish that using spritesheets with ImageLabel | Roblox Creator Documentation and ImageLabel | Roblox Creator Documentation.
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.
Hi PeZsmistic, thanks for your comments. I agree that the ability to toggle between interpolated/pixelated mode and the ability to open images that aren’t visible in the workspace would be valuable improvements to the 9-Slice Editor. I’ve created separate tickets to track both of these suggestions in our backlog, but can’t make any promises about when we get to them.
What do you think about having the 9-Slice Editor automatically use pixelated resample mode when the image is scaled larger than actual size in the editor, and bilinear (smooth) resampling otherwise?