Circular Health Bar

I looked in an earlier article and found that somebody was trying to make a health bar that fills up in a circular fashion. The circle is hollow and only fills up on the outside with a thickness of about 5-10 pixels or so.

I included the drawarc.lua file that was mentioned in the thread but when I tried to use the method, it did not appear on my HUD.

Any help with this would be greatly appreciated.

Some of your code would be helpful :slight_smile:

Unfortunately, I’m starting this piece from scratch, haha. I just need suggestions on how I’d go about doing this.

You might be able to do this with rectangles and a circular stencil.

you could probably get away with using surface.DrawPoly and some trigonometry



local polys = {}
    local R1 = 40
    local pi = 3.1415971
    local ScrX = 100
    local ScrY = 100
    
    for i=0,100 do
        table.insert(polys, {x = R1*math.cos(i*180/pi)+ScrX, y = R1*math.sin(i*180/pi)+ScrY})
    end
    for i=100,0,-1 do
        table.insert(polys, {x = R1*math.cos(i*180/pi)+ScrX, y = R1*math.sin(i*180/pi)+ScrY})
    end
    
    surface.SetDrawColor(0, 255, 0, 155)
    surface.DrawPoly(polys)


This is the code I have so far. Why it doesn’t work is a mystery to me. I don’t have the health part in there yet, but it’s not a concern yet because it won’t even draw the polygon right there. Is there something I’m doing wrong with the surface.DrawPoly function?

100 points is a bit much. You don’t need that many for it to be smooth.

https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/simplified_circles_with_poly.lua.html

The way I made my speedometer is by user smaller circles inside, then I just mapped the points from the larger circle to interior circle and draw from outside to inside on each key. But, for yours, I think you can use stencils… Create one larger one, one smaller. Position them to be centered, then remove the union.

I haven’t played with stencils yet, so there may be a much better way. Also, when drawing circles with poly, use draw.NoTexture( ) before you draw the poly, and before you assign a material / color otherwise it may be transparent.

You guys’ help is very helpful, but it isn’t quite what I’ve been looking for. I should have been more specific. I am trying to mimic this:

http://puu.sh/d0AIu/6afa560aeb.jpg

you will need a texture or more maths

This is the code I posted in the other thread.

Your poly has zero thickness. The part that counts backwards needs to have a second radius, smaller than the first.

It looks like this:

http://puu.sh/d1CF2/f76cfe0d5e.jpg

I am looking for this:

http://puu.sh/d0AIu/6afa560aeb.jpg

What code are you using?

The code that you posted in the previous thread. I did as you asked and changed the radius. I figured out that I needed to use draw.NoTexture(). After I did that, the circle appeared, but it was filled. I need a hollow circle like the picture above. Also, I’m pretty sure that because I’m asking a question (this isn’t directed toward you, Tomato) doesn’t make me dumb. If I was dumb, I’d use horrible grammar and ask retarded questions. My questions here are reasonable and, well, quite rational if you ask me. It’s called the Developer section for a reason.

Maybe this will help

I prefer bobbleheadbobs as it requires no materials.

Perfect, Jarva. Thank you all for you help!