Configure GameMaker: Studio’s Global Game Settings - dummies

Configure GameMaker: Studio’s Global Game Settings

By Michael Rohde

Scaling in GameMaker: Studio is all about matching your game’s graphics to the actual size of the player’s screen. Resolution is all about pixels per inch — a resolution of 1,920 x 1,200 means that a screen has 1,920 pixels horizontally and 1,200 lines vertically.

This software can get you started writing code to make your games fit the screen, whether you’re playing on a large monitor, a mobile phone, or a tablet.

The procedures here work together with the in-software tutorial “The_Application_Surface_Scaling.” When creating the proper resolution and scaling for your games, you’re manipulating the application surface. It’s best that you familiarize yourself with how the application surface works before continuing.

You can also review the tutorial “The_Application_Surface_Overview,” which you can find from the New Project window, under the Tutorials tab, in the Beginner section.

You can scale your games for Windows 8 (JavaScript) and Tizen (JavaScript) to maintain the appropriate aspect ratio, but those platforms require a different set of functions that are not covered here.

To get started, you should become familiar with the Global Game Settings window, shown in the figure. You can find the Global Game Settings window under the Resources menu.

The Global Game Settings window.
The Global Game Settings window.

To open the Global Game Settings window, follow these steps:

  1. Open the Application_Surface_Scaling tutorial from the New Project window.

    The project window appears.

  2. From the main menu, choose Resources→Change Global Game Settings.

    The Global Game Settings appear.

  3. Click the Windows tab.

    The Windows properties appear.

  4. Along the left side of the window, click the Graphics tab.

  5. From the Scaling section, select the Full Scale radio button.

    In the Options section of the Windows Graphics tab, you see a Scaling section with two radio buttons. The default is Keep Aspect Ratio, which is what you’ll eventually, but for now choose Full Scale so you can see the differences between the two settings.

    GameMaker does its best to fit the game in the full window, without maintaining aspect ratio.

  6. Click OK to save and close the Global Game Settings window.

Now is a good time to run the tutorial game to see what it initially looks like. To run the tutorial game, from the main menu, choose Run→Run Normally. At first, the game should have a proper aspect ratio — the game doesn’t look stretched to fill the screen.

However, if you resize the window, you’ll find that the game loses the aspect ratio and appears stretched, as shown in the figure. To fix this, go back to the Global Game Settings and choose Keep Aspect Ratio (refer to Step 5 in the preceding list).

Improper aspect ratio makes the game look stretched.
Improper aspect ratio makes the game look stretched.

The Full Scale option tells GameMaker to always scale the game to fit the current window size, which can lead to the stretching effect. When you select the Keep Aspect Ratio radio button, the aspect ratio remains correct but you get the letterbox effect (the black bars), as shown in this figure.

The letterbox effect with Keep Aspect Ratio selected.
The letterbox effect with Keep Aspect Ratio selected.

The Keep Aspect Ratio setting works for all target platforms except HTML5 and is the simplest way to ensure that all your games will display correctly regardless of the device display or window size. The problem right now is those pesky black bars.