Custom 9-Slice with Multiple Frames Looks Funny

Help and Feedback Art Design Support
#1

I’m trying to create a GUI element with round corners with a specific shape. Image a 16x4 grid where each corner is rounded (quarter circle) and the rest are completely filled in. I’m making this GUI scale so I can’t use the default 9-slice functionality since that works in pixels and does not scale with other sizes. I’ve decided to use multiple frames to accomplish this, but it ends up looking funny at some sizes.

A size
image
Smaller
image
Even smaller, this one happens to be perfect
image
EVEN smaller
image

Does anyone have a solution for this?

Just to be clear, there is an image frame for each corner, and 2 frames for the rest. (Horizontally and vertically, though I may change it to 5 frames later because I plan on making this transparent, and overlapping transparent frames will look weird) It’s pretty much a 9-slice, but not Roblox’s build in one since it’s limited to only pixel sizes. All these frames are a child of an invisible frame that has an AspectRatioConstraint with an aspect ratio of 4:1. That frame scales based on screen size, and the corner frame children scale based on that. I’m doing this to have the corners scale with the screen size. I’ve technically already done that, but there seems to be a glitchy pixel offset on some screen sizes.

Explorer Tree
image
Any help is appreciated.

#2

I’m not sure if the affected is the position or the size of the corners.

Using Scale for position and size makes it not look the same in different resolutions, are you positioning the corners using AnchorPoint or based on the size of the frame?

#3

Are you aware that 9Slice is possible with a single image ? there is a option to set one without this issue
image

#4

You could still use the default 9-slice functionality, but you’d have to script the scaling yourself. You can use the ImageLabel.SliceScale property and update it every time the screen size changes.

So if the size of the y-axis of the screen is 600, and your constant is 600 then: 600/600 = 1 so it will be original size. However, if the screen was 1200 and the constant is 600 then 1200/600 = 2 so it will double in size.

local screenGui = script.Parent
local imageLabel = script.Parent.Background
local constant = 600

local function updateScaling()
imageLabel.SliceScale = screenGui.AbsoluteSize.Y / constant
end

screenGui.Changed:Connect(updateScaling)

3 Likes