godotengine / godot-proposals

Godot Improvement Proposals (GIPs)
MIT License
1.13k stars 93 forks source link

Allow easy customization of the default HTML5 export page's background color #3645

Open timothyqiu opened 2 years ago

timothyqiu commented 2 years ago

Describe the project you are working on

A mini game that is playable in browser on itch.io.

Describe the problem or limitation you are having in your project

For each HTML5 project, I have to make a custom HTML shell and change various color codes scattered around in the HTML.

Changing the background color is a quite common task for HTML exports.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Make the colors configurable in the export preset.

The target is to allow background color customization, but since the controls might not be visible on some background, the other two colors are introduced.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

There are already placeholders like $GODOT_URL. We can add more like $GODOT_BACKGROUND_COLOR, $GODOT_PRIMARY_COLOR, and $GODOT_SECONDARY_COLOR. Then make them configurable in the HTML5 export preset.

The current default template uses gradient for the notice label background, I think it unnecessarily complicates the styling and can be adapted to use a flat secondary color. (... or calculate the correct gradient if it's inappropriate to change the style.)

If this enhancement will not be used often, can it be worked around with a few lines of script?

No idea.

As an alternate approach, modifying & saving an HTML template for reuse is OK, but requires users to know basic HTML/CSS/JavaScript.

Is there a reason why this should be core and not an add-on in the asset library?

I think there are no such kind of plugin interface.

Faless commented 2 years ago

There are already placeholders like $GODOT_URL. We can add more like $GODOT_BACKGROUND_COLOR, $GODOT_PRIMARY_COLOR, and $GODOT_SECONDARY_COLOR. Then make them configurable in the HTML5 export preset.

No, we moved away from those because it made custom HTML pages harder to create and maintain (with breakage from version to version and constant new issues opened about that).

When you release a game (which is not a simple gamejam participation or test project) you will have an HTML template 99% of the time made from your artist (with all the niceness).

If we want to set the default template background which indeed sounds very reasonable, I think we can add it via the $GODOT_HEAD_INCLUDE when not using a custom template, anything more than that sounds like too much. We can add 2 colors, and many will want 3, or won't like the bar shadows, will want a gradient, etc, and indeed we could add more CSS customization this way but this will likely get messy soon.

As an alternate approach, modifying & saving an HTML template for reuse is OK, but requires users to know basic HTML/CSS/JavaScript.

We should improve the documentation and maybe show examples on how to change the font colors, add a spinner image, and things like that in HTML, but I really don't think we should overcomplicate the default export file, which will never be good enough, and would become harder to reuse.

Is there a reason why this should be core and not an add-on in the asset library?

I think there are no such kind of plugin interface.

This should be achievable via an EditorExportPlugin (editing the HTML on _export_end) though it is indeed quite hacky.

Maybe we could explore letting custom HTML5 templates define their own config which would then show up as export options (IIRC Unity had something like that for their WebGL export).

This would make creating configurable custom HTML5 templates easier (without the need of an EditorExportPlugin), and we could even reuse it in our internal template so that when switching template (or using a newer one) you could lose your configuration but the export should not break.

Praytic commented 1 year ago

Do you have at least open source examples of projects with the custom HTML page which overrides default loading screen?