Hotbar Gui bugs when I convert it from offset to scale

  1. What do you want to achieve? Keep it simple and clear!
    I want to use scale for my hotbar instead of offset, because it will look different on other devices

  2. What is the issue? Include screenshots / videos if possible!
    This is what I want to happen (it happens when I keep it at offset)


    This is what happens if I change it to scale instead of offset:

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I looked online and also changed everywhere it said in the code “Offset” to “Scale” but that didn’t work and it didn’t seem to make any difference

game:GetService('StarterGui'):SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
local uis = game:GetService("UserInputService")
local player = game.Players.LocalPlayer
local char = workspace:WaitForChild(player.Name) 
local bp = player.Backpack
local hum = char:WaitForChild("Humanoid")
local frame = script.Parent.Slot
local template = frame.Template
local equipped = 0
local unequipped = 0.7
local iconSize = template.Size
local iconBorder = {x = 5, y = 5} 
frame.Visible = true

local inputKeys = { 
	["One"] = {txt = "1"},
	["Two"] = {txt = "2"},
	["Three"] = {txt = "3"},
	["Four"] = {txt = "4"},
	["Five"] = {txt = "5"},
	["Six"] = {txt = "6"},
	["Seven"] = {txt = "7"},
	["Eight"] = {txt = "8"},
	["Nine"] = {txt = "9"},
	["Zero"] = {txt = "0"},
}

local inputOrder = { 
	inputKeys["One"],inputKeys["Two"],inputKeys["Three"],inputKeys["Four"],inputKeys["Five"],inputKeys["Six"],inputKeys["Seven"],inputKeys["Eight"],inputKeys["Nine"],inputKeys["Zero"],
}

function handleEquip(tool)
	if tool then
		if tool.Parent ~= char then
			hum:EquipTool(tool)
		else
			hum:UnequipTools()
		end
	end
end

function create() 
	local toShow = #inputOrder 
	local totalX = (toShow*iconSize.X.Offset)+((toShow+1)*iconBorder.x)
	local totalY = iconSize.Y.Offset + (2*iconBorder.y)
	frame.Size = UDim2.new(0, totalX, 0, totalY)
	frame.Position = UDim2.new(0.5, -(totalX/2), 1, -(totalY+(iconBorder.y*2)))
	frame.Visible = true 
	for i = 1, #inputOrder do
		local value = inputOrder[i]		
		local clone = template:Clone()
		clone.Parent = frame
		clone.Label.Text = value["txt"]
		clone.Name = value["txt"]
		clone.Visible = true
		clone.Position = UDim2.new(0, (i-1)*(iconSize.X.Offset)+(iconBorder.x*i), 0, iconBorder.y)
		clone.ImageTransparency = unequipped
		clone.LabelFrame.ImageTransparency = unequipped
		clone.ItemName.TextTransparency = unequipped
		local tool = value["tool"]
		if tool then
			clone.Tool.Image = tool.TextureId
			clone.ItemName.Text = tool.Name
		end
		clone.Tool.MouseButton1Down:Connect(function() 
			for key, value in pairs(inputKeys) do
				if value["txt"] == clone.Name then
					handleEquip(value["tool"]) 
				end 
			end
		end)

	end	
	template:Destroy()
end

function start() 
	local tools = bp:GetChildren()
	for i = 1, #tools do 
		if tools[i]:IsA("Tool") then 
			for i = 1, #inputOrder do
				local value = inputOrder[i]
				if not value["tool"] then 
					value["tool"] = tools[i]	
					break 
				end
			end
		end
	end
	create()
end

function adjust()
	for key, value in pairs(inputKeys) do
		local tool = value["tool"]
		local icon = frame:FindFirstChild(value["txt"])
		if tool then
			icon.Tool.Image = tool.TextureId
			if tool.Parent == char then 
				icon.ImageTransparency = equipped
				icon.LabelFrame.ImageTransparency = equipped
				icon.ItemName.TextTransparency = equipped
			else
				icon.ImageTransparency = unequipped
				icon.LabelFrame.ImageTransparency = unequipped
				icon.ItemName.TextTransparency = unequipped
			end
		else
			icon.Tool.Image = ""
			icon.ItemName.Text = ""
			icon.ImageTransparency = unequipped
			icon.LabelFrame.ImageTransparency = unequipped
			icon.ItemName.TextTransparency = unequipped
		end
	end
end

function onKeyPress(inputObject) 
	local key = inputObject.KeyCode.Name
	local value = inputKeys[key]
	if value and uis:GetFocusedTextBox() == nil then 
		handleEquip(value["tool"])
	end 
end

function handleAddition(adding)
	if adding:IsA("Tool") then
		local new = true
		for key, value in pairs(inputKeys) do
			local tool = value["tool"]
			if tool then
				if tool == adding then
					new = false
				end
			end
		end
		if new then
			for i = 1, #inputOrder do
				local tool = inputOrder[i]["tool"]
				if not tool then 
					inputOrder[i]["tool"] = adding
					break
				end
			end
		end
		adjust()
	end
end

function handleRemoval(removing) 
	if removing:IsA("Tool") then
		if removing.Parent ~= char and removing.Parent ~= bp then
			for i = 1, #inputOrder do
				if inputOrder[i]["tool"] == removing then
					inputOrder[i]["tool"] = nil
					break
				end
			end
		end
		adjust()
	end
end

uis.InputBegan:Connect(onKeyPress)
char.ChildAdded:Connect(handleAddition)
char.ChildRemoved:Connect(handleRemoval)
bp.ChildAdded:Connect(handleAddition)
bp.ChildRemoved:Connect(handleRemoval)
start()
adjust()

This is how it looks like in explorer

image

Any help would be greatly appreciated!

1 Like

scale is from the values 0 - 1 and it’s relative to it’s parent. 0 being no size, and 1 being the exact size as it’s parent. UDim2.new(1,0,1,0) makes it the exact same size as it’s parent. So what your looking for is a value between 0 - 1 for the x scale, and a value between 0 - 1 for the y scale.

I had done that, but when I played the game the hotbar became glitched like I had shown in the picture. (I haven’t made any edits to the script, because idk what to change)

That means there’s another spot in the script that changes the size of the hotbar. Search your script for another place that might do that

For starters, instead of setting the frames position by their index, you should try using a ListLayout or a GridLayout.
Anyways, using offset to resize frames is totally fine, and it won’t look different in other devices, it could just look bigger or smaller depending by the said device screen resolution.
Using scale means that the square shapes in your image will lose their ratio and become rectangles (unless you’re using a UIAspectRatio). If I were you I would keep the Offset.

To answer your question, we need some more information, like the position, size and AnchorPoint of every frame you’re trying to resize.