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
//scr_health_ring(x,y,radius,thickness,maxsegments,segments,startangle,totalangle,direction,colour)

//argument0 = x
//argument1 = y
//argument2 = radius
//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
//scr_health_circle(x,y,radius,maxsegments,segments,startangle,totalangle,direction,colour)

//argument0 = x
//argument1 = y
//argument2 = radius
//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:
scr_health_ring(x,y,radius,thickness,maxsegments,segments,rotation,angle,direction,colour)
or
scr_health_circle(x,y,radius,maxsegments,segments,rotation,angle,direction,colour)

 

Meet The Variables:

Ring Health bars

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.

Demo download

A demo (gif):

Circular Health Bars Demo

 

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:

Ring Health bars angles

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.

Ring Health bars sections

 

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!

Ring Health bars triangle

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:

Ring Health bars triangle ab

 

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!

Ring Health bars triangle cd

Ring Health bars 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! :)

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]