How to Hide the Letterbox in GameMaker: Studio

By Michael Rohde

The Keep Aspect Ratio option in GameMaker: Studio’s Global Game Settings window is a fantastic quick fix for mobile devices or full-screen desktop games. However, if you have the letterbox effect, the GUI elements will be drawn over them because they take all their coordinate positions from the (0,0) screen position.

This is where the application_get_position() function comes into play. This function returns an array of values indicating where on the screen the application surface is being drawn by default. You can use these values to define a relative position on the GUI layer, no matter the size of the GUI.

The following procedure uses The_Application_Surface_Scaling tutorial.

  1. Open obj_Control from the Resource tree.

  2. Choose Add Event→Draw→Draw GUI.

    The Draw GUI Event appears in the Events section.

  3. From the Control tab, drag and drop an Execute Code Action into the Actions section.

    The code window appears.

  4. In the code window, type the following:

    draw_set_color(c_white);
    var pos = application_get_position();
    if pos[0] > 0
    {
    var ratio = window_get_width() / window_get_height();
    display_set_gui_size((view_hview[0] * 1.5) * ratio, (view_hview[0] * 1.5));
    }
    else
    {
    var ratio = window_get_height() / window_get_width()
    display_set_gui_size((view_wview * 1.5), (view_wview[0] * 1.5) * ratio);
    }
    var gui_w = display_get_gui_width();
    var gui_h = display_get_gui_height();
    switch(os_type)
    {
    case os_windows:
    case os_macosx:
    case os_linux:
    case os_win8native:
        var win_w = window_get_width();
        var win_h = window_get_height();
        break;
    case os_android:
    case os_ios:
    case os_winphone:
    case os_tizen:
        var win_w = display_get_width();
        var win_h = display_get_height();
        break;
    }

    This code sets up the appropriate variables based on device type, and also sets the GUI layer to always be 1.5 times the size of the view. (Note that normally you would have a check in here to see if the screen has changed and only set the GUI layer if it has, but for this tutorial that isn’t necessary.)

    var x1 = (pos[0] / win_w) * gui_w;
    var x2 = (pos[2] / win_w) * gui_w;
    var y1 = (pos[1] / win_h) * gui_h;
    var y2 = (pos[3] / win_h) * gui_h;
    if pos[0] > 0
    {
    draw_rectangle(0, 0, x1, gui_h, false);
    draw_rectangle(x2, 0, gui_w, gui_h, false);
    }
    else
    {
    draw_rectangle(0, 0, gui_w, y1, false);
    draw_rectangle(0, y2, gui_w, gui_h, false);
    }

    This code draws white rectangles to cover the letterbox.

  5. Click the green check mark to save and close the code window.

If you test the game now, you should see white rectangles either on the top and bottom, or on the left and right, depending on how you size the window (see this figure). You can also change the Global Game Settings to landscape and portrait to see how that affects your game.

The white rectangles appear over the letterbox effect.
The white rectangles appear over the letterbox effect.

You’ll most likely still see some of the black bars from the letterbox effect. This shows that the white rectangles didn’t replace the letterbox effect; they just attempted to cover them up. Now, it’s up to you to go back and fine-tune the code to cover, say, 2 times the area instead of 1.5 times the area, to see what a difference that makes.

You don’t have to use white rectangles; you could use any color or even a Sprite.