-
What do you want to achieve?
I have two bars, one for health and one for damage. I use the UICorner to make them rounded, but there’s a problem as you can see the damage bar on the edges of the health bar. -
What is the issue?
Health bar with UICorner
Health bar without UICorner
-
What solutions have you tried so far?
I’ve searched for solutions on this topic but I could not find any. I also tried a hacky way of doing it using a mix of a normal frame and a UICorner frame.
Make the parent frame (I believe it’s the red frame) a CanvasGroup instead of a frame.
1 Like
Both of the bars are parented to the white background.
But I tried your method and made the red bar a CanvasGroup, and parented it to the health bar. It fixes the edge at the top, but it creates some problems for me.
There’s this weird outline inside the bar, which only happens with the CanvasGroup.
With: 
Without: 
Also, I tween the damage bar while keeping the health bar at the same length, so having the health bar parented wouldn’t be viable.
Are you able to elaborate what’s wrong here? Everything seems to be working perfectly fine in the attached video.
Video is a bit low quality so you can’t see it, here’s a better example:
You can see part of the red bar on the top edge of the health, and that’s my problem.
There are multiple ways you can go about this.
The simplest way is just hide the red bar when it’s not being animated, and show it when it needs to be shown.
You can make the red bar a little smaller on all sides to prevent it protruding from any end.
The third way is probably the hardest to execute, but it’s probably the best one. You can get the difference in size between the previous health and the current health. You would position the red bar where the current health is and have it sized to the difference between the current and previous health.
I hide it once the tween is completed. For the third way, I have tried that but it’s really hacky.
In this video they were able to fix the issue, and I’m wondering how they did it.