Custom shaped UI

[ILovePizzaToes (ILookManly)]

I am trying to achieve this UI effect:

But I’m not entirely sure how to do that. I saw posts about scaling but couldn’t figure out how to scale it in a shape like this.

I’d like to hear suggestions on how I could achieve this effect.

[Scottifly]

What exactly are you trying to achieve?
The rectangle image shape?
The odd shaped gray rock?
The yellow dinosaur foot shape?

[ILovePizzaToes (ILookManly)]

I’m trying to achieve the fill-up animation for the custom-shaped UI. But I don’t know how to make it so the color frame doesn’t stretch badly and make it fit the shape.

[ca8062co1013 (ClientSide)]

You just make a colored frame scale 1 layer below the outline.

[6mikael6]

If you want to make a progress bar in the shape of the image, you can create an UIGradient under the image you want to fill up.

Input the following values to the UIGradient for a progress bar that moves from top to bottom:

Also set the UIGradient's Transparency to the following by pressing on the ... button:

• 1st dot value is 0
• 2nd dot time is 0.499 and value is 0
• 3rd dot time is 0.5 and value is 1
• 4th dot value is 1

Now when you update the UIGradient's Y offset, the image gets revealed / hidden based on the new value (-0.5 = fully visible, 0.5 = fully hidden):
https://gyazo.com/b8eb3cd0cc18d6626493bae4aa5c5a38

A code snippet to update the progress bar fill amount based on a number ranging from 0 to 1 would look something like this:

local gradient = --UIGradient

local function UpdateProgressBar(alpha: number)
	gradient.Offset = Vector2.new(0, -alpha + 0.5) -- alpha = 1 -> Y = -0.5, alpha = 0 -> Y = 0.5
end

And like this with number ranging from 0 to 100:

local gradient = --UIGradient

local function UpdateProgressBar(percent: number)
	gradient.Offset = Vector2.new(0, -percent / 100 + 0.5) -- percent = 100 -> Y = -0.5, percent = 0 -> Y = 0.5
end