Fill with colour animation

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Irrelevant Person

Its not only a question for the engine but…yeah, it should be alright:
I want to make a heart, that is filled with colour, which is a variable. Of course I can make 50 or 100 pictures in Photoshop etc but…idk that does not seem right
Thanks in advance

You want a heart that “fills” like to represent a health bar? Like, as if a color was masked in from bottom to top?
Any example?

Zylann | 2020-03-19 23:02

hmm…maybe a mask above the filled heart, which changes after the var I have. That would make it a more smooth animation, something like this?

Irrelevant Person | 2020-03-19 23:35

:bust_in_silhouette: Reply From: Merlin1846

Have 2 sprites. Number 1 is the heart outline. Number 2 is the inside coloring. Have number 2’s color to white. To change the inner color simply change number 2’s self modulate color to whatever color and opacity you want it to be.

:bust_in_silhouette: Reply From: Zylann

If you mean fading between two colors, you can make a white heart sprite and animate its modulate property.

If you mean fading between two textures, you can do what Merlin1846 suggests, overlay two sprites and animate their opacity.

If you mean to have a progressive filling between the two colors with a clear separation between the two, you can use a ProgressBar node, with custom styles. Indeed a progress bar is made of a background, and a foreground that progressively covers the background from left to right. You can change those to heart shapes, and rotate it to make it fill in the orientation you want.

1 Like