Glass Breaking GUI

Hi, is there a way to ricreate this effect with roblox gui’s?

Not sure it’s possible with Roblox guis. You could record something like it and put it on a VideoFrame.

Possible. But with hard math, and won’t allow too much customization, such as textures. In short this effect comes in creating polygons from triangle images. You will need to use surface triangulation alghorithms, like ear clipping, then fill them with triangles, then show them, then render next frame and so on.

maybe a simpler way would be tweening some images with random sizes and position, but idk how to do it tbh

Possible too. But won’t have randommness, or otherwise it will just be a mess of overlapping glass shards.

You could try using a WorldModel in a ViewportFrame as this would allow you to have a transparent background if needed. You would also have to model a Glass Screen to be broken into parts. In addition, the parts making up the glass could also have their velocities set to random Vector3 values.

A WorldModel would be needed inside of the ViwportFrame so that physics can be applied to the parts.

1 Like

in the end i just did like this:

local function TweenImage(image)
	local tweenInfo = TweenInfo.new(
		math.random(8, 10), 
		Enum.EasingStyle.Exponential,
		Enum.EasingDirection.Out, 
		0, 
		false 
	)

	local tweenInfoSize = TweenInfo.new(
		math.random(2, 4),
		Enum.EasingStyle.Exponential
	)

	local endPosition = UDim2.new(math.random(), math.random(), 1.2, 0) -- Final Pos (bottom)
	local endSize = UDim2.new(0, 0, 0, 0) -- End Size (0)

	local tweenSize = game:GetService("TweenService"):Create(image, tweenInfoSize, {Size = endSize})
	local tweenPosition = game:GetService("TweenService"):Create(image, tweenInfo, {Position = endPosition})

	tweenSize:Play()
	tweenPosition:Play()
end

I have just created some different glass images in Photopea, added them to Roblox, and duplicated them.

probably goofy way but I got what I wanted.