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?
Hi, nice mockup and thanks for the great suggestion! We’ll investigate adding real-time feedback in the next round of 9-Slice improvements.
2 Likes
Thanks for the feedback @MatkeFTW! I made an internal ticket to track the addition of an “Image Size” property or indicator for ImageLabels/ImageButtons.
Would you need the ability to get the image size of images that haven’t been loaded? For example, you have an ImageLabel/ImageButton with a Content ID that isn’t rendered anywhere so the texture isn’t fetched?
There’s also a few different ways of adding such an image size API, for example, we could add a function to ContentProvider such as ContentProvider:GetImageSize(string textureId). Any thoughts on this?
1 Like
Hi, the original 9-Slice Editor beta post: 9-Slice Editor: Studio Beta has some info about how 9-slicing works. Usually 9-sliced scaling is used for custom borders, frames, or when you have corner decorations that you want to avoid being stretched.
But deforming faces is a cool application too!
Thanks! I appreciate it.
I think automating the pixelated resample mode is the best thing to do. Your criteria sounds like it would work fine.
Oh, this is incredible. I love it
This is really exiting, as developper’s UI’s will become more advanced, personalized and unique. Making them stand out, this is really good to see.
Hmmm, well I personally would use the read-only property while designing UI for my game. I usually tend to forget sizes of images that are in my game, and adding this property would help a lot when designing UI for a game.
As for the ContentProvider:GetImageSize(string textureId) function, that would be would be a great addition, I can see situations where this function would be useful.
Woah :0000 this looks so cool!!!
This makes me want to get into UI just to use this lololol
Awesome stuff. This platform just keeps getting better.
The only issue I have with the Slide Editor is that if you have rounded corners on your image, they do not scale on different screen sizes. For example, the curves appears small on large screens and large on small screens which results in the image taking a whole new form on different screen sizes.
Hi everyone, I just wanted to give an update that the 9-Slice Editor now supports resizing the image preview when you resize the editor window! This should make it easier to edit the slice boundaries of large 9-sliced images.
The image preview now uses pixelated resampling (not smooth) if scaled larger than 100% size to make it clearer to see the slice boundaries of small images.
1 Like
This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.