Draw an Analog Clock in GameMaker
Welcome to another GameMaker tutorial! Today we have a code snippet for drawing an analog clock entirely in GML. Because this is done entirely in GML it works on every single platform including desktop, mobile, web and consoles.
The script simply gets the current time from the player’s device and then draws some circles, lines and text to make a clock face. You can also customize the size, colors, outline size and whether or not to draw numbers on the clock face. Here is the script:
/// @description draw_analogue_clock(x,y,radius,line size,outer color,inner color,numbers,sec color);
/// @param x
/// @param y
/// @param radius
/// @param line size
/// @param outer color
/// @param inner color
/// @param numbers
/// @param sec color
function draw_analog_clock(argument0, argument1, argument2, argument3, argument4, argument5, argument6, argument7) {
var chqink_x = argument0;
var chqink_y = argument1;
var chqink_r = argument2;
var chqink_outsize = argument3;
var chqink_outcol = argument4;
var chqink_incol = argument5;
// GET THE CURRENT TIME
var chqink_datetime = date_current_datetime();
var chqink_min = date_get_minute(chqink_datetime);
var chqink_hour = date_get_hour(chqink_datetime);
var chqink_sec = date_get_second(chqink_datetime);
// MAKE THE HOUR VALUE INTO TWELVE HOURS (IF IT'S ABOVE 12)
if (chqink_hour > 12) {
chqink_hour -= 12;
}
// CHANGE THE VALUE OF HOURS, MINUTES AND SECONDS TO AN ANGLE IN DEGREES FOR THE HANDS
chqink_hour = 90 - (30*chqink_hour) - round(30*(chqink_min/60));
chqink_min = 90 - (6*chqink_min);
chqink_sec = 90 - (6*chqink_sec);
// DRAW OUTLINE
draw_set_color(chqink_outcol);
draw_circle(chqink_x,chqink_y,chqink_r,0);
// DRAW INSIDE
draw_set_color(chqink_incol);
draw_circle(chqink_x,chqink_y,chqink_r-chqink_outsize,0);
// DRAW NUMBERS
draw_set_color(chqink_outcol);
if (argument6 == true) {
var chqink_num = 1;
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
for (var chqink_i=60;chqink_i>-272;chqink_i-=30) {
draw_text( chqink_x+lengthdir_x(chqink_r-(chqink_outsize*4), chqink_i), chqink_y+lengthdir_y(chqink_r-(chqink_outsize*4), chqink_i), string(chqink_num));
chqink_num += 1;
}
}
// DRAW HOUR HAND
draw_line_width(chqink_x,chqink_y,chqink_x+lengthdir_x(chqink_r/2.5,chqink_hour),chqink_y+lengthdir_y(chqink_r/2.5,chqink_hour),chqink_outsize);
// DRAW MINUTE HAND
draw_line_width(chqink_x,chqink_y,chqink_x+lengthdir_x(chqink_r/1.5,chqink_min),chqink_y+lengthdir_y(chqink_r/1.5,chqink_min),chqink_outsize);
// DRAW SECOND HAND
draw_set_color(argument7);
draw_line_width(chqink_x,chqink_y,chqink_x+lengthdir_x(chqink_r/1.5,chqink_sec),chqink_y+lengthdir_y(chqink_r/1.5,chqink_sec),chqink_outsize/2);
// RESET DRAWING
draw_set_color($FFFFFF);
draw_set_halign(fa_left);
draw_set_valign(fa_top);
}It’s pretty simple, but very handy for learning some principles about getting the date and time if you’re a beginner! Here’s a screenshot of the script in action with some different colors and sizes:
Feel free to copy and paste the script from above into your own project, or download the .yyz example below to see it in action.
