Scaling to Best Fit in GameMaker: Studio

By Michael Rohde

You can learn how to maintain a proper aspect ratio for your games without the letterbox effect appearing. You do this by manipulating the application surface. The initial size of the application surface is based on the size of the Room (if Views are not active) or the View port (if Views are active).

By scaling the application surface to fit the player’s window or display size as best as possible, GameMaker adjusts the aspect ratio accordingly as the player resizes the window or triggers full-screen mode. The following procedures show how to scale your game for the best fit for desktop games. You can also update the code for mobile devices.

The following procedure uses the Application_Surface_Scaling tutorial.

To update the controller Object for scaling to best fit, follow these steps:

  1. With the tutorial open, from the Resource tree, click to open the Objects folder, then double-click obj_Control.

    The Object Properties appear.

  2. Choose Add Event→Create.

    The Create Event appears in the Events section.

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

    The code window appears.

  4. In the code window type the following code:

    min_width = view_wview[0];
    min_height= view_hview[0];

    This code tells GameMaker that the controller Object will take over the drawing of the application surface. The code also sets variables for the base width and height when the player resizes the window. The last line of the code calls a Script, which you write next.

    Because you haven’t written the Script yet, the last line of code will appear as an error in the code window, but that will fix itself after you write the Script.

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

Next, you need to write the Script that you called in the last procedure.

  1. From the Resource tree, right-click Scripts and choose Create Script.

    The Script code window appears.

  2. In the Name field, type scr_Resize.

  3. In the Script code window, type the following:

    cur_width = max(1, window_get_width());
    cur_height = max(1, window_get_height());
    var ratio = cur_width / cur_height;
    if cur_width < cur_height
        view_wview[0] = min_height * ratio;
        view_hview[0] = min_height;
        view_wview[0] = min_width;
        view_hview[0] = min_width / ratio;
    view_wport[0] = cur_width;
    view_hport[0] = cur_height;
    surface_resize(application_surface, view_wview[0], view_hview[0]);
  4. Click the green check mark to save and close the Script code window.

This code gets the current window size and stores those values in the variables. Because windows can be minimized, which would result in values of 0 (and you can’t divide by 0), you’re using the max function to ensure that the variables always have a value of 1 or greater.

The variables are then used to get the aspect ratio of the game window. After the aspect ratio is determined, GameMaker can use that to scale the game correctly, which is what the remainder of the code entails.