SOLVED Is it possible to draw a variably filled curved rectangle?

Hi,
Recently I've been reworking a bar in my game to signify when a gun is overheating etc, simple stuff. However, I was wondering if it was possible to draw it in the form of a curved rectangle as shown below:
1613597192191.png
Rather annoyingly, trying to search a solution online comes up with how to draw a rectangle with rounded edges which is a built in function but not what I'm looking for.
At least when I looked it up it said the above shape was a curved rectangle...

Drawing the outline I think is do-able, all you need are two (I guess you could call them parallel?) parts of a circumference of a circle and connect them using two lines at each end.
However since I need this as a progress bar: I would need to fill it in which I can't seem to wrap my head around let alone if it's even possible in GMS2
This would also be attached to the cursor so it would need to fit with all kind of backgrounds so I can't use sprites or similar unfortunately.
I've looked into Vectors and Primitives since I've heard you can draw incredibly complex shapes with them but I'm yet to find a way to make this with them unless I were to create a massive number of vectors for the curved areas and draw accordingly but that seems inefficient...

If someone could point me in the right direction or let me know whether or not it's possible that would be great!
Thanks for reading!
 

kburkhart84

Firehammer Games
I recommend you just draw it as a sprite ahead of time. It would likely be the fastest solution, and let's you do it however you want.

Alternatives are things like drawing arcs, and itty bitty arcs for the corners(since you want rounded corners). You could also technically draw a normal rounded rectangle to a surface, then draw a quad and use the vertex shader/UV map to add the rounding shape. But these things are always going to be more complicated than just making it as a sprite.
 
Would there be any way to make the filling of the bar be smoother since if I were to draw each possible stage adding one pixel at a time it may be rougher than if it were to be drawn in game. If that makes sense...

Or may be able to get away with using vectors for that part...
 

kburkhart84

Firehammer Games
I think I personally would make a gradient that is the shape of the rectangle and use an alpha cutoff shader. You need three sprites for that, the "container", the full inside of the container(which can be a solid color but would look neater with something else), and the inside of the container but a black to white gradient.

The idea is that you tell the shader where you are with health, 0 to 1, and it uses that value to cut-off the pixels when it draws the inside. Note that this is a complicated way to do it as well, but I think it is simpler than trying to draw it via code, and has the most customization as well.
 
Thanks for the help!
I just want to double check if this is correct, So I create a blank curved rectangle (just the outline) then one which is a full bar and one which has a black-white gradient. Then I use a shader to check the colour of the pixels in the gradient image and once it is above the health value, I tell the shader to stop drawing the full bar?
Sorry but shaders are still something I'm learning but would like to start using a lot more so this would help out!
 
Last edited:

Rob

Member
You can probably use draw_sprite_part if you want a nice sprite, otherwise you can use draw_sprite_ext and just update the xscale (works great with simple sprites that won't look weird when stretched, needs sprite x origin on the left for traditional bar movement).

With either solution, you'll probably want to draw an outline sprite afterwards as it looks nicer (eg the rounded rectangle you have shown).
 

woods

Member
use the curved rectangle sprite as a mask.. clear the inside and have a sprite below it(full colored rectangle ).. another between the two that moves along the X to uncover the color below?
 

kburkhart84

Firehammer Games
So in other words I create a blank curved rectangle (just the outline) then one which is a full bar and one which has a black-white gradient. Then I use a shader to check the colour of the pixels in the gradient image and once it is above the health value, I tell the shader to stop drawing the full bar?
Sorry but shaders are still something I'm learning but would like to start using a lot more so this would help out!
You have the basic idea...you can likely find an alpha-cutoff shader already made somewhere though as it's a pretty commonly used thing.

The ideas the other guys also are similar, and may work, but I think the shader method I'm describing would give the most customization and best look in a general sense.
 
Thanks for all your help!
I'll start with the shader since I've already started working it out but if I can't work it out I'll try your other suggestions! Thanks again!
 
Top