Canvas Groups For Bars To Make The Corners Smooth

Resources Community Tutorials
#1

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.

2 Likes
#2

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

1 Like
#3

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

2 Likes
#4

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

2 Likes
#5

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

2 Likes
#6

Do CanvasGroups only work outside of other descendents? I have my ‘progress bar’ and canvasgroup inside of a frame, because the frame is the background of the whole UI, but for some reason the CanvasGroup is still acting like a regular frame and isn’t clipping the corners of the bar inside it.

1 Like
#7

Your whole argument is destroyed by one single property on the frame, ClipsDescendants.

Please don’t persuade users based off this one thing, CanvasGroup is not as optimized as you think it is.

1 Like
#8

You forgot to mention image labels and transparency gradient offsets, those work with custom shapes too! I considered deleting this post just cause despite me making it clear canvas groups are only useful in certain situations, not everyone seemed to appreciate that I like canvas groups at all. I 100% agree with your comment, there are just a few situations where using clipsdescendants on a normal frame may not work, in which case if you don’t feel like making image label bars, canvas groups are a convenient, albeit mid as heck option.

Edit: I was tinkering with some stuff, and unfortunately clipdescendants does not fulfill the purposes I mentioned. I think that’s why I gravitated towards canvas groups at the time.

#9

I no longer recommend using canvas groups, but if you still want to, canvas groups should work just fine while parented to another frame, as long as the contents you want to have clipped by the canvas group are parented to the canvas group.

1 Like