Setting Up For Web (HTML5)

GameMaker Studio 2 Web comes with an export platform for HTML5. In this article we give the required steps to get the HTML5 platform up and running.

General Information

To target HTML5 from the IDE, use the Target Manager, which is located in the top-right of the main GameMaker Studio 2 workspace:

Once you have selected this target, you can run your game from the IDE as you would for any other target or for testing and it will open the default browser (as set by the OS) and run the game. Note that you may get a Firewall warning the first time you run the target as GameMaker Studio 2 uses a micro web server (see here for more information) to serve the game to the browser and this will require access to your network.

Setting Up Alternative Browsers For Testing

One of the main features of the Device Manager is that it permits you to set up multiple devices for your different platforms and then test your projects on each one of them. The HTML5 target is no exception, only here you add browsers instead of actual physical devices.

To open the Device Manager, simply click the "pencil" icon beside the "Device" column in the Target Manager, which will open up the following window:

The default browser you have chosen in the OS will already be added to the list of devices, but usually when testing an HTML5 game you would want to test it on a number of different browsers to ensure compatibility and performance, so here you can add further browsers that are installed on your machine.

NOTE: Most modern browsers will run HTML5 games, but a few will not work correctly if you have Web GL enabled (you can find this setting the graphics section of the Game Options), so be sure to test on all your browsers with and without WebGL enabled. You can find a handy comparison of different browser capabilities from the HTML5Test site.

To add further browsers, you can either click the Detect Browsers button which will automatically try to identify the installed browsers and then add them to the list of devices, or you can click the Add New Browser button to set up the details yourself.

When adding a browser manually, you should keep the Port number as the default 51264 unless you encounter errors with that port being used already. You can also set the allowed web server IP (or IP range) here. For example, most home network routers use an IP starting with 192.168.1 so you can set the IP range here to / 24.

NOTE: If you wish to test on Microsoft Edge for Windows 10, then you need to first clear the list of devices and close GameMaker Studio 2. You then need to go to the Windows preferences and set Edge as your default browser for HTML. Once you have done that, on restarting GameMaker Studio 2 you can select the "Default" target device and it will open Edge.

Compiling Your Project

Once you have created your project, finished testing it on different browsers, and then filled in the Game Options, you will want to compile it then host it on a website. Packaging your game is simply a question of clicking the Create Executable button in the IDE. You will be prompted to give a save location for the game package, and then GameMaker Studio 2 will compile the game and save it as a ZIP.

The Zip file created will have all the required items for your game:

Now, you do not upload the zip to a server for use (when hosting your own HTML5 games). Instead you should unzip the files to a temporary location on your hardrive and then use FTP (for example) to upload them to your own server. Alternatively you can submit the zip to third party hosting sites like GameJolt or Kongregate.



Have more questions? Submit a request


Article is closed for comments.