Html5 Scaling in GameMaker: Studio

By Michael Rohde

Resolution and scaling techniques in GameMaker: Studio for desktop targets also work for the most part in the HTML5 target. However, you can fine-tune your code specifically for browser windows instead of desktops. The main differences are that the window is now referred to as a canvas element of the web page and the display becomes the width and height of the browser.

This set of instructions works in tandem with the in-software tutorial, HTML5_Scaling. You can find this tutorial from the New Project window on the Tutorials tab. From the tree on the left, open Intermediate and then select HTML5_Scaling.

  1. With the HTML5_Scaling tutorial open, from the Resource tree, in the Objects folder, double-click obj_HTML5_Scaling.

    The Object Properties appear.

  2. Choose Add Event→Create.

    The Create Event appears in the Events section.

  3. Drag and drop an Execute Code Action from the Control tab to the Actions section.

    A code window appears.

  4. In the code window, type the following:

    base_width = room_width;
    base_height = room_height;
    width = base_width;
    height = base_height;
  5. Click the green check mark.

    The code window is saved and closed.

This code sets variables for the base width and height of the Room. The second set of variables will account for when the browser height and width change. The beginning value for the width and height variables equal the base width and height.

To write a Script to scale for HTML5, follow these steps:

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

    The Script code window appears.

  2. In the Name field, type scr_HTML5_Scale_Canvas.

  3. In the code window, type the following:

    aspect = argument0 / argument1;
    if argument2 / aspect > argument3
    {
    window_set_size(argument3 * aspect, argument3);
    }
    else
    {
    window_set_size(argument2, argument2 / aspect);
    }
    if argument4
    {
    window_center();
    }
  4. Click the green check mark.

    The code window is saved and closed.

This code checks the size of the browser window and makes the necessary calculations to maintain aspect ratio and scaling if the player changes the size of the window. The last line of code centers the game within the browser, which is optional, and it doesn’t currently work with the Windows 8 (JS) target.