Canvas Groups For Bars To Make The Corners Smooth

Canvas groups are similar to frames in how they function, but they have one very nice key aspect: They cover up any ui elements put inside them that reaches outside its own mass.

Example:
image
The top bar uses a normal frame, with another frame inside it for an indicator bar.
The bottom bar uses a canvas group, with another frame inside for the indicator bar.

This AMAZING improvement was caused by one incredibly simple action:
image (simply use a canvas group instead of a frame for the backing of the bar)

Using a canvas group makes all bars for this kind of stuff look better, so next time you decide to make an hp bar, an exp bar, a mana bar, a scringus bar, any bar at all, CANVAS GROUP!

Edit:

The Render Issue:

Anything stored inside a canvas group will start to decrease in pixel quality at 3 graphics and below. This can be painfully obvious and annoying in some situations, and practically unnoticeable in others. With my particular use of canvas groups, I noticed almost no change at all in the quality based on graphics quality. This is an easy way around other ui design, and while it does have a major flaw for some uses, I did not notice that flaw in the way that I personally used it. Use canvas groups at your own discretion, I recommend testing them just to see if there will be a noticeable pixel quality drop before solidifying your choice.

1 Like

Don’t forget that canvas groups make everything blurry at a graphics level of 3 and below. It’s better to use images here.

Yea canvas groups are a bit wonky, you can use normal frames and just use a UI gradient aswell

1 Like

In use case you showed, it’s much better to use UIGradint.

1 Like

Yeah, but it’s usually only under level 3 graphics and it is annoying but doesn’t completely break game.

2 Likes