Add "Loading - Please Wait" text to HTML5 export loading screen.

[LillyByte]

Describe the project you are working on: I export a lot of small, HTML5 games that are played by numerous people; especially by Twitch streamers, and I've encountered a simple, core issue affected by many who load HTML5 games exported by Godot.

Describe the problem or limitation you are having in your project: After watching a large number people load my HTML5 games in their browsers (100s of people over time), most will initially close the game page because they think the page is frozen, even though the circle is still spinning. Many will remark that it's not working. The spinning circle alone is not recognized as a universal loading icon. I have to explain to them, "No, the circle means it's still loading, you have to wait for it to load."

Describe how this feature / enhancement will help you overcome this problem or limitation: A little bit of text saying "LOADING PLEASE WAIT" underneath or above the spinning icon would go a long way in allowing end users to understand the game is loading and that it is not frozen.

Show a mock up screenshots/video or a flow diagram explaining how your proposal will work: Just put some text above/below the spinning icon we currently have, and there you go.

Describe implementation detail for your proposal (in code), if possible: I don't know how to do this.

If this enhancement will not be used often, can it be worked around with a few lines of script?: It would be used in every single HTML5 export, as it would be on the loading page.

Is there a reason why this should be core and not an add-on in the asset library?: It's for end-user clarity while loading Godot HTML5 exported games so people don't pre-emptively close them out thinking they are frozen.

[DleanJeans]

You can change the HTML to add the text after you export.

[LillyByte]

You can change the HTML to add the text after you export.

Great, if you're a web developer; terribly inconvenient if you're not, even less so if you have to re-do it every time you export (which for me, can be a dozen times in the run of a day).

There is no reason to not have a "Please Wait" message as defaulted on export.

[Calinou]

Great, if you're a web developer; terribly inconvenient if you're not, even less so if you have to re-do it every time you export (which for me, can be a dozen times in the run of a day).

While I agree with your proposal, you can just change the HTML template to avoid doing it every time :wink:

The Export dialog lets you choose a custom HTML template for each HTML5 preset.

There is no reason to not have a "Please Wait" message as defaulted on export.

Actually, there is: the message can't be easily localized…

It's probably not a dealbreaker, but some people may not like seeing an English message if they managed to fully translate their project in other languages.

[NHodgesVFX]

What about a progress bar with no message. I think that would get the message across that its loading.

[clayjohn]

@Calinou It should be possible to allow users to input a custom string that gets inserted right? That way we get around the localization issue.

[Calinou]

@NHodgesVFX This is what we currently have while the project is downloading. It seems it doesn't convey a clear meaning to some people out there :slightly_frowning_face:

@clayjohn Maybe, but I'd still prefer having localization built-in. It's likely doable with a bit of JavaScript; the issue is that it'd be tedious to integrate with a translation platform like our Weblate. I guess we could accept pull requests for translations instead.

Proper localiaztion support also makes it possible to support multiple languages at once.

[NHodgesVFX]

@NHodgesVFX This is what we currently have while the project is downloading. It seems it doesn't convey a clear meaning to some people out there 🙁

@clayjohn Maybe, but I'd still prefer having localization built-in. It's likely doable with a bit of JavaScript; the issue is that it'd be tedious to integrate with a translation platform like our Weblate. I guess we could accept pull requests for translations instead.

Proper localiaztion support also makes it possible to support multiple languages at once.

Oh your right I see the progress bar. Another issue I noticed is once the game downloads the user still has to wait for the initial scene to load in. During this time the screen is black with nothing shown, would it be possible to have an option to show a spashscreen while waiting for the first scene to be loaded. Here is an example https://codegoons.itch.io/go-farm-yourself-web .The game loads fine but takes a while for the initial scene to load.

[nezvers]

Very often that black screen after loading is staying for a long time and that for sure is killing the joy.

[Calinou]

@nezvers This is probably due to engine initialization taking a while – it's a large .wasm binary after all. I'm not sure how much this could be optimized. Since this happens before the engine is actually initialized (to my knowledge), this means we have to use some other method to display a splash screen – we can't reuse the splash screen defined in the Project Settings.

[LillyByte]

Could something be added to the output of the HTML file itself while the engine initialization is happening that rolls out a custom loading screen until it is initialized?

[akien-mga]

CC @Faless

I'm fine adding text to the HTML page template, and indeed if we do we should ensure that it handles localization properly.

I would suggest that interested contributors make mockups or full implementations of what it could look like, the templates are in HTML and available here: https://github.com/godotengine/godot/tree/master/misc/dist/html (and also included in the webassembly_*.zip archives of your installed Godot templates.

One can specify a custom HTML page template in the HTML5 export preset so even if we didn't change the default one, it should be easy to provide custom ones as addons that users can select. (But again I think if we have a good mockup, we can definitely change the default template. The current one is barebones.)

See also the documentation we have on customizing the HTML page template: https://docs.godotengine.org/en/stable/tutorials/platform/customizing_html5_shell.html

[Yesyoor]

Hey so what happened in this matter? I am facing the same problem, that after the files has been downloaded it would take the engine about 30s to init the game. We need some signals to hook onto as soon as the engine is ready or is there an other workaround to detect when the engine is read to start the game and to catch this in my html template and remove the progress bar/ label etc?

[Yesyoor]

As I just saw the mentioned html template uses progress and total to calculate the current progress. For my export I received 0 for total. Why is Godot not able to calculate the files size? I am on Mac OS.

[YuriSizov]

As I just saw the mentioned html template uses progress and total to calculate the current progress. For my export I received 0 for total. Why is Godot not able to calculate the files size? I am on Mac OS.

This is likely because your web server doesn't report content size properly.

[Yesyoor]

As I just saw the mentioned html template uses progress and total to calculate the current progress. For my export I received 0 for total. Why is Godot not able to calculate the files size? I am on Mac OS.

This is likely because your web server doesn't report content size properly.

Thanks! Do you know where to find documentations about how to serve this properly?

[Calinou]

Thanks! Do you know where to find documentations about how to serve this properly?

Which platform are you hosting the project on (itch.io, GitHub Pages, your own hosting)? If you're using a third-party platform, you won't have control over the web server configuration.

On the Godot side, I guess this should be fixed by displaying an indeterminate progress bar when the content length is unspecified.

[YuriSizov]

Thanks!

Do you know where to find documentations about how to serve this properly?

First of all, make sure that you receive Content-Length headers and that they are not cut by an intermediate server, like a proxy.

Then the docs also mention other possible reasons https://docs.godotengine.org/en/stable/tutorials/platform/html5_shell_classref.html#onProgress

[Yesyoor]

@Calinou @pycbouh Thank you for your reply :) I am hosting it myself using Django. I will check my content headers to see what is going on exactly and report back.

[Faless]

@Railwanderer if you use recent godot verions (i.e. 3.4) you also probably won't need the content-length headers, as long as you export the whole project every time (not just the PCK). The exporter will add the known file size to the HTML page to work around servers not providing the content-length.

[Yesyoor]

@faless thank you, I will probably solve it the same way, hardcoded, as I won't embed many games in the website :)