I made a dev forum post a while back about canvas groups, and why I like them. I still believe canvas groups aren’t 100% useless, but the problems, as a number of people pointed out, are numerous.
Firstly, they aren’t the most optimized UI element. I don’t know too much about this reason, but more than one person pointed it out, I trust yall. Much more importantly and noticeably, the quality issue. Some people (myself included) don’t notice this issue, so it may be partially based on device processing power, but generally below 3 graphics level, UI elements involving canvas groups degrade in quality. I was struggling to notice it on my computer, both in studio and on Roblox, but on a slightly older phone, the issue became obvious immediately.
There are several alternatives, but the one I gravitate to the most, that someone pointed out to me in my previous post, is UIGradients.
Sample:
You can achieve this by placing a frame inside the outer bar frame, scaled to the size of the outer bar (1,0,1,0), and inserting a UIGradient element to the inner frame. In this gradient, set the transparency of the beginning to 0, the end to 1, and at 0.999, 0.
Set the Offset of the gradient to 0.001, and in your scripts, set the offset of the gradient to (-0.999 + (value/maxvalue)) to scale the inner bar.
You can use the same method with 2 image labels to create custom hp bar appearances such as this:
Hope this tutorial is more helpful than my canvas group tutorial, and once again, I do not recommend canvas groups anymore :>
