UI Toolkit progress bar using Image fill amount

Unity Engine
, , , ,
1

Hi everyone,

I want to make a progress bar for daily challenges in a month. I want to use a trophy image that will be blue at first but as long as the player complete new challenges every day it will turn to a yellow one.

Think about September for example, the trophy color will be blue at first and when you complete a new challenge, 1 of 30 will be yellow and the rest will stay as blue. The amount will increase when the player will complete a new challenge.

It was quite easy with fillAmount property in the UI library, but in my new project I have used UI Toolkit and as I see there’s no such a property in the UIElements library. I have played with Progress bar, watched some tutorials on Youtube, but couldn’t find a solution yet. As I see, everyone have used only colors for such a progress bar and it’s not suitable when I tried to do the same thing with an image.

I just wonder if anyone have made something similar and can send me a tutorial or a custom script if there’s one.

2

Seems like you need to create a custom logic behind, using a custom control or directly in your view.
You need to query the ProgressBar value and change the color of the fill amount VisualElement when you change the value of your progress.

You can change the color directly by modifying the style of the filler (this is inline-style) or by applying a classname on your progress bar depending of the value/color pair you want. Something like that I think:

.unity-progress-bar {
  --progress-color: #0000FF;
}

.unity-progress-bar.between-30-50 {
  --progress-color: #00FF00;
}

.unity-progress-bar.beyond-50 {
  --progress-color: #FF0000;
}

.unity-progress-bar__progress {
    background-color: var(--progress-color);
}

ProgressBar myProgress = uiDocument.rootVisualElement.Q<ProgressBar>();
myProgress.EnableInClassList("between-30-50", myProgress.value >= 30 && myProgress.value <= 50);
myProgress.EnableInClassList("beyond-50", myProgress.value > 50);
3

Hi @DarkRewar ,

Thanks for your message, but this isn’t the solution I’m looking for I think. I’m looking for something like health bar in Max Payne.

Look at these images for example. In the first one, almost 90% of the same image is red and the rest is white. On the other one, it’s fully white. That was easy to do using fillAmount in the UI library but couldn’t find a solution for the UI toolkit yet.

Thanks for the answer again, I have learned something new though. I can use this method for another thing even though this not I’m looking for right now.

Screenshot 2024-10-10 at 15.48.14
Screenshot 2024-10-10 at 15.48.22

4

Hi @keremaydin52,

I think I was able to reproduce what you want (using svg masking Unity - Manual: Apply masking effects in UI Toolkit):

image
image828Ă—355 3.83 KB

I’m using an SVG mask, loaded with the vectorgraphics package (About Vector Graphics | Vector Graphics | 2.0.0-preview.24) as an “UI Toolkit Vector Image”.
The Visual Element has the svg as its background image. It is also setup to have its overflow:hidden.

Then there is a child element which as another color (here red/orange) for which the top position is overwritten in % (it’s the inverse of the real percentage of the “progress”) since it’s pushing the image down.

Hopefully this what you are looking for.

4 Likes