Twine Version:
Twine 2.10.0, Sugarcube: 2.37.3
I have been using Chapel’s Meter-Macro for some meters in my game, but the “rectangles” don’t really fit the vibe. So I wanted to change the shape.
I (for example) managed to round the corners with the use of the stylesheet, but that’s not quite what I envisioned. I thought maybe the clip-path property would be the best option and I got it working with the basic CSS shapes, but when ever I try it with an SVG source the meter just disappears.
(I thought about a sword shape or something along the lines.)
So, I’m down on my luck here and just wanted to ask if what I’m attempting is possible and how. I also have a back-up plan that I could use if not.
Thanks in advance.
I don’t know zilch about meter-macro, but the reference to “rectangles” give me the hunch that perhaps the issue lies in the usage of a vector graphic with an extension designed for raster graphic, or I’m wrong ?
I’m sorry I probably should have set that in the post, but I am new to coding and I don’t quite understand what you are asking.
You might find the css rule mask useful? W3School - MDN
(I haven’t tested it with Chapel’s macro at all, so I can’t say for sure it will work. You may want to use the Inspect tool of your browser and see which specific element you need to target).
Thanks, that was a thing I had tried as well, but couldn’t get to work either.
I’ll give it another go and see what I can get working.
It’s possible the code behind Chapel’s macro prevents the use of clip-path/mask (can’t say for sure, haven’t dived into the code itself).
But if mask isn’t working, you might have to create a meter from scratch (either the HTML element or a bunch of divs, linked to a variable with the @ attribute directive). It’s not super complex, I have a couple of examples of a basic stat bar made with HTML/CSS in my guide.
I think I will try making my own meter. Maybe I’ll have better luck with it.
Thanks a lot for the guide and the infos.