HealthBar FillAmount Angle

Unity Engine
1

I am currently trying to implement a healthbar into a game. I am using sprites with fill amounts. I have followed the “Unity 5 Health bar” tutorial by inScope Studios.

I have the healthbar working fine. I even have a stamina bar, too. My problem consists of the fill method, though. I want it to decrease at a slight angle, but Unity’s closest option is a straight horizontal.

Is it possible to create a new fill method or a custom one that will allow the player’s health and stamina bars to decrease at an angle? And if so, how would I accomplish this? (This is my first project, I am still trying to learn the ropes of C#)

2638856--185665--SAOGUI.png
^This is a picture of my current set-up. The yellow is the player’s stamina and the green is the health.

As you can see by the partially empty health, the sprite decreases horizontally. I’d like for it to decrease at the same angle that is at the end of the health bar.

Any help would greatly be appreciated, even if it is a simple “This can’t be done.” Thanks in advance :slight_smile:

Edit: Accidentally posted the image twice.

2

https://bitbucket.org/Unity-Technologies/ui/src/0155c39e05ca5d7dcc97d9974256ef83bc122586/UnityEngine.UI/UI/Core/Image.cs?at=5.2&fileviewer=file-view-default

thats the source for UI.Image… OnPopulateMesh(…) is (i think) what the unity engine calls to get the image, that then calls, depending on options selected, GenerateFilledSprite(…) and that does a variety of calcs based on the FillMethod. Nothing in there for calculating a “slanted” end.

So I’m going with “no”, not with the stock image class.

You can probably extend the image class with your own implementation… or you might consider a different approach, maybe with a tiled sprite mask with the shape you want?

3

Having the health decrease at an angle isn’t that much of an issue. I believe it would look better if it did, but I might have to save that for later if it involves really indepth programming.

I’m unsure of tiled sprite mask, I’ll look into them when I have some time.

Thanks for your input. Much appreciated! :slight_smile:

4

You just need to make a mask out of a rotated image (Add mask component). Set the mask to “filled” NOT the health bar. And then drag the health bar image onto the mask (making it a child). Bingo! Drag the “fill amount” slider on the rotated mask image and watch the health bar disappear on an angle. Your welcome.

1 Like