I am trying to make the enemy/player become red temporarily after taking damage. I was thinking as one of them takes damage, a red effect moves up on either player/enemy to show how much health is left. How could I do this?
So I think I may have found a way with a sprite mask?
Sprite 1 - Sprite of the desired sprite, and it doesn't interact with a sprite map Sprite 2 - I make a new sprite with a modified version of sprite one to be red that is visible within a sprite mask Sprite Mask - I create a sprite mask with a rectangle shape
Then I somehow translate the position and scale of the sprite mask into a range that the health can interact with and then the mask will change the y of the scale and position as health is taken
So now I'm stuck on finding a way to take the pos and scale and convert it into some way that it interacts with the health correctly
For some reason the animation still plays with the other sprite being shown and idk why but it works
IEnumerator TakeDamageCorountine(int damage){
currentHealth = currentHealth - damage;
float maskPosY = 3.25f/currentHealth;
float maskScaleY = 6.9f/currentHealth;
if(gameObject.activeInHierarchy == true){
spriteMask.localPosition = new Vector3(0.051f, maskPosY, 0f);
spriteMask.localScale = new Vector3(8.884337f, maskScaleY, 1);
print("Position: " + spriteMask.position + "Scale: " + spriteMask.localScale);
}
yield return new WaitForSeconds(.75f);
}
I think what you can do is indeed go for a SpriteMask
and have an underlying second SpriteRenderer
for the tint.
In order to simplify the calculations I would use the following
SpriteRenderer
without any color tint at all!
Then add children to it with the following hierarchy and settings
YourMainSpriteRenderer
|-- MaskAnchor
|-- MaskVisuals
where
YourMainSpriteRenderer:
MaskAnchor:
Transform: Y = -pixelSize / 2 / Pixels Per Unit
(values from second step above)
in my example the texture is pixels height is 395, pixels per unit is default at 100
-> 395 / 2 / 100 = 1.93
MaskVisuals :
Transform: Y = pixelSize / 2 / Pixels Per Unit
(same as above but positive)
SpriteRenderer: the fully blank texture, your desired color overlay (e.g. red and alpha < 1), Mask Interaction
→ Visible Inside Mask
, Order in Layer -> 1
(or at least higher then the parent)
Now you should see your original sprite overlaid by the color but only within its mask.
And thanks to the added MaskAnchor all you need to do to adjust its amount of fill from 0
to 1
is setting the MaskAnchor.transform.localScale.y
to a value of 0
to 1
.
This you can easily do by script now (assuming e.g. the color tint shows the health and shrinks over time)
maskAnchor.localScale = new Vector3(1, currentHealth / maxHealth, 1);
otherwise simply invert to make the fill grow while the enemy looses health
maskAnchor.localScale = new Vector3(1, 1 - currentHealth / maxHealth, 1);