UI Contraint coding help!

function ConfettiUI(UIParent,UIClicked)

    local Colors = {Color3.fromRGB(232, 183, 66),Color3.fromRGB(184, 103, 211)}
    
    for i = 0,30 do
        local Confetti = Instance.new("Frame")
        local SizeConstraint = Random.new():NextInteger(1,2)
        print(SizeConstraint)
        Confetti.BorderSizePixel = 0
        Confetti.BackgroundColor3 = Colors[math.random(1,#Colors)]
        Confetti.Parent = UIParent
        Confetti.ZIndex = 10
        Confetti.Size = UDim2.fromScale(SizeConstraint/100,SizeConstraint/100)
        Confetti.Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2,UIClicked.Size.Y.Scale/2)
        
        local ConfettiTween = TweenService:Create(Confetti,TweenInfo.new(1), {Transparency = 1;Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2+(math.random(-15,15)/100),UIClicked.Size.Y.Scale/2+(math.random(-15,15)/100)); Rotation = math.random(0,360)})
        ConfettiTween:Play()
        ConfettiTween.Completed:Connect(function()
            Confetti:Destroy()
        end)
        
        
    end
end

This code works all fine and dandy, however the confetti ends up in more of a rectangle. is there a was to some how get the screen size of the user and formulate how to make a perfect square for the size constraint of the frame I’m creating? Meaning that the X value and the Y value are (if the PC was square) the same value.

You can just use offset to get a perfect square.

Try this:

function ConfettiUI(UIParent, UIClicked)
	local Colors = {
		Color3.fromRGB(232, 183, 66), 
		Color3.fromRGB(184, 103, 211)
	}

	for i = 0, 30 do
		local SizeConstraint = Random.new():NextInteger(100, 200)
		print(SizeConstraint)

		local Confetti = Instance.new("Frame")
		Confetti.BorderSizePixel = 0
		Confetti.BackgroundColor3 = Colors[Random.new():NextInteger(1, #Colors)]
		Confetti.ZIndex = 10
		Confetti.Size = UDim2.fromOffset(SizeConstraint, SizeConstraint)
		Confetti.Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2,UIClicked.Size.Y.Scale/2)
		Confetti.Parent = UIParent

		local ConfettiTween = TweenService:Create(Confetti,TweenInfo.new(1), {Transparency = 1;Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2+(math.random(-15,15)/100),UIClicked.Size.Y.Scale/2+(math.random(-15,15)/100)); Rotation = math.random(0,360)})
		ConfettiTween:Play()
		
		ConfettiTween.Completed:Connect(function()
			Confetti:Destroy()
		end)
	end
end
1 Like

Try adding a “UIAspectRatioConstraint”

function ConfettiUI(UIParent, UIClicked)
    local Colors = {
        Color3.fromRGB(232, 183, 66), 
        Color3.fromRGB(184, 103, 211)
    }

    for i = 0, 30 do
        local SizeConstraint = Random.new():NextInteger(1,2)
        
        local Confetti = Instance.new("Frame")
        Confetti.BorderSizePixel = 0
        Confetti.BackgroundColor3 = Colors[math.random(1,#Colors)]
        Confetti.Parent = UIParent
        Confetti.ZIndex = 10
        Confetti.Size = UDim2.fromScale(SizeConstraint/100,SizeConstraint/100)
        Confetti.Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2,UIClicked.Size.Y.Scale/2)
        
        Instance.new("UIAspectRatioConstraint", Confetti)
        
        local ConfettiTween = TweenService:Create(Confetti,TweenInfo.new(1), {Transparency = 1;Position = UIClicked.Position + UDim2.fromScale(UIClicked.Size.X.Scale/2+(math.random(-15,15)/100),UIClicked.Size.Y.Scale/2+(math.random(-15,15)/100)); Rotation = math.random(0,360)})
        ConfettiTween:Play()
        ConfettiTween.Completed:Connect(function()
            Confetti:Destroy()
            ConfettiTween:Destroy()
        end)
    end
end
2 Likes

Camera.ViewportSize.X and Camera.ViewportSize.Y to get the client’s device resolution.