Progress Bar Frame

Help and Feedback Art Design Support
,
#1

How can I make a progress bar for this UI?

image

Hierarchy:

image

#2

you could use a CanvasGroup and a UIGradient

image

image

1 Like
#3

Will I need to replace the frames with the canvasgroup?

#4

Why not just use a simple image for this?

Anyways what BoneIsUseless meant was to replace the “Frame” frame in your hierarchy with a CanvasGroup and have a UIGradient in said CanvasGroup.

1 Like
#5

I supposedly did this but my UI looked like this:

image

New hierarchy:

image

1 Like
#6

Before trying with Frames, I tried with image but it didn’t work for me

I used this forum post as a guide:

1 Like
#7

Dont use the transparency property. Just use the color.

1 Like
#8

I set the CanvasGroup BackgroundTransparency to 0 and it solved the green background problem, but when I resize the CanvasGroup or the Frame named “Vertical” it looks like this:

Normal:
image

Resized:
image

#9

Use images at that point then. There is no fix for that. (There is but it’s so complicated.)

Anyways a trick to fix the issue with images is to use the UIGradients again. Don’t do what that tutorial does.

1 Like