How Do I Create A Cooldown Gui?

Help and Feedback Scripting Support
#1

Basically what I want to make is a something where a filled ImageLabel tweens into full size to fill a different one. I will show what I mean below. I already have the cooldown in place, I have just been racking my brain on how to tackle this. I want to make sure that it doesn’t look bad.

image

That is the full image. I want it to size up to the transparent image below.

image

How would I do this? Any help appreciated.

Side note: I want to make sure that you can only see the full image label filling up in the transparent one. This is pretty similar to a loading screen such as Bubble Gum Simulator, but it isn’t the same concept because its not black over the image, its the image going up into the transparent one, if that makes sense.

1 Like
#2

simple math currenttime / max time

#3

Would you care to explain? That doesn’t help me

#4

check when the current time before cooldown is changed
then set transparency to current time / max time

#5

I don’t know if you understood the question, I want it to tween up.

#6

do the same thing Udim2.new(currenttime/maxtime, 0, 1, 0)
for size

OR enable clip descendants and tween position relativly to the current time

#7

How would that make it fill the transparent one? I want it to only show the full GUI inside the transparent background, so it looks seamless.

#8

4PackAbs is getting there, what you want to do to achieve a similar (but not perfect effect) easily is enable the ClipsDescendants property of the transparent image then make use of ImageRectOffset and ImageRectSize to make progressively more of the colored image appear.

You’ll have to play around to find out what values of size and offset work here. This should achieve a pretty nice (and very similar) effect if tweened.

#9

Alright, I will try this and let you know. Thankyou

#10

Here is an example of how you can do this system

local TweenService = game:GetService("TweenService")

local TweenImage = {}
TweenImage.__index = TweenImage

function TweenImage.new(imageLabel)
	local self = setmetatable({}, TweenImage)
	self.imageLabel = imageLabel
	
	return self
end

function TweenImage:StartTween(duration)
	local tweenInfo = TweenInfo.new(
		duration, -- Duration of the tween in seconds
		Enum.EasingStyle.Linear, -- Easing style
		Enum.EasingDirection.InOut -- Easing direction
	)
	
	local endSize = Vector2.new(0, self.imageLabel.AbsoluteSize.Y)
	local tween = TweenService:Create(self.imageLabel, tweenInfo, {Size = endSize})
	
	tween:Play()
end

return TweenImage

Example usage:

TweenImage.new(script.Parent.ImageLabel)
tweenImage:StartTween(1)  -- Pass the desired duration of the tween in seconds
1 Like
#11

Can you explain how to use ImageRectOffset and ImageRectSize please?