How to crop an image or mask it? (vertical HP bar for example)

Twine Version: latest
Sugarcube: 2.36.1

Can someone suggest me a way to crop vertical HP bar? I can just make 100 images, +1% each step. And load it every time hp changes. But I’m sure there is a way to crop it using code only. So my game will be working faster.

Do you have a code for your health bar already?
Otherwise, I suggest you look into Chapel’s Meter or HiEv’s health bar.

1 Like

I will use just an image, feels easier for me. That’s why I need to know whether there is a way to crop images. And then I will just change the value to crop it by the amount of missing health.

Then you might want to look into the object-fit CSS rule.

If you are tying the health to a numerical variable, I would recommend using the code in the links in my previous message.


It might help, gonna try it

There may well be a way to crop it nowadays, but the old school way would be to either resize the image, or to have a second image that is just the background colour on top of it, and resize that. Resizing an image is simple, you can just set “width” or “height”. The initial positioning can be challenging.

I have not done much JavaScript with Twine, so cannot say more than that.