Add custom HTML shell template to Web export

2026-03-16 22:09:21 +01:00
parent 0f5c5dcf3e
commit e10d784e83
6 changed files with 152 additions and 4 deletions
--- a/Source/Editor/Cooker/Platform/Web/WebPlatformTools.cpp
+++ b/Source/Editor/Cooker/Platform/Web/WebPlatformTools.cpp
@@ -205,7 +205,15 @@ bool WebPlatformTools::OnPostProcess(CookingData& data)
            FileSystem::CopyFile(dstIcon, platformDataPath / TEXT("favicon.ico"));
    }

-    // TODO: customizable HTML templates
+    // Copy custom HTMl template
+    auto customHtml = platformSettings->CustomHtml.TrimTrailing();
+    if (customHtml.HasChars())
+    {
+        FileSystem::CopyFile(data.OriginalOutputPath / TEXT("FlaxGame.html"), customHtml);
+    }
+
+    // Rename game website main HTML file to match the most common name used by web servers (index.html)
+    FileSystem::MoveFile(data.OriginalOutputPath / TEXT("index.html"), data.OriginalOutputPath / TEXT("FlaxGame.html"), true);

    // Insert packaged file system with game data
    {
@@ -254,8 +262,6 @@ bool WebPlatformTools::OnPostProcess(CookingData& data)
        return false;
    GameCooker::PackageFiles();

-    // TODO: minify/compress output JS files (in Release builds)
-
    LOG(Info, "Output website size: {0} MB", FileSystem::GetDirectorySize(data.OriginalOutputPath) / 1024 / 1024);

    return false;
--- a/Source/Editor/CustomEditors/Editors/AssetRefEditor.cs
+++ b/Source/Editor/CustomEditors/Editors/AssetRefEditor.cs
@@ -370,7 +370,7 @@ namespace FlaxEditor.CustomEditors.Editors
                SetValue(Editor.Instance.ContentDatabase.Find(Utilities.Utils.ToPathAbsolute(path)));
            else if (value is Asset)
                SetValue(FlaxEngine.Content.LoadAsync(path));
-            else if (value is string)
+            else if (value is string || Values.Type == typeof(string))
                SetValue(path);
        }

--- a/Source/Engine/Platform/SDL/SDLWindow.cpp
+++ b/Source/Engine/Platform/SDL/SDLWindow.cpp
@@ -135,6 +135,11 @@ SDLWindow::SDLWindow(const CreateWindowSettings& settings)
    if (_settings.Parent != nullptr && (_settings.Type != WindowType::Tooltip && _settings.Type != WindowType::Popup))
        _settings.Parent = nullptr;
 #endif
+#if PLATFORM_WEB
+    // Control canvas size
+    // TODO: try using SDL_SetWindowFillDocument (min SDL 3.4)
+    flags |= SDL_WINDOW_RESIZABLE;
+#endif

    // The window position needs to be relative to the parent window
    Int2 relativePosition(Math::TruncToInt(settings.Position.X), Math::TruncToInt(settings.Position.Y));
--- a/Source/Engine/Platform/Web/WebPlatformSettings.h
+++ b/Source/Engine/Platform/Web/WebPlatformSettings.h
@@ -29,6 +29,12 @@ API_CLASS(Sealed, Namespace="FlaxEditor.Content.Settings") class FLAXENGINE_API
        Basis,
    };

+    /// <summary>
+    /// The custom HTML template for the game page.
+    /// </summary>
+    API_FIELD(Attributes="EditorOrder(100), DefaultValue(\"\"), EditorDisplay(\"HTML\"), AssetReference(\".html\"), CustomEditorAlias(\"FlaxEditor.CustomEditors.Editors.FilePathEditor\")")
+    String CustomHtml;
+
    /// <summary>
    /// The output textures compression mode.
    /// </summary>
--- a/Source/Platforms/Web/Binaries/Data/shell.html
+++ b/Source/Platforms/Web/Binaries/Data/shell.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Flax Game</title>
+    <style>
+      body { margin: 0; }
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { width: 100vw; height: 100vh; display: block; border: 0px none; background-color: black; }
+
+      .spinner {
+        height: 50px;
+        width: 50px;
+        margin: 0px auto;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 10px solid rgb(0,150,240);
+        border-right: 10px solid rgb(0,150,240);
+        border-bottom: 10px solid rgb(0,150,240);
+        border-top: 10px solid rgb(100,0,200);
+        border-radius: 100%;
+        background-color: rgb(200,100,250);
+      }
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+
+    </style>
+  </head>
+  <body>
+    <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>Flax Game</strong></center></figure>
+    <div class="emscripten" id="status">Loading...</div>
+    <div class="emscripten">
+      <progress value="0" max="100" id="progress" hidden=1></progress>
+    </div>
+	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    <!--<div class="emscripten">
+        <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(false, false)">
+    </div>-->
+    <script type='text/javascript'>
+      var statusElement = document.getElementById('status');
+      var progressElement = document.getElementById('progress');
+      var spinnerElement = document.getElementById('spinner');
+      var canvasElement = document.getElementById('canvas');
+
+      // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+      // application robust, you may want to override this behavior before shipping!
+      // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+      canvasElement.addEventListener("webglcontextlost", (e) => {
+        alert('WebGL context lost. You will need to reload the page.');
+        e.preventDefault();
+      }, false);
+
+      function setStatus(text) {
+        if (!setStatus.last) setStatus.last = { time: Date.now(), text: '' };
+        if (text === setStatus.last.text) return;
+        var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+        var now = Date.now();
+        if (m && now - setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
+        setStatus.last.time = now;
+        setStatus.last.text = text;
+        if (m) {
+          text = m[1];
+          progressElement.value = parseInt(m[2])*100;
+          progressElement.max = parseInt(m[4])*100;
+          progressElement.hidden = false;
+          spinnerElement.hidden = false;
+        } else {
+          progressElement.value = null;
+          progressElement.max = null;
+          progressElement.hidden = true;
+          if (!text) spinnerElement.hidden = true;
+        }
+        statusElement.innerHTML = text;
+      }
+
+#if MODULARIZE && !EXPORT_ES6
+      var moduleArgs = {
+#else
+      var Module = {
+#endif
+        print(...args) {
+          console.log(...args);
+        },
+        canvas: canvasElement,
+        setStatus: setStatus,
+        totalDependencies: 0,
+        monitorRunDependencies(left) {
+          this.totalDependencies = Math.max(this.totalDependencies, left);
+          setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+        }
+      };
+      setStatus('Loading...');
+      window.onerror = () => {
+        setStatus('Exception thrown, see Developer Tools console');
+        spinnerElement.style.display = 'none';
+        setStatus = (text) => {
+          if (text) console.error('[post-exception status] ' + text);
+        };
+      };
+    </script>
+    {{{ SCRIPT }}}
+#if MODULARIZE && !EXPORT_ES6
+    <script type='text/javascript'>
+      {{{ EXPORT_NAME }}}(moduleArgs);
+    </script>
+#endif
+  </body>
+</html>
--- a/Source/Tools/Flax.Build/Platforms/Web/WebToolchain.cs
+++ b/Source/Tools/Flax.Build/Platforms/Web/WebToolchain.cs
@@ -313,6 +313,10 @@ namespace Flax.Build.Platforms
                {
                    args.Add("-sSIDE_MODULE");
                }
+
+                // Customize output HTML shell
+                if (options.LinkEnv.Output == LinkerOutput.Executable)
+                    args.Add($"--shell-file \"{Globals.EngineRoot}/Source/Platforms/Web/Binaries/Data/shell.html\"");
            }

            args.Add("-Wl,--start-group");