Unloading HTML5 Defold games using Angular Framework

Questions
#1

Does anyone have any experience running html5 Defold games on a website built using the Angular framework?
Getting games to run and play has been fine so far, I’ve been able to get a Defold game to play by converting the index.html file Defold generates when building a game as html5 to an Angular component and loading in the gamename.wasm + archive files using the provided dmloader.js.

But an issue arises when navigating away from the game. Sound effects and music continue playing and in fact I believe the entire game is actually still running, likely because Angular is a “single page application” web framework which keeps most data ‘alive’ so that it doesn’t need to load it again in the future.

So the real question is, is there a way to unload/stop a html5 Defold game? (without reloading the webpage, something like creating a dmloader function EnginLoader.unload(“game_path”))

I fully understand this is fairly heavy on angular stuff however as Defold provides the dmloader.js file for loading html5 games maybe someone here has some ideas. :crossed_fingers:

[note for anyone else trying the same thing: I have had some success by loading the game in an <iframe> or navigating to the game using hard <a> links but both strategies effectively reload the webpage which defeats the purpose of using Angular routing in the first place]

#2

I think what you want is to set the Module instance to null so that it can be garage collected:

https://emscripten.org/docs/api_reference/module.html

1 Like
#3

Hi, did you succeed in integrating defold to angular ? any sample ?

#4

The project was put on hold without finding a solution for keeping it all in one page unfortunately but if you are ok using an iframe that is what I had the most success with.
Sorry I don’t have time to put together a working sample for you but I’ve copied all the parts needed to get it working from my project. Disclaimer: the aim was running multiple games so if you are only needing to load one game you might not want/need to set it up the way i have done.
defold html5 in angular.zip (23.4 KB)

In Defold when you build as html5, as well as the game files there are 2 other important files generated, dmengine.js and engine_template.html.
The template file is used to display the game so in the files I included it has been broken up into its styles, js, html and converted into an angular component (game-iframe), this component needs to be put into an iframe element. (in the .ts file use the archive_location_filter to point to your games location in your angular project files and make sure you get the custom heap size from your games generated template file)
Loading the game requires the dmloader.js file which I had to modify a little to get working so I’ve included my version too. To include it as a js file you will also need to modify your anglur.json file to have a “scripts” section (i included mine for reference, ln36)

lastly of course you of course need the game files (archive folder, game_name.wasm, and the 2 js files, game_name_asmjs.js, game_name_wasm.js), I’ve also included a screenshot of the file structure for this. the games folder will also need to be added to the anglur.json file under the assets section(ln31)
good luck

1 Like
#5

Thanks, i was thinking of a simple solution… :slight_smile: it seems a bit complicated… but a Huge thanks for your help, i’ll try to understand your solution… if anyone succeeded its fine if you complete the given answer…
Regards