Hello, I am a novice UI designer who is currently working on an unnamed project. For the games UI, I have been using 9-Slice which seemed to work fine until I changed the device the game was played on. When switched to mobile, the boarder noticeably becomes much larger and in doing so obscures the frame’s contents. Here is an example:
Now obviously nobody will be playing this game on an iPhone 4s, but I used it as the most extreme example to demonstrate the distortion that occurs.
Is there any remedy to making the 9-Sliced boarders scale correctly with each device? I have tried UIAspectRatio, but it does not seem to preserve the images original size.
Any help or feedback is appreciated. Thank you for your time!
Still haven’t figured out a solution 3 days after posting this… I’m assuming that there is no way to correct this issue given 9-Slices behavior. This leads me to believe that different variations must be made for each type of device unfortunately. Really hope I’m missing something. Any reply helps. Thanks.
Hi! Sorry for late reply lol i just found a way to fix it!
I made this simple script that scales all 9-Slices in my uis
For it to work you need to give an attribute “Constant” to the object
So if the AbsoluteSize.Y of the Slice’s Parent is 24.8 then the Constant should be 24.8 so that will be equal to Scale 1
! TAKE NOTE it works ONLY with UIAspectRatioConstraint Influenced Ancestors !
local function sliceScale(AbsoluteHeight, constant)
return AbsoluteHeight / constant
end
local Slices = {}
for i, v in script.Parent:GetDescendants() do
if v:GetAttribute("Constant") then
Slices[v] = v:GetAttribute("Constant")
end
end
local function UpdateAll()
for i, v in Slices do
i.SliceScale = sliceScale(i.Parent.AbsoluteSize.Y, v)
end
end
workspace.CurrentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(UpdateAll)
UpdateAll()
