How do I calculate the CanvasPosition movement for a CS:GO Like crate system

Help and Feedback Scripting Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!

I want to make a CS:GO like cases system

  1. What is the issue? Include screenshots / videos if possible!

I’m trying to make the spinner rotate by using CanvasPosition but I made my icons inside the spinner scale across all devices

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I tried to fix this by calculating the distance, i’m not sure where I went wrong.

This is my script for the spinner:

local Main = require(script.Parent)

local TweenService = game:GetService("TweenService")

local PlayerSpinned = game.ReplicatedStorage.Events.PlayerSpinned
local Gradients = game.ServerStorage.Gradients
local RainbowGradient = Gradients.RainbowGradient

function ScaleToOffset(scale: Vector2, object: GuiObject): Vector2
	return scale * object.Parent.AbsoluteSize.X
end

local Items = {
	"Test1",
	"Nothing"
}

Nothing = {
	BackgroundColor = "#FF0000",
	Text = "Nothing (50%)"
}

Test1 = {
	BackgroundColor = "RainbowGradient",
	Text = "Test1 (50%)"
}

local function FromHex(hex: string): Color3
	local r, g, b = string.match(hex, "^#?(%w%w)(%w%w)(%w%w)$")
	return Color3.fromRGB(tonumber(r, 16),
		tonumber(g, 16), tonumber(b, 16))
end

local function ChangeIconAppearance(Icon, Appearance)
	local BackgroundColor = Appearance.BackgroundColor
	local Text = Appearance.Text
	
	if BackgroundColor ~= "RainbowGradient" then
		BackgroundColor = FromHex(BackgroundColor)
		Icon.BackgroundColor3 = BackgroundColor
	else
		local NewGradient = RainbowGradient:Clone()
		NewGradient.Parent = Icon
	end
	
	Icon.Text = Text
end

local Cooldown = false

PlayerSpinned.OnServerEvent:Connect(function(plr, CaseName)
	local leaderstats = plr:WaitForChild("leaderstats")
	local Spins = leaderstats:WaitForChild("Spins")
	
	local SpinFrame = plr:WaitForChild("PlayerGui"):WaitForChild("GameGui"):WaitForChild("CasesFrame"):WaitForChild("SpinFrame")
	local ItemTemplate = SpinFrame.ItemTemplate
	
	local ItemToGive
	
	if Cooldown == false then
		Cooldown = true
		if Spins.Value >= 1 then
			Spins.Value -= 1
			Cooldown = true
			local item = math.random(1, 100)
			if item <= 50 then
				ItemToGive = "Test1"
			end

			if item > 50 and item <= 100 then
				ItemToGive = "Nothing"
			end

			for i, v in SpinFrame:GetChildren() do
				if v.Name ~= "UIListLayout" and v.Name ~= "ItemTemplate" and v.Name ~= "UiAspectRatioConstraint"then
					v:Destroy()
				end
			end

			-- Before the target item

			for i = 1, 25 do
				if i ~= 23 then
					local DecoyItemIndex = math.random(1, 2)
					local DecoyItem = Items[DecoyItemIndex]

					local DecoyAppearance = nil

					if DecoyItem == "Nothing" then
						DecoyAppearance = Nothing
					elseif DecoyItem == "Test1" then
						DecoyAppearance = Test1
					end

					local NewItem = ItemTemplate:Clone()

					NewItem.Name = i
					NewItem.Parent = SpinFrame
					NewItem.LayoutOrder = i
					ChangeIconAppearance(NewItem, DecoyAppearance)
					NewItem.Visible = true
				else
					local RealItem = ItemToGive

					local DecoyAppearance = nil

					if RealItem == "Nothing" then
						DecoyAppearance = Nothing
					elseif RealItem == "Test1" then
						DecoyAppearance = Test1
					end

					local NewItem = ItemTemplate:Clone()

					NewItem.Name = i
					NewItem.Parent = SpinFrame
					NewItem.LayoutOrder = i
					ChangeIconAppearance(NewItem, DecoyAppearance)
					NewItem.Visible = true
				end
			end
			
			local XOffset = ScaleToOffset(ItemTemplate.Size.X.Scale, ItemTemplate)
			
			local X = SpinFrame.AbsoluteCanvasSize.X - XOffset * 2.5

			SpinFrame.CanvasPosition = Vector2.new(0, 0)

			local Goal = {}
			Goal.CanvasPosition = Vector2.new(X, 0)
			local TweeningInfo = TweenInfo.new(10, Enum.EasingStyle.Quint, Enum.EasingDirection.InOut)

			local Tween = TweenService:Create(SpinFrame, TweeningInfo, Goal)

			Tween:Play()

			wait(8)

			print(ItemToGive)
			Cooldown = false
		end
	end
end)

Help would be very appreciated.

#2

Sorry for bumping this, I am wondering if anyone has found a fix