Can you make an imagelabel drain?

Help and Feedback Scripting Support
, ,
#1

I’m trying to remake this crosshair ui, when you shoot the ui drains to match your amount of ammo.

image

is it possible to crop an imagelabel in half like this? Every time I try it just resizes the entire imagelabel no matter how hard i fiddle with it.

image

#2

You might be looking for the ImageRectSize and ImageRectOffset properties, which allows displaying a certain region of the image.
Using both ImageRect properties and resizing the image will make the illusion of an ui drain.

2 Likes
#4

I recommend using a UIGradient with a steep gradient

#5

This is usually feasable when you’re dealing with more complex UIs, that’s if the crosshair drain on a non-linear fashion.
… or when you don’t know the size of the image, which makes it also a good option too.

#6

You could try setting the ImageLabel.ScaleType to Crop and seeing if you can make that work.

#7

Just add a transparency gradient using UI gradient under each cross hair, set the angle to 90 degrees,
an example script would be like:

local Gui = script.Parent --the place of the crosshair ui
local Ratio = CurrentAmmoAmount/MaxAmmoAmount -- calculate the ratio between ammo and max ammo 1/6 or 5/6
if Ratio == 1 then -- Different cases , if it is full or empty, or in-between
	Gui.UIGradient.Transparency = NumberSequence.new(0)
elseif Ratio == 0 then
	Gui.UIGradient.Transparency = NumberSequence.new(1)
else
	Gui.UIGradient.Transparency = NumberSequence.new({
		NumberSequenceKeypoint.new(0,0),
		NumberSequenceKeypoint.new(Ratio-0.001,0),
		NumberSequenceKeypoint.new(Ratio+0.001,1),
		NumberSequenceKeypoint.new(1,1)
	})
end

hopefully this helps :slight_smile:.