Splash image support and new progress bar for HTML5 Web Export #91128

patwork · 2024-04-25T00:18:41Z

Intro

With the increasing popularity of the Godot engine, more and more users are reaching for it, often trying their hand at creating small games during organized compo/jams. Due to the nature of such events, the preferred export type for their production is HTML5.

So far, it's the only export that hasn't supported the ability to display a splash image when the game loads, despite the fact that the image is included in the saved project. The user has the option to create a custom HTML template, but for small games basically no one does this, relying on the engine's default settings.

That being said, I would like to propose an upgrade to the default HTML Shell used by Export to Web.

Goals

Display splash image (Godot or user-selected) when loading game files in the browser. This required exposing a new constant $GODOT_SPLASH from /platform/web/export/export_plugin.cpp.
Minor HTML, CSS and JS optimization to better handle the game loading status overlay.
Unify the progress bar by using a <progress> element that supports both percentage progress and indeterminate mode display. Browser support

Demo

Loading example game:

Loading in landscape mode:

Loading in portrait mode:

Error dialog:

Changes in HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
        <title>$GODOT_PROJECT_NAME</title>
        <style>
/* styles... */
        </style>
        $GODOT_HEAD_INCLUDE
    </head>
    <body>
        <canvas id="canvas">
            Your browser does not support the canvas tag.
        </canvas>

        <noscript>
            Your browser does not support JavaScript.
        </noscript>

        <div id="status">
            <img id="status-splash" src="$GODOT_SPLASH" alt="">
            <progress id="status-progress"></progress>
            <div id="status-notice"></div>
        </div>

        <script src="$GODOT_URL"></script>
        <script>
/* script... */
        </script>
    </body>
</html>

A warning has been added when JavaScript in the browser is disabled.
The “status” div has been greatly simplified.
An <img> tag has been added to display the splash image.
HTML5 <progress> tag has been added in place of the custom created progress bar and spinning wheel.

Changes in CSS

html, body, #canvas {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    color: white;
    background-color: black;
    overflow: hidden;
    touch-action: none;
}

#canvas {
    display: block;
}

#canvas:focus {
    outline: none;
}

#status, #status-splash, #status-progress {
    position: absolute;
    left: 0;
    right: 0;
}

#status, #status-splash {
    top: 0;
    bottom: 0;
}

#status {
    background-color: #38363A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

#status-splash {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}

#status-progress, #status-notice {
    display: none;
}

#status-progress {
    bottom: 10%;
    width: 50%;
    margin: 0 auto;
}

#status-notice {
    background-color: #5b3943;
    border-radius: 0.5rem;
    border: 1px solid #9b3943;
    color: #e0e0e0;
    font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
    line-height: 1.3;
    margin: 0 2rem;
    overflow: hidden;
    padding: 1rem;
    text-align: center;
    z-index: 1;
}

Common settings for elements are set together.
The #status overlay is made invisible at first by visibility: hidden, so it doesn't obscure a possible error message about Javascript not being supported.
Splash image is centered on viewport and responsive up to 100% horizontally and vertically.
The progress bar displays over the splash image at 10% of the viepower height from the bottom.
The background color of the error message has been changed to a more reddish.

Javascript

    const statusOverlay = document.getElementById('status');
    const statusProgress = document.getElementById('status-progress');
    const statusNotice = document.getElementById('status-notice');

    let initializing = true;
    let statusMode = '';

    function setStatusMode(mode) {
        if (statusMode === mode || !initializing) {
            return;
        }
        if (mode === 'hidden') {
            statusOverlay.remove();
            initializing = false;
            return;
        }
        statusOverlay.style.visibility = 'visible';
        statusProgress.style.display = mode === 'progress' ? 'block' : 'none';
        statusNotice.style.display = mode === 'notice' ? 'block' : 'none';
        statusMode = mode;
    }

    /* ... */

            'onProgress': function (current, total) {
                if (current > 0 && total > 0) {
                    statusProgress.value = current;
                    statusProgress.max = total;
                } else {
                    statusProgress.removeAttribute('value');
                    statusProgress.removeAttribute('max');
                }
            },

Added reference to #status and removed references to #statusProgressInner and #statusIndeterminate
Changed startup statusMode in case onProgress is never called before setStatusMode('hidden')
Removed manual animation of the spinning wheel.
Simplified setStatusMode removes the #status block completely when the status is changed to 'hidden' after loading the game.
Simplified onProgress using the capabilities of the HTML5 <progress> element (when value and max are removed, the browser automatically displays a bounce animation).

