NightyCode
Roblox profile
All tools Developer helpers

9-Slice Helper

Find the SliceCenter of any image and see how it stretches before you import it.

Drop your image here Or click to choose a PNG, JPG or WebP, or paste one. It stays on your device.

No image handy? Try one:

How it works

  1. Load your image

    Drop, paste or choose the button or frame image you made. It never leaves your device.

  2. Set the slices

    Drag the four lines so the corners sit outside them, or press Auto detect.

  3. Check the stretching

    The previews stretch it exactly like Roblox: corners keep their size, the edges and middle stretch.

  4. Copy into Studio

    Set ScaleType to Slice and paste the SliceCenter, or run the code on your ImageLabel.

Questions

What is 9-slice?
A way to stretch one image to any size without squishing its corners. The image is cut into 9 parts: the 4 corners stay the same, the edges stretch one way and the middle stretches both ways.
How does SliceCenter work?
SliceCenter = Rect.new(left, top, right edge, bottom edge) in pixels of the image. Everything inside that rectangle stretches. Studio's 9-Slice Editor shows the same thing as four offsets from the edges; this tool gives you both.
What does SliceScale do?
It makes the corners bigger or smaller (2 = twice as big) without uploading a new image. Handy for thin borders on big screens.
Why do my corners look squished on small buttons?
When an object is smaller than its two corners together, Roblox shrinks the corners to fit. Make the object bigger, or lower SliceScale.
What does Auto detect do?
It looks for the rows and columns in the middle that are all the same, because those can stretch without changing the picture, and puts the lines around them.

See all 19 tools