Images editted using 9-Slice are changing in shape with the screen size

[leoprad2006 (Leoprad)]

Issue:

I am using the Splice Edittor so I can resize my images however wide or long I want whilst retaining their corners and their shape in general. I am also editting all my UI with the Device Emulation on and using scale property so that the UI is consistent across all devices.

However, for some reason, when I switch from PC emulation to a mobile emulation, the whole UI is somehow squished and rounded. Here, I have provided pictures of how it looks on PC (first) vs Mobile (second):

Funny enough, the buttons in the “Donations” board are also using the 9-Sliced editted property but they don’t get squished. Only the UI under ScreenGui.

I am attaching the 9-Slice properties that I am using for all the buttons. All the buttons that I am using have the 9-Slice property:

---

What I have tried:

• Using AspectRatioConstraint (does not work)
• Using Offset instead of Scale (does not work)
• Changing the SliceScale property to 1 instead of 0.5 (does not work)

[RatiusRat (Boopmaster)]

I recommend using UIScale to scale with the device and keep all elements as offset.

[leoprad2006 (Leoprad)]

@RatiusRat

I recommend using UIScale to scale with the device and keep all elements as offset.

Did not work

This is what it looks like when I put UIScale and changed the Size to use Offset instead of Scale.

First image: PC

Second image: Mobile

[leoprad2006 (Leoprad)]

Ok, I have found a quick-fix for my issue. I am using UIScale under all my ScreenGuis and changing its Scale property depending on what device I am using. For example, PC uses a scale value of 1 and for mobile, I have figured out a scale value of 0.35 works the best.

Now, to change the value of the scale on runtime, I made a script to detect the user’s device, and based on the user’s device, the Scale value changes to either 1 or 0.35.

Here is the script:

---------------------// SERVICES \\---------------------

local UIS = game:GetService("UserInputService")
local Players = game:GetService("Players")

------------------------// UI \\------------------------

local PlayerGui = Players.LocalPlayer:WaitForChild("PlayerGui")

------------------// DETECT PLAYER DEVICE \\------------------

local function PrefferedInputChanged()
	local prefferedInput = UIS.PreferredInput
	local uiScale = 1
	
	if prefferedInput == Enum.PreferredInput.Touch then
		uiScale = 0.35
		
	elseif prefferedInput == Enum.PreferredInput.Gamepad then
		uiScale = 1
		
	elseif prefferedInput == Enum.PreferredInput.KeyboardAndMouse then
		uiScale = 1	
	end
	
	-- Changing UIScale ratio
	for _, descendant: UIScale in PlayerGui:GetDescendants() do
		if descendant:IsA("UIScale") then
			descendant.Scale = uiScale
		end
	end
end

PrefferedInputChanged()
UIS:GetPropertyChangedSignal("PreferredInput"):Connect(PrefferedInputChanged)

(Yes, I am using the new PrefferedInput )