Issue with UI list and scaling

Help and Feedback Scripting Support
1

I am making a shop UI for my sword fighting arena.

Alright, so I have never learned how to UI scale until now and I have figured it out completely. However I am having this issue with a shop UI that uses a for loop to list a set of sword types you can buy to descend on the y axis.

Here is what the shop UI looks like on PC and should look like on Mobile:
https://gyazo.com/2c405ed88844b3b2c052a3b3e84525d7

Here is what it looks like on mobile simulated by Roblox Studios:
https://gyazo.com/08e4d83f5a361da332811046379168ef

Here is what the system looks like via explorer:
https://gyazo.com/db3fff939f72259f4aed0d3d648cdf75

/ The script below is the local script that is highlighted in the last photo above^
the inventory is just a folder parented by the player that has a set of string values by the name of swords. When entering the arena it looks for the sword named “Equipped” to give you

Also the frame parented by the local script is the template for a sword button and the number values parented by the folder that is parented by the local script are the names and values are the price.

(Purchased by in game collectable coins.)

Thanks,

local player = game.Players.LocalPlayer

wait(1)
local inv = player:FindFirstChild("Inventory")
function refresh()
	for i,v in pairs(script.Parent:GetChildren()) do
		if v.ClassName == "Frame" then
			v:Destroy()
		end
	end
	
	for i,v in pairs(script.Shop:GetChildren()) do
		local clone = script.Frame:Clone()
		clone.Parent = script.Parent
		clone:FindFirstChild("title").Text = v.Name
		clone:FindFirstChild("price").Text = v.Value
		clone.Position = UDim2.new(0.5, 0, (i-1)* 0.082, 0)
		
		for i,x in pairs(inv:GetChildren()) do
			if x.Value == v.Name then
				clone:FindFirstChild("TextButton").Text = "Purchased"
				clone:FindFirstChild("TextButton").TextColor3 = Color3.fromRGB(255, 0, 0)
				clone:FindFirstChild("TextButton").BackgroundTransparency = 1
				clone:FindFirstChild("TextButton").Active = false
				clone:FindFirstChild("TextButton").TextSize = 20
			end
		end
		
	end
end

script.Parent.Parent.Parent.Open.MouseButton1Click:Connect(function()
	refresh()
end)
1 Like
2

Also every single UI element is constrained and scaled.

3

To get the X value you can just do some simple math. Background.X - Padding * 2

The Y is a bit harder. You could use an Aspect Ratio Constraint to keep the size then same. And a List Layout to keep them in order. If that doesn’t work I dont know what to do.

4

That’s what I was doing. I was scaling all of the UI elements in the game to make the game available for mobile players as it isn’t of now and ended up with that mess.

5

im working on a solution for this. I will post it as soon as I do!

6

Alright, thanks a lot! xxxxxxxxxxxxxxxxxxxx needed more characters in order to chat

1 Like
7

Got it!

-- Too bad the script dosnt look good. I wiped this up in a few minutes after finding out how to do this

local CellSize = script.Parent.Frame.UIGridLayout.CellSize
local AspectRatio = CellSize.X.Offset / CellSize.Y.Offset


script.Parent.Frame:GetPropertyChangedSignal("Size"):Connect(function()
	local Size = script.Parent.Frame.AbsoluteSize
	
	local X = Size.X / 4 -- 4 Being the amount of children per level
	local Y = X / AspectRatio
	
	script.Parent.Frame.UIGridLayout.CellSize = UDim2.new(0,X,0,Y)
end)

It still uses an aspect ratio, but not the object part.
Here’s the place the script is in. Feel free to use it if you want!
UI List and scaling solved (33.9 KB)

8

I don’t think were not on the same page, sorry for the inconvenience.
Look at link 1, and then link 2,

what is on link 1 is what it is supposed to look like on mobile after scaling, what’s on link 2 is what it looks like after scaling on mobile.

And I deeply apologize for wasting your time.

The problem is that the scaling and UiAspectRatio for the frame and scrollingframe aren’t working.

9

And I also figured that, that could be a scripting issue.

10

You could still use my script. You just need to change some stuff around.

Like instead of local X = Size.X / 4 it could be local X = Size.X. The script should do exactlly as you asked for, it scale ui to fit multiple devices using a UI grid layout. If it dosnt you can use scale.

1 Like
11

Alrighty! Thanks for your work!

1 Like
12

@deadwalker601 , I would like to make a follow up on this post. So it turns out the plugin that I was using for scaling is semi broken and so when I had made a scrolling frame it made the size {nan, 0}{nan, 0}. I didn’t know how to interpret this but I decided to manually resize them and it worked fine. Thanks for your help anyway.