Image fill with two colors
I am using built-in "fill" functionality to display player's health-bar, and it works fine:
However, my player also has armor, and I wanted to display it in the same bar, over the health, but in different color, like that:
How can I do that? I thought of placing two bars, one above other, but they are not transparent. And if I make the white contents of the bar transparent in photoshop, the "fill" function stops working.
Answer by $$anonymous$$ · Apr 19, 2017 at 10:48 PM
Well, I ended up with placing the armor-bar above the health-bar and a little to the right, while cutting the expense "white" length of the armor-bar with a mask.
I also dynamically change the left position of the armor-bar, according to the health-bar's right border.
So the borders for the bars are:
For the health-bar:
Left: (0 , 0)
Right: (current_health / max_health) * (max_health / total_hitpoints)
For the armor-bar:
Left: (current_health / max_health) * (max_health / total_hitpoints)
Right: (current_armor / max_armor) * (max_armor / total_hitpoints)
total_hitpoints = max_health + max_armor
Hope that helps someone someday!