Imagine you have an Image Label with an outline of a star. Now imagine you have a second Image Label with the inside / filler of that star. How would you go about making the inside of the star increase from left to right every time the player clicks his mouse? Its hard to explain so here is an example, image this example with an image.
Any help is appreciated!
Just so I understand better, you have an imageLabel of a star and you want it to act like that example everytime you click.
I would suggest colorGradiant
Here is an example:
Add a colorGradient inside your imageLabel. THE STAR MUST BE WHITE FOR THE COLOR TO APPLY.
Then apply the colorSequence of your liking.
Than what you can do is increase the Offset property from -1 to 1 like so:
I should have been more specific. Imagine what you just showed me but with transparency instead, half the image shows, the other half is invisible type thing. Imagine the white in this gif is invisible.
Okay, thats a lot more complicated.
I dont know any ways to do it exactly the way you want. I mean the closest way to achieve this would be by modifying the ImageRectOffset property at the same time as Position. ImageRectOffset will offset the image in itself outside the frame. You can then make it look anchored to the same position by changing its original position at the same time.
I have no Idea how that property works but you can learn it here: ImageLabel | Roblox Creator Documentation
Ahh yes, forgot about that property. Will give it a try, thanks for the help.
chances are this wont work for you, but if youre looking just for regular rectangle, like exzctly the one in the gif, i would do this
Button - The button, make sure background is transparent
ButtonFrameRed - a child of Button, size set to 1, 0, 1, 0
ButtonFrameBlack - a child of ButtonFrameRed, with the size set to 0,0,1,0
local Button = script.Parent.Button
local ButtonRed = Button.ButtonFrameRed
local ButtonBlack = ButtonRed.ButtonFrameBlack
local steps = --number
Button.MouseButton1Click:Connect(function()
for i, steps do
ButtonBlack.Size = Udim2.FromScale(i/steps, 1)
wait()
end
end)
this will make the black slowly fill up the red, like a loading bar.
if you set “steps” to 10, it will be jumpy, blocky, and scip over, not smooth
if you set “steps” to 1000, it will look smooth, but might take longer
if you copy and paste my code, i used 4 spaces instead of “tab”, so keep that in mind
hope i helped!
As he said, he needed the imageLabel to reappear. This would be good if all he needed was to change the color. But now its the whole image that has to appear without being scaled.
i think your best bet is using a sprite sheet
guys i just found the answer after like a whole year.
just use UIGradients and adjust the offset value
this gradient will be very specific so u can use this script to do it quickly:
local color = Color3.new(1, 0, 0) --[[ Your color ]]
local parent = game.StarterPack --[[ Where you want it ]]
Instance.new("UIGradient", parent).Color = ColorSequence.new({
ColorSequenceKeypoint.new(0, Color3.new(1,1,1)),
ColorSequenceKeypoint.new(0.0001, color), --[[Smallest possible time value ]]
ColorSequenceKeypoint.new(1, color)
})
-- I used comment blocks to make it easy to use in the command bar.
This is not quite what I wanted. I wanted the image to change with transparency not color. So for example the part of the image that is white would just not show. Thanks for the help anyway
Can’t you just feed a NumberSequence to the ImageTransparency property? Then you can adjust some keyframes and their time. Would be kinda similar to @Micamaster100 's idea, but using NumberSequence.new() Correct me if im wrong tho.