Intro

HTML5 export for GameMaker is kinda broken, sometimes.

Within the list of issues, currently GameMaker exports HTML and Javascript files that are thought for a single game running into a page. For example, the canvas element where the game is rendered is named "canvas", and the function that starts the game is simply GameMaker_Init(). This makes it super tedious to actually embed two or more games or apps onto a single page.

While this use case might be niche (I've used it in my Random Number Generation write-up, for example) it's certainly disappointing.

I followed this reddit post and was able to write a small Python script that makes this process much simpler. Credit for the reverse engineering goes to the original author.

You can see an example of a page with two GameMaker "games" embedded on page 3 of my Random Number Generation write-up (read it all while you're at it!)

Instructions

Do the following for each of your games/apps you want to embed:

1) Build your HTML5 export as usual. Make sure before you export, you rename the folder and the index.html files, in GameMaker Game Options > HTML5,  to something specific to each file. For example, instead of "html5game" rename it to "mygame_1" and instead of "index.html" use "mygame_1.html".

2) Extract the ZIPs onto folders in your computer.

3) Edit the PrepareGMForMultipleHTML5.py file to suit your names, like so:

• path - Full path of where your extracted files are.
• js_folder - Name of your Javascript folder. This is the name of the folder where the Javascript resides and the name you chose in step 1 for the folder within GameMaker's options.
• index_filename - Name of your main HTML file. This is the name of the index.html file and the name you chose in step 1 for the file within GameMaker's options.
• js_filename - Name of the Javascript file within the previously specified folder.
• canvas_name - ID of the <canvas> element  you need, instead of "canvas". This is the name the script will rename the canvas to, so use a name that uniquely identifies your game (for example, "canvas_mygame_1").
• div_name - ID of the <div> element the canvas is contained, in the index file. Use a name that uniquely identifies your game (for example, "div_mygame_1")
• js_init_function - Valid function name for the initialization of the game, instead of the default GameMaker_Init(). Use a name that uniquely identifies your game. For example, "GameMaker_Init_mygame_1"
• js_wrapper_function - Name of a wrapper function needed to group each Javascript code for each game. Use a name that uniquely identifies the game, like  "game_mygame_1".
• output_index_filename - Name of the modified HTML file that will be written by the Python script with all of the modifications.
• output_js_filename - Name of the modified Javascript file that will be written by the Python script with all of the modifications.

4) Test your game on a local browser/webserver (or on your remote webserver) using the modified files. Make sure it still works.

5) Copy the <div> and <script> code from your modified index file to your target HTML/PHP/whatever website file and test that it's successfully working.

Prerrequisites

You need Python 3 to run the program.