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.
- With the HTML5_Scaling tutorial open, from the Resource tree, in the Objects folder, double-click obj_HTML5_Scaling.The Object Properties appear.
- Choose Add Event→Create.The Create Event appears in the Events section.
- Drag and drop an Execute Code Action from the Control tab to the Actions section.A code window appears.
- In the code window, type the following:
- Click the green check mark.The code window is saved and closed.
GameMaker Studio (formerly Animo until 1999, Game Maker until 2011, GameMaker until 2012, and GameMaker: Studio until 2017) is a cross-platform game engine developed by YoYo Games.
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:
- From the Resource tree, right-click Scripts, and choose Create Script.The Script code window appears.
- In the Name field, type scr_HTML5_Scale_Canvas.
- In the code window, type the following:
- 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.
Related articles:
Load more
Here are the best keyboard commands GameMaker: Studio has to offer. These time- and energy-saving keyboard combinations are available from the GameMaker: Studio main Project window.
Keyboard commands are a great way to get things done quickly. They provide a shortcut to accessing menus and different features. So, instead of clicking around on menus, you can use a keyboard command to get what you want.
Action | Keyboard Command |
---|---|
Open a new project | Ctrl+N |
Open an existing project | Ctrl+O |
Import a project | Ctrl+I |
Exit GameMaker: Studio | Alt+F4 |
Create a duplicate | Alt+Ins |
Create a group | Shift+Ins |
Delete something | Shift+Del |
Rename something | F2 |
Open the Properties window | Alt+Enter |
Create a shader | Shift+Ctrl+A |
Create a clean build | F7 |
Access the in-software manual | F1 |
Open GameMaker: Studio in Explorer | Ctrl+Alt+O |
Open project in Explorer | Ctrl+Alt+P |
The following keyboard commands are available from a Script Editor window:
Action | Keyboard Command |
---|---|
Opens the code snippet pop-up window | F2 |
Makes the size of the font smaller | F7 |
Makes the size of the font bigger | F8 |
Toggles the color coding for the code | F10 |
Search, find, and replace | Ctrl+F |
Undo the last action | Ctrl+Z |
Redo the last action | Ctrl+Shift+Z |
Select text | Shift+arrow keys |
Force the auto-complete to appear (if you have it turned off in the Scripts preferences) | Ctrl+Spacebar |