9-Slice Editor: Studio Beta

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:

Border Image

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:

  1. Go to File > Beta Features in Studio
  2. Check the box before 9-Slice Editor
  3. Restart Studio

Once the beta is enabled, you can take the following steps to try out the 9-Slice Editor:

  1. Create a ScreenGui instance in the StarterGui object

  2. Create an ImageLabel or ImageButton within the ScreenGui

  3. 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

  4. 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

  5. Click on the SliceCenter property

  6. Click the “…” button within the SliceCenter property

  7. 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!

533 Likes

This topic was automatically opened after 9 minutes.

It is cool! This will greatly simplify my work with images

15 Likes

I’ve always been frustrated with the slice properties in the Properties window - they just never behaved how I expected. This is a great addition - thank you!

16 Likes

Lovely! Maybe one day we’ll even get to edit the amount of slices there are, that would be cool!

9 Likes

Nice feature! I always have to upload custom separated borders and position them. Though it wasn’t granted that the pixels would fit correctly if scale was used to position the border’s parent frame.

6 Likes

A very welcome change! It was previously very cumbersome to edit, and as such this UX improvement is much appreciated.
This may be slightly off-topic, but are there plans on supporting 9-slice for features such as Beams, ParticleEmitters and other similar 3D textures?

PS: This also seems to be your first time being active on DevForum. Welcome!

5 Likes

This is fantastic, I’m super happy to see more property widgets showing up.


I tried to use this on a UI element I had stored in replicated storage as a component and got this message however. It would be great if this could load the asset so I don’t have to copy the UI into a screengui.
RobloxStudioBeta_2021-11-03_15-56-01

I also notice that the image gets interpolated really harshly if it’s small. I would prefer if it tried to upscale using nearest neighbor in integer steps (for consistent pixel size).
image

Really nice that the lines snap to the nearest pixel border though. Just need to be able to see the pixels lol.

8 Likes

This is awesome, now I no longer have to go find the image dimensions for something I want to scale with slice.

1 Like

Hi @PeZsmistic! Thanks for your feedback! If you set the ResampleMode of the ImageLabel/ImageButton to Enum.ResamplerMode.Pixelated, the 9-Slice Editor will show the pixelated image.

4 Likes

That’s handy, but I don’t want this element to be displayed with that mode ingame, I just want to be able to see it for the purpose of configuring the slice accurately. :slight_smile: 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.

15 Likes

It would be VERY useful for Scrolling Frames and of course other types of GUIs

yes it would be really cool to see my game in 2 slice. i wonder what 100 slice would look like.

6 Likes

Really cool addition makes it super easy to understand and implement
Adding a toggle-able pixel grid would be useful and maybe a way to zoom in for larger images

14 Likes

Very useful feature, you can really do a lot of things with it now! :grin:

20 Likes

Wasn’t this a builtin or is it a Qt thing now?

This feature will make me use 9-slicing way more often now that it’s much easier to use!

Amazing work Roblox! I hope more useful updates like this get released in the future!

3 Likes

I look forward to using this in my future endeavors. Additionally, I would love to see in the future the ability to set how many slices we want an image to be put into (9 Slice - 45 Slice).

Thanks for the helpful article, I don’t see this too much anymore. :blue_heart:

Roblox … this is outstanding!!

Thanks for the feedback. No plans at this time but this is an interesting idea to consider.

4 Likes