Making a UI object follow a Sprite

Unity Engine
1

Hellooo! So, I’m unsure how to approach this issue. I’m trying to have a health bar (UI Slider) follow the sprite that the health bar corresponds to. Does anyone know the simplest way to achieve this? I tried to parent a canvas to the sprite, but the sizing was really bizarre and warped. I’m completely lost on how to do this. Thank you so much!

2

This is a problem I’m also facing.

Prior to 4.6 I simply used a prefab with 2 bar sprites in it, one colored red and another colored green over it. Then I would simply attach it to the player in the game space, animate the bar from start to finish and set the animation frame based on the percentage of health the player has.

It would be great if we could simply set a UI element to be canvas-locked in 4.6.

3

Could you show us a screenshot of the warping?
Normally a world-space Canvas should work fine.

4

Theres a tutorial over on Ray Wenderlich that uses a slider. They use 9 slice buttons for the bar graphics and then just hook up to the slider and give it (the slider) the value. I had some really odd looking graphics when i did it (could be thought of as warping), but the tutorial was old and did not have the option for Mip Mapping in the tutorial images. Make sure it’s turned off for the graphics.

5

Thanks everyone. I’m definitely going to go with puppeteer’s idea, that seems to be the easiest way. I tried using a world space canvas, but no matter what layer i put it in it’s always invisible, even when it should be in the right position. Idk why i didn’t think of the sprites earlier tbh. Helps a ton!

6

I’ve also been curious about this lately. Since I want to add GUI buttons over some sprites. Anyone find an answer?

7

If you want to go with the animated sprite approach, use this code:

//This is the animation clip that will be used for the bar
var barAnimation:AnimationClip;

//This function updates the progress of the bar. It moves the animation to the correct frame based on our progress value relative to the maximum value
//Example: If our maximum health is 100 and our current health is 50, the animation stops right in the middle.
function UpdateBar( bar:Transform, currentValue:float, maxValue:float )
{
    //If value is 0, set the bar animation to its last frame ( completely empty bar ). Otherwise place the animation based on the value we have
    if ( currentValue <= 0 )    bar.animation[barAnimation.name].time = bar.animation[barAnimation.name].clip.length;
    else    bar.animation[barAnimation.name].time = ( 1 - (currentValue/maxValue)) * bar.animation[barAnimation.name].clip.length;
 
    //Start animating
    bar.animation[barAnimation.name].enabled = true;
 
    //Record the current frame
    bar.animation.Sample();

    //Stop animating
    bar.animation[barAnimation.name].enabled = false;
}

Hope that helps!

Edit: The animation itself should go from FULL to EMPTY, and not the other way around.