  ## Circular and Ring Health Bars! With Gamemaker Code and Explanation!

April 16th, 2015 3:40 pm

I haven’t been here in a long time. So I thought I would share this code I made with you and explain how it works (so people who don’t use Gamemaker can reverse-engineer it). Unfortunately I’m not taking part this time round, but I felt like helping those who are!

Gamemaker Script Code
Simply copy and paste these into two seperate scripts:

Ring Health Bars

//argument0 = x
//argument1 = y
//argument3 = thickness
//argument4 = maxsegments
//argument5 = segments
//argument6 = startangle
//argument7 = totalangle
//argument8 = direction
//argument9 = colour

anglechange = (argument7/argument4)*(pi/180)
i = argument6*(pi/180)

ax = argument0+(cos(i)*argument2)
ay = argument1-(sin(i)*argument2)

bx = argument0+(cos(i)*(argument2+argument3))
by = argument1-(sin(i)*(argument2+argument3))

repeat(argument5) {
i += argument8 * anglechange

cx = argument0+(cos(i)*argument2)
cy = argument1-(sin(i)*argument2)

dx = argument0+(cos(i)*(argument2+argument3))
dy = argument1-(sin(i)*(argument2+argument3))

draw_triangle_colour(ax,ay,bx,by,dx,dy,argument9,argument9,argument9,0)
draw_triangle_colour(ax,ay,cx,cy,dx,dy,argument9,argument9,argument9,0)

ax = cx
ay = cy

bx = dx
by = dy
}

Circle Health Bars

//argument0 = x
//argument1 = y
//argument3 = maxsegments
//argument4 = segments
//argument5 = startangle
//argument6 = totalangle
//argument7 = direction
//argument8 = colour

anglechange = (argument6/argument3)*(pi/180)
i = argument5*(pi/180)

ax = argument0+(cos(i)*argument2)
ay = argument1-(sin(i)*argument2)

repeat(argument4) {
i += argument7 * anglechange

bx = argument0+(cos(i)*argument2)
by = argument1-(sin(i)*argument2)

draw_triangle_colour(ax,ay,bx,by,argument0,argument1,argument8,argument8,argument8,0)

ax = bx
ay = by
}

To execute the scripts simply use:
or

Meet The Variables: x,y = the coordinates of the center of the ring

radius = the distance from the center to the start of the ring

thickness = the thickness of the ring

rotation = at what angle is the zero mark of the ring?

angle = over how many degrees does the ring span?

max segments = how many segments the ring is split in to

segments = how many of those segments are visible

direction = which way is the ring drawn? 1 for anti-clockwise and -1 for clockwise

For the circle health bar the variables are the same except that thickness is not included.

A demo (gif): The demo is using two rings; one red and one green to simulate health.

What is this sorcery?
When a computer draws a circle, it is actually just a bunch of triangles arranged in the same way as slices of pie.

To find the coordinates of each triangle to be able to draw them we need a big steaming pile of math.

Specifically we need some trigonometry. Let’s start with which way is up: Or in this case, which way is right: zero degrees.

A new temporary variable, i, will count our current angle as we sweep around the circle.

After each cycle in the loop it will change by the angle variable divided by the maxsegments. Add to the mix our variables for radius and thickness and we can draw a triangle to work out our x and y coordinates for our triangles to draw! From this we can get the coordinates for the two points a and b. To get point b we simply add the thickness to the radius: Then we add the angle change to i, and get the variables c and d. Then we can connect the dots and draw one section!  Repeating this process for how many sections we want to draw will result in a ring!

This process is the same for the circle, except we only need points a, c, and the center for each triangle.

Good luck for LD 32! Hopefully this tutorial will come in handy.

I kinda rushed this. Hopefully you can understand it if you have a basic grip on maths.

Tags: , ,

### 3 Responses to “Circular and Ring Health Bars! With Gamemaker Code and Explanation!”

1. yuigoto says:

I was studying something similar to draw and animate my “company” logo, but mine was a hexagonal shape.

Wasn’t that good with maths while in school, but right now it was pretty easy and pleasing to study it (though, sometimes, I get scared of numbers and trig stuff). 😛

Anyway, thanks for the tutorial! 😀 And Good Luck for LD! • r2d2upgrade says:

Unfortunately I’m not taking part this time Exams.

But I thought I could help those who are :3

Good luck with LD!

• yuigoto says:

Oh :(…well then, good luck with exams! ;D

This will be my first LD, so I hope I’ll finish something! XD

[cache: storing page]