HTML5 [Solved] How to use included file as index.html

[Jayars]

I would like to use a custom "index.html" with a a customized background, header, footers, etc for my HTML5 export.

I read this in the official GMS2 docs "HTML5 Options"

https://docs2.yoyogames.com/source/_build/2_interface/3_settings/game_options/options_html5.html

Included file as index.html: This is for adding a custom "index.html" file to use instead of the pre-defined one that GameMaker Studio 2 generates by default. This can be very useful if you have a website design implemented or want to include certain features in all your HTML5 builds. The file to use must be included as an Included File in the game project.

But I couldn't get more information from the docs, or from the link to the Included Files.

So how exactly do I use a custom "index.html"? Do I need to insert some placeholder text in my index.html so GMS2 knows where to inject the style, canvas, and script?

On a site note/question, the docs says: "Loading Bar Extension: This will change the default loading bar for one that has been added to your GameMaker Studio 2 project as an Extension (there is a demo of this available from the Start Page)."

Any idea which demo this refers to? Have downloaded YoYo Dungeon, YoYo Arena Shooter and YoYo Ball Breaker from the Start Page's demo section, but when I inspect the HTML5 Options tab, the loading bar option is left blank. And none of them have extensions.

 

[Michael Bateman]

Create an index.html file - e.g. in notepad. Then add it as an included file in GMS using the resource tree. Finally, in the options tab for HTML5, change the option to have your included index.html file as the one the game uses on startup.

This works in 1.X, but unfortunately, I've run into a bug on GMS 2 which means it ignores your included file and runs the standard one each time. Waiting for this to be fixed, hopefully in the next update.

When it does work, you'll need to make sure you call the JavaScript <script> to run your game (from your new index file). Advice; look at the original format of the index file first, so you can see what's included.

For loading bar changing, follow the same instructions - but for the loading bar. I don't know about an example on the start page, but there are a few examples through googling. I've not looked into this on GMS 2 as I haven't got that far due to the bugs, but it works well on 1.X.

 

[Jayars]

@Michael Bateman, thanks for the reply!

I'm going to install GMS1.4 just to see how it used to work.

If I understand you correctly, when using an included/custom index.html in GMS1.4, the index file is deployed as-is, with no additional post-processing/code injection (ie, script, style) ?

So would the workflow be something like this?

1. Export once with the default index.html
2. Edit the index.html (styling, etc), making sure everything else (script, canvas) are unchanged
3. Include this modified index.html back into the GMS project

Haven't been paying much attention to what GMS2 generates, but I think the <script src="" /> includes a hash behind it.
If the hash is going to change after each build or modification, then I guess a static index.html wouldn't work.

 

[Michael Bateman]

Yeah your workflow idea should work fine.

I dont think it injects anything on compile, but I've not really tested this. As far as I'm aware it takes as-is.

I've been meaning to look into the purpose of the hash for ages and not got around to it. For all my editing and moving custom index files around different projects, this hasn't given me any problems (that I know of!). As long as I make sure the project name matches, it seems to run the script fine. Let me know if you find anything out about the hash, would be interested!

 

[Jayars]

I was able to get the included index.html to work in GMS1.4.

Few things I've learned:
1. GMS1.4: The export default index.html, edit, include custom index.html is definitely the way to go
2. GMS1.4: Without a default index.html, GMS always generates a different hash <script src="..game.js?HUYF=123124123">
3. The hash itself does nothing. I can type in anything I was after the ?, and the webserver still returns the same js file
4. When using a custom index.html, the hash is fixed, but still works because of (3)

5. The custom index.html does not work when exporting the working GMS1.4 project to GMS2.0 (appears to be GMS2.0 bug)
- So until this is fixed in GMS2, I think I'm out of luck.

Regarding the hash, my guess is that it's used as a "cachebuster"?
https://www.virendrachandak.com/techtalk/cachebuster-code-in-javascript/
http://stackoverflow.com/questions/9692665/cache-busting-via-params

 

[Michael Bateman]

Ahhh that's really interesting. Thanks for sharing. I do have problems - using my custom index file - with having to clear the cache each time. So I guess if I change the hash each time it'll stop this issue for me and players. Will probably develop a script to randomise the hash each time then!

Cheers

 

[klys]

I can add to this post that the hash exists probably to avoid cache.

Thank you for this useful post.