⚡ Attempting to improve embedded Unity player performance

Fydar · Mar 20, 2024 · 0a76673 · 0a76673
1 parent f9494f7
commit 0a76673
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor b/src/Fydar.Dev.WebApp/Components/Layout/EmbedUnity.razor
@@ -1,8 +1,8 @@
-<div class="embed" id="@UnityContainer" @attributes="AdditionalAttributes">
+<div class="embed loading" style="--loading-percentage: 0%;" id="@UnityContainer" @attributes="AdditionalAttributes">
     <canvas class="embed-canvas" id="@UnityCanvas" width=960 height=600 tabindex="-1"></canvas>
     <div class="embed-placeholder">
         @Placeholder
-        <div class="progress" role="progressbar">
+        <div class="progress">
             <div class="progress-bar" style="width: var(--loading-percentage);"></div>
         </div>
     </div>
@@ -21,8 +21,9 @@
         var div = document.createElement('div');
         div.innerHTML = msg;
         warningBanner.appendChild(div);
-        if (type == 'error') div.style = 'background: red; padding: 10px;';
-        else {
+        if (type == 'error') {
+            div.style = 'background: red; padding: 10px;';
+        } else {
             if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
             setTimeout(function () {
                 warningBanner.removeChild(div);
@@ -34,19 +35,20 @@
 
     config.showBanner = unityShowBanner;
 
-    container.classList.add("loading");
-
     var script = document.createElement("script");
     script.src = loaderUrl;
+    script.setAttribute("async", "");
     script.onload = () => {
-        createUnityInstance(canvas, config, (progress) => {
-            container.style.setProperty('--loading-percentage', 100 * progress + "%");
-        }).then((unityInstance) => {
-            container.style.setProperty('--loading-percentage', "100%");
-            container.classList.remove("loading");
-        }).catch((message) => {
-            alert(message);
-        });
+        setTimeout(function () {
+            createUnityInstance(canvas, config, (progress) => {
+                container.style.setProperty('--loading-percentage', 100 * progress + "%");
+            }).then((unityInstance) => {
+                container.style.setProperty('--loading-percentage', "100%");
+                container.classList.remove("loading");
+            }).catch((message) => {
+                alert(message);
+            });
+        }, 1);
     };
     document.body.appendChild(script);
 </script>

diff --git a/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor b/src/Fydar.Dev.WebApp/Components/Pages/Projects/AstralElites.razor
@@ -37,7 +37,7 @@
             var loaderUrl = "/play/astralelites/build/v0.0.5-rc2.loader.js";
         </script>
 
-        <EmbedUnity class="embed parallax-layer" style="--parallax-multiplier: 0.5">
+        <EmbedUnity class="embed loading parallax-layer" style="--parallax-multiplier: 0.5">
             <Placeholder>
                 <img src="/play/astralelites/favicon.ico" alt="The logo for 'Astral Elites'." style="width: 200px; max-width: 90%; margin-bottom: 32px;" />
             </Placeholder>