- Home /
What's the best way to draw lines on a meter bar
I need to make a bar that looks like this:
I've already got the bar working with a slider behind a mask, and made a panel on the right that generates the numbers (they need to by created dynamically)
all that's left is creating the lines inside the meter. they need to be created dynamically (prefab) and be able to change color.
i'm fairly new to unity, so i thought maybe someone can suggest a nice way to do this
Answer by sumeeton · Mar 27, 2015 at 02:49 PM
If you want different colors for different box, the slider texture won't work. From what I see, you need a step meter and not a smooth sliding meter. You'll need a white box as texture. Use that as prefab. Recode to instantiate boxes according to the values and change the color of the prefab using color property.
Hmm, sorry i guess it wasn't clear enough from the picture. i don't want a "Step meter", the meter can have values between the lines.
Considering you are using Unity UI for this meter, follow these steps: 1) Use an UI Image for drawing the lines. You need not apply a texture to the image. Simply change it's color. 2) Create its prefab after setting the size and anchor. You'll need to instantiate and make it child to a gameobject that has the slider gameobject as a child. This is so because you need to have both of these masked and you don't want the lines to be moved with the slider.
line.transform.SetParent(sliderContainer.transform);
3) Position the line where you want. You'll need to Z-order or sorting layers to render lines above the slider. Apply the settings to your prefab and slider. 4) To change the color, simply use:
using UnityEngine.UI;
Image lineImage = line.GetComponent<Image>();
lineImage.color = new Color32(r, g, b, a); // your rgb values here
5) To achieve tweening effect while changing colors of the lines, you'll need to use Coroutine or Update and then scale the rgb values and achieve the effect.
Thank you for the in-depth answer :) I have already in fact managed something almost exactly similar to what you've instructed, but my question was "what's the best way to do it", and you've confirmed that i had the correct idea. so thanks agian!