Hello developers! We are excited to announce the BETA RELEASE of a new visual editing tool in Roblox Studio: the 9-Slice Editor.
9-slice image scaling was already available before, but previously required manual text entry in the SliceCenter property in the Properties Panel, with no method to visually understand where the image was being sliced.
The new 9-Slice Editor makes it quick and easy to set your 9-slice properties. With the 9-Slice Editor, you can:
- Drag 4 lines to create your slices, instead of manually entering numbers in SliceCenter
- Enter numerical slice offsets (rather than X, Y positions), making it easier and more intuitive to slice the image accurately
Haven’t used 9-slice before? Read on for more info about the value of this technique and details on the new editor!
Custom Borders Using Images
When creating 2D UI, developers frequently want to create rectangular buttons and UI objects with custom borders. If you use a custom image for your border, the image will stretch when resizing the UI object.
To help illustrate the problem, let’s say you wanted to put a border around several rectangular images. First, you designed a border image that you’d like to apply to multiple UI objects. Let’s use this image as an example:
Next, you put the border image behind 2 Image Labels of different sizes: one square, one rectangular:
Uh oh! Horizontally scaling the border image on the right produced a distorted, unappealing result, with noticeable stretching of the custom corner graphics.
We actually want the rectangular border to look something like this instead:
9-Slice Scaling to the Rescue!
You can avoid stretching the corners of your image by using a technique called 9-Slice. Using this method, we slice the source image into 9 smaller sub-images and define different scaling rules for each sub-image.
The scaling rules for each sub-image are:
- The corner sub-images (1, 3, 7, 9) are not stretched
- The top (2) and bottom (8) sub-images are stretched horizontally
- The left (4) and right (6) sub-images are stretched vertically
- The center sub-image (5) is stretched both horizontally and vertically
So, when we resize our frame image with 9-slice scaling, this is what happens:
| Before 9-Slice: ❌ | After 9-Slice: ✅ |
Benefits of 9-Slice
- Design Preservation: avoids distortion of border and corner details, preserving rich design
- Asset Reuse & Lower Memory Usage: 9-slicing allows designers to efficiently reuse the same textures and UI components for multiple use cases/sizes, saving memory as a benefit
- Faster design/iteration workflow: it is faster to get the desired results with a visual editor
- Dynamic sizing: 9-sliced buttons and frames can be easily resized to fit translated text and other examples with unknown dimensions
New 9-Slice Editor
The new 9-Slice Editor allows you to visually set your slices so you can get the desired result, as seen in the above examples.
Visual Slicing Area
- The 4 red vertical and horizontal lines are draggers overlaid on top of the source image - the lines represent the edges of the 9 slices
- The red lines can be dragged to set the 9-slice boundaries for your image
- We also display the original image resolution underneath
Offset Editor
- For more precise control of the dragger positions, you can enter exact pixel offsets
- Each offset represents the distance from the edge of the image to the 9-slice boundary
- More info on how the offsets relate to the SliceCenter property can be found below
How do I open the 9-Slice Editor?
First, you must enable the 9-Slice Editor Beta Feature in Studio:
- Go to File > Beta Features in Studio
- Check the box before 9-Slice Editor
- Restart Studio
Once the beta is enabled, you can take the following steps to try out the 9-Slice Editor:
-
Create a ScreenGui instance in the StarterGui object
-
Create an ImageLabel or ImageButton within the ScreenGui
-
Select the ImageLabel/ImageButton and change the “ScaleType” property to “Slice”
NOTE : SliceCenter will not show up in the properties panel until you select “Slice” as the ScaleType
-
Add an image that you’d like to use to test the feature, by clicking the “Image” property, then “+Add Image” to load in your image
-
Click on the SliceCenter property
-
Click the “…” button within the SliceCenter property
-
The 9-Slice Editor should should now open and you can adjust the slices!
Here is a video of opening the 9-Slice Editor:
What Are the Offsets in the 9-Slice Editor?
The left, right, top, and bottom offsets used in the 9-Slice Editor are different from the SliceCenter property values. Each offset represent the number of pixels between an edge of the source image and the red dragger associated with that side. We chose to show offsets instead of the SliceCenter values because the offset values are more intuitive to work with and it is clear when the slices are applied evenly, with no additional math required.
The SliceCenter can be computed with this code:
local SliceCenter = Rect.new(leftOffset, topOffset, imageWidth - rightOffset, imageHeight - bottomOffset)
Known Issues
- Changing the Image property (swapping out image) while the 9-Slice Editor is open is currently not supported
- When draggers overlap, it is difficult to tell which one is on top
Please let us know what you think of the 9-Slice Editor and post some examples of what you create. Happy slicing!
I would have to set that, open the tool, and then unset it, which is a bit cumbersome. Would be nice if I could toggle this in the tool instead.
