There are many ways to create a menu but one way is to draw text in a room and use arrow keys to choose between menu items. First, I will explain that. Then I will change the code so we can use the mouse buttons to choose the menu items. First we need to create a new room for our menu and set it as our first room to load. Then we need a menu object to be able to draw and interact with menu items.

Create Event

Here we need to initialize lots of variables. Here, we transition menu items from outside of the frame to inside so that’s what the target x and speed handle.

gui_width = display_get_gui_width();
gui_height = display_get_gui_height();
gui_margin = 32;

menu_x = gui_width + 200;
menu_y = gui_height - gui_margin;
menu_x_target = gui_width - gui_margin;

menu_speed = 25;
menu_font = fMenu;
menu_item_height = font_get_size(fMenu);
menu_commited = -1;
menu_control = true;

menu[2] = "New Game";
menu[1] = "Continue";
menu[0] = "Quit";

menu_cursor = 2;
menu_items = array_length(menu);

Step Event

Transitioning the menu items animation

//move menu items
menu_x += (menu_x_target- menu_x) / menu_speed;

Checking key presses

if ( menu_control == true ){
    if(keyboard_check_pressed(vk_up)){
        menu_cursor = (menu_cursor + 1) % menu_items;
    }
    if(keyboard_check_pressed(vk_down)){
        menu_cursor--;
        if(menu_cursor < 0) menu_cursor = menu_items - 1;
    }
    if(keyboard_check_pressed(vk_enter)){
//go out of page
        menu_x_target = gui_width + 200;
        menu_commited = menu_cursor;
        screen_shake(4, 30);
        menu_control = false;
    }
}

If the menu Item’s are out of page and we’ve chosen our option, we need to do the following

if( (menu_x > gui_width + 150) && (menu_commited != -1) ){
    switch (menu_commited){
        case 2: slide_transition(TRANSITION_MODES.NEXT);break; //new game
        case 1:{ //continue
            if (!file_exists(SAVEFILE)){
                slide_transition(TRANSITION_MODES.NEXT);
            } else {
                var file = file_text_open_read(SAVEFILE);
                var target = file_text_read_string(file);
                var room_id = asset_get_index(target);
                file_text_close(file);
                slide_transition(TRANSITION_MODES.GOTO, room_id);
            }
            break;
        }    
        case 0: //exit
            game_end();
            break;

    }
}

Draw GUI

draw_set_font(fMenu);
draw_set_halign(fa_right);
draw_set_valign(fa_bottom);

for(var i = 0; i < menu_items ; i++){
    var text_color = c_black;
    var offset = 2;
    var txt = menu[i];
    if (menu_cursor == i){
        txt = string_insert("> ", txt, 0);
        text_color = c_white;
    } else {
        text_color = c_gray;
    }
    var xx = menu_x;
    var yy = menu_y - (menu_item_height * (i *1.5));


    draw_set_color(c_black);
    draw_text(xx-offset, yy, txt);
    draw_text(xx+offset, yy, txt);
    draw_text(xx, yy-offset, txt);
    draw_text(xx, yy+offset, txt);
    draw_set_color(text_color);
    draw_text(xx, yy, txt);
}

Using mouse buttons

First we need to add a line to our Create Event so we can check for the menu borders and easily choose between options

menu_top = menu_y - ((menu_item_height * 1.5 ) * menu_items);

Then, we just need to add this code snippet when we have menu_control as true.

This code gets our mouse y and compares it with the top and bottom borders of the menu. If in range, we set our menu cursor (so we can visually see the option we choose on the screen.After that we just check if we click on the button, we need to set the values the same way we set the value when we pressed enter key earlier.

    var mouse_y_gui = device_mouse_y_to_gui(0);
    if(mouse_y_gui < menu_y && mouse_y_gui > menu_top){
        menu_cursor = (menu_y - mouse_y_gui) div (menu_item_height * 1.5);
        if (mouse_check_button_pressed(mb_left)){
            menu_x_target = gui_width + 200;
            menu_commited = menu_cursor;
            screen_shake(4, 30);
            menu_control = false;
        }
    }