Scale a bar?

Unity Engine
1

Hey all! I’m working on a small minigame that is just a simple bar with an indicator that moves up the bar, when you click depending on how close to the target you get the more “damage” you do. The coding for everything has been pretty simple, but now I need to make it look good. And that is where I am having some trouble.

I am using a Slider UI component with a simple yellow background. As a child of the Background image within the Slider I have 2 images, 1 green image for Critical and 1 red image for Weak. I have 2 values on my script:

public float critical;
public float weak;

Because of the way a slider works, the float values are a number between 0 and 1.

Now the tricky part. the vertical height of my Critical image and Weak image need to scale in size directly with the values of the floats. But, the float number is between 0 and 1, but the height values will be large numbers like 120, or 230, or 451, really any number.

So my question is, how would I set the height of the Critical and Weak image based on the value of the corresponding floats?

Edit: I can get the height of the Background image, the one that holds the Critical and Weak images. so if I can figure out the scale between that height and the slider value I might be able to make it work!

Edit: ok I’ve almost got it! I just did:

criticalImage.sizeDelta = new Vector2 (criticalImage.rect.width, backgroundHeight * criticalValue);

This almost works perfectly, with the small exception that it works in the opposite of how I want. a 0.5 in the critical value sets it to half way down. But a 0.9 critical value sets it to nearly the entire bar!

2

Got it! So here’s the code I had to use:

criticalImage.sizeDelta = new Vector2 (criticalImage.rect.width, height * (1 - criticalValue));

but I have one small issue: the size of the image is shrunk or expanded based on the center of the image, not on the top or bottom which I would want. Any ideas how I would fix that?

I can cheat a little by making the Critical and Weak images just filled images, which works until I rescale the entire Slider Gameobject. so if I can keep them to the same size as the parent Slider instead that would fix the issue as well. Any ideas?

3

Solved it :slight_smile: Just had to change the anchors stretch. Now it works perfectly! Thanks for the help team lol