export_plugin.cpp

    replaces["$GODOT_URL"] = p_name + ".js";

    /* ... */

+   replaces["$GODOT_SPLASH"] = p_name + ".png";        
    
    /* ... */
    
    Ref<Image> splash = _get_project_splash();
    const String splash_png_path = base_path + ".png";

The path to GODOT_SPLASH is created on the same basis as the path to the main Javascript file. The png extension is due to a piece of code that generates the image during export.

Calinou · 2024-04-26T22:24:58Z

platform/web/export/export_plugin.cpp

@@ -170,6 +170,7 @@ void EditorExportPlatformWeb::_fix_html(Vector<uint8_t> &p_html, const Ref<Edito
 replaces["$GODOT_PROJECT_NAME"] = GLOBAL_GET("application/config/name");
 replaces["$GODOT_HEAD_INCLUDE"] = head_include + custom_head_include;
 replaces["$GODOT_CONFIG"] = str_config;
+ replaces["$GODOT_SPLASH"] = p_name + ".png";


In a future PR, we could have Godot write a lossless WebP instead of PNG as it'll have a smaller file size. The downside is that WebP can't be used as an Open Graph image, but we don't define the splash as an Open Graph image right now (perhaps we could).

@Calinou Usually, games aren't shared directly by the player link, so it's not that bad.

Faless

Amazing work! 💙

The only comment I have, is that between this change, and the change in #85939 we are again starting to add more and more substitution variables to the template, which is something we tried to avoid since #46200 .

That said, I don't think this is a blocker for the PR given it won't break the existing templates (that substitution is "optional").

Again, this looks fantastic, so I think it's worth merging as is!

adamscott

Great PR, thanks!

akien-mga · 2024-04-30T15:28:06Z

Thanks! And congrats for your first merged Godot contribution 🎉

patwork requested review from a team as code owners April 25, 2024 00:18

clayjohn added enhancement platform:web labels Apr 25, 2024

clayjohn added this to the 4.3 milestone Apr 25, 2024

clayjohn requested a review from adamscott April 25, 2024 00:37

akien-mga added the topic:export label Apr 25, 2024

Added splash image support and new progress bar for web export

7c8a4a9

patwork force-pushed the splash-image-in-web-export branch from d961ed3 to 7c8a4a9 Compare April 25, 2024 09:13

Calinou reviewed Apr 26, 2024

View reviewed changes

Faless approved these changes Apr 29, 2024

View reviewed changes

adamscott self-assigned this Apr 29, 2024

adamscott approved these changes Apr 30, 2024

View reviewed changes

akien-mga merged commit b1da4b2 into godotengine:master Apr 30, 2024
16 checks passed

This was referenced May 5, 2024

Added information about GODOT_SPLASH placeholder in HTML shell patwork/godot-docs#1

Closed

Added information about GODOT_SPLASH placeholder in HTML shell godotengine/godot-docs#9328

Merged

Praytic mentioned this pull request Sep 1, 2024

Migrate to 4.3 Praytic/youtd2#443

Closed

adamscott mentioned this pull request Sep 5, 2024

Update "Exporting for the Web" to include 4.3 features godotengine/godot-docs#9913

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Splash image support and new progress bar for HTML5 Web Export #91128

Splash image support and new progress bar for HTML5 Web Export #91128

patwork commented Apr 25, 2024

Calinou Apr 26, 2024 •

edited

Loading

adamscott Apr 30, 2024

Faless left a comment

adamscott left a comment

akien-mga commented Apr 30, 2024

Splash image support and new progress bar for HTML5 Web Export #91128

Splash image support and new progress bar for HTML5 Web Export #91128

Conversation

patwork commented Apr 25, 2024

Intro

Goals

Demo

Changes in HTML

Changes in CSS

Javascript

export_plugin.cpp

Calinou Apr 26, 2024 • edited Loading

Choose a reason for hiding this comment

adamscott Apr 30, 2024

Choose a reason for hiding this comment

Faless left a comment

Choose a reason for hiding this comment

adamscott left a comment

Choose a reason for hiding this comment

akien-mga commented Apr 30, 2024

Calinou Apr 26, 2024 •

edited

Loading