Merge branch 'master' into 2021.3-urp

Author: JohannesDeml

Assets/Plugins/WebGL/WebGLTools/WebGlBridge.Commands.cs

@@ -122,6 +122,18 @@ public void ToggleInfoPanel()
 			WebGlPlugins.ToggleInfoPanel();
 		}
 
+		/// <summary>
+		/// Log the user agent of the browser and if this agent is classified as mobile
+		/// Browser Usage: <code>unityGame.SendMessage("WebGL", "LogUserAgent");</code>
+		/// </summary>
+		[WebGlCommand(Description = "Log User Agent and isMobileDevice")]
+		public void LogUserAgent()
+		{
+			string userAgent = WebGlPlugins.GetUserAgent();
+			bool isMobileDevice = WebGlPlugins.IsMobileDevice();
+			Debug.Log($"<color=#4D65A4>User Agent:</color> '{userAgent}', <color=#4D65A4>IsMobileDevice:</color> '{isMobileDevice}'");
+		}
+
 		/// <summary>
 		/// Log example messages to show off unity rich text parsing to html & console styling
 		/// </summary>

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.cs

@@ -29,6 +29,8 @@ public static class WebGlPlugins
 		[DllImport("__Internal")]
 		private static extern void _HideInfoPanel();
 		[DllImport("__Internal")]
+		private static extern string _GetUserAgent();
+		[DllImport("__Internal")]
 		private static extern uint _GetTotalMemorySize();
 		[DllImport("__Internal")]
 		private static extern uint _GetStaticMemorySize();
@@ -51,7 +53,7 @@ public static void SetVariable(string variableName, string value)
 			#endif
 			Debug.Log($"<color=#00CCCC>{nameof(WebGlPlugins)}.{nameof(SetVariable)} set {variableName}: {value}</color>");
 		}
-		
+
 		/// <summary>
 		/// Adds a time marker at the call time to the javascript map "unityTimeTrackers"
 		/// The mapped value is performance.now() at the time of the call
@@ -65,7 +67,7 @@ public static void AddTimeTrackingEvent(string eventName)
 			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(AddTimeTrackingEvent)} called with {eventName}");
 			#endif
 		}
-		
+
 		/// <summary>
 		/// Show the info panel in the top right corner
 		/// By default triggered by <see cref="WebGlTimeTracker"/> in Awake
@@ -80,7 +82,7 @@ public static void ShowInfoPanel()
 			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(ShowInfoPanel)} called");
 			#endif
 		}
-		
+
 		/// <summary>
 		/// Hide the info panel in the top right corner
 		/// By default triggered by <see cref="WebGlTimeTracker"/> in Awake
@@ -111,6 +113,33 @@ public static void ToggleInfoPanel()
 			}
 		}
 
+		/// <summary>
+		/// Get navigator.userAgent from the browser
+		/// </summary>
+		/// <returns>navigator.userAgent</returns>
+		public static string GetUserAgent()
+		{
+			#if UNITY_WEBGL && !UNITY_EDITOR
+			return _GetUserAgent();
+			#else
+			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(GetUserAgent)} called");
+			return "undefined";
+			#endif
+		}
+
+		/// <summary>
+		/// Check user agent to determine if the game runs on a mobile device
+		/// </summary>
+		/// <returns>true if on phone or tablet</returns>
+		public static bool IsMobileDevice()
+		{
+			string userAgent = GetUserAgent();
+			return userAgent.Contains("iPhone") ||
+				userAgent.Contains("iPad") ||
+				userAgent.Contains("iPod") ||
+				userAgent.Contains("Android");
+		}
+
 		/// <summary>
 		/// Get the total memory size used by the application in MB
 		/// </summary>
@@ -194,7 +223,7 @@ public static float GetManagedMemorySize()
 			var bytes = (uint) GC.GetTotalMemory(false);
 			return GetMegaBytes(bytes);
 		}
-		
+
 		/// <summary>
 		/// Converts bytes (B) to mega bytes (MB)
 		/// </summary>

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.jslib

@@ -60,7 +60,26 @@ var WebGlPlugins =
             setInfoPanelVisible(false);
         }
     },
-    
+
+    _GetUserAgent: function () {
+        var userAgent = navigator.userAgent;
+
+        //Get size of the string
+        var bufferSize = lengthBytesUTF8(userAgent) + 1;
+        //Allocate memory space
+        var buffer = _malloc(bufferSize);
+
+        //Copy old data to the new one then return it
+        if(typeof stringToUTF8 !== 'undefined') {
+            stringToUTF8(userAgent, buffer, bufferSize);
+        }
+        else if(typeof writeStringToMemory !== 'undefined') {
+            writeStringToMemory(userAgent, buffer);
+        }
+
+        return buffer;
+    },
+
     _GetTotalMemorySize: function()
     {
         if(typeof TOTAL_MEMORY !== 'undefined') {

Assets/WebGLTemplates/Develop/debug-console.js

@@ -270,15 +270,33 @@ function setupConsoleLogPipe() {
   let defaultConsoleError = console.error;
 
   // Overwrite log functions to parse and pipe to debug html console
-  console.log = (message) => { parseMessageAndLog(message, 'log', defaultConsoleLog); };
-  console.info = (message) => { parseMessageAndLog(message, 'info', defaultConsoleInfo); };
-  console.debug = (message) => { parseMessageAndLog(message, 'debug', defaultConsoleDebug); };
-  console.warn = (message) => { parseMessageAndLog(message, 'warn', defaultConsoleWarn); };
-  console.error = (message) => { parseMessageAndLog(message, 'error', defaultConsoleError); errorReceived(); };
+  console.log = (message) => { handleLog(message, 'log', defaultConsoleLog); };
+  console.info = (message) => { handleLog(message, 'info', defaultConsoleInfo); };
+  console.debug = (message) => { handleLog(message, 'debug', defaultConsoleDebug); };
+  console.warn = (message) => { handleLog(message, 'warn', defaultConsoleWarn); };
+  console.error = (message) => { handleLog(message, 'error', defaultConsoleError); errorReceived(); };
 
 
-  parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
+  handleLog = (message, logLevel, consoleLogFunction) => {
     updateLogCounter(logLevel);
+    if (typeof message === 'string') {
+      // Only parse messages that are actual strings
+      parseMessageAndLog(message, logLevel, consoleLogFunction);
+    }
+    else {
+      consoleLogFunction(message);
+      // Try to also log the object to the html console (does not always work in a meaningful manner)
+      var htmlMessage;
+      try {
+        htmlMessage = JSON.stringify(message);
+      } catch (error) {
+        htmlMessage = `Can't convert message to JSON: ${error}`;
+      }
+      htmlLog(htmlMessage, logLevel);
+    }
+  };
+
+  parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
     let styledTextParts = parseUnityRichText(message);
 
     let consoleText = '';

Assets/WebGLTemplates/Develop/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{{ PRODUCT_NAME }}}</title>
   <style>
     * {
@@ -24,26 +24,85 @@
       text-align: center;
     }
 
+    #unity-container {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+#if CONTAINER_BACKGROUND_COLOR
+      background-color: {{{CONTAINER_BACKGROUND_COLOR}}};
+#endif
+    }
+
+    /* Default values, might be overwritten by aspect ratio media queries */
     #unity-canvas {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+    }
+
+#if MIN_ASPECT_RATIO
+    @media (min-aspect-ratio: {{{ MIN_ASPECT_RATIO }}}) {
+      #unity-canvas {
+        width: auto;
+        height: 100%;
+        aspect-ratio: {{{ MIN_ASPECT_RATIO }}};
+      }
+    }
+#endif
+
+#if MAX_ASPECT_RATIO
+    @media (max-aspect-ratio: {{{ MAX_ASPECT_RATIO }}}) {
+      #unity-canvas {
+        width: 100%;
+        height: auto;
+        aspect-ratio: {{{ MAX_ASPECT_RATIO }}};
+      }
+    }
+#endif
+
+    #unity-loading-container {
       position: absolute;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 40px;
+
+      opacity: 1;
+      visibility: visible;
+      transition: 800ms linear;
+    }
+
+    #unity-loading-container.finished {
+      opacity: 0;
+      visibility: collapse;
+    }
+
+    #unity-loading-container .logo {
+      width: 15%;
+      height: 15%;
     }
 
     #unity-loading-bar {
-      position: absolute;
-      left: 30%;
-      top: 50%;
+      position: relative;
       width: 40%;
       height: 10px;
       background-color: #fff;
       border: 1px solid #ccc;
       border-radius: 10px;
     }
 
-    #unity-progress-bar {
+    #unity-loading-bar-inner {
       position: absolute;
       left: 0%;
       top: 0%;
@@ -58,21 +117,17 @@
 </head>
 
 <body>
-  <script src="./debug-console.js"></script>
-  <canvas id="unity-canvas"></canvas>
-  <div id="unity-loading-bar">
-    <div id="unity-progress-bar">
+  <div id="unity-container">
+    <canvas id="unity-canvas"></canvas>
+  </div>
+  <div id="unity-loading-container">
+    <img src="logo.svg" class="logo" alt="Logo {{{ COMPANY_NAME }}}">
+    <div id="unity-loading-bar">
+      <div id="unity-loading-bar-inner"></div>
     </div>
   </div>
   <script src="Build/{{{ LOADER_FILENAME }}}"></script>
   <script>
-    const maxPixelRatioMobile = 2.0;
-    const maxPixelRatioDesktop = 1.5;
-
-    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-    var maxDevicePixelRatio = isMobile? maxPixelRatioMobile: maxPixelRatioDesktop;
-    var pixelRatio = Math.min(window.devicePixelRatio, maxDevicePixelRatio);
-
     var buildUrl = "Build";
     var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
     var config = {
@@ -89,28 +144,36 @@
       companyName: "{{{ COMPANY_NAME }}}",
       productName: "{{{ PRODUCT_NAME }}}",
       productVersion: "{{{ PRODUCT_VERSION }}}",
-      devicePixelRatio: pixelRatio
     };
 
+    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    if(isMobile) {
+      // Define a maximum pixel ratio for mobile to avoid rendering at too high resolutions
+      const maxPixelRatioMobile = 2.0;
+      config.devicePixelRatio = Math.min(window.devicePixelRatio, maxPixelRatioMobile);
+    }
+
     var canvas = document.querySelector("#unity-canvas");
-    var loadingBar = document.querySelector("#unity-loading-bar");
-    var progressBar = document.querySelector("#unity-progress-bar");
+    var loadingContainer = document.querySelector("#unity-loading-container");
+    var loadingBar = document.querySelector("#unity-loading-bar-inner");
 
-    var unityGame; // This can be used to access the application with .SendMessage() commands
+    var unityGame; // This variable can be used to access the application with .SendMessage() commands
     var script = document.createElement("script");
     script.src = loaderUrl;
     script.onload = function() {
       createUnityInstance(canvas, config, function(progress) {
-        progressBar.style.width = 100 * progress + "%";
+        loadingBar.style.width = 100 * progress + "%";
       }).then(function(unityInstance) {
         unityGame = unityInstance;
-        loadingBar.style.display = "none";
+        loadingContainer.classList.add("finished");
       }).catch(function(message) {
         alert(message);
       });
     };
     document.body.appendChild(script);
   </script>
+  <!-- Add an html debug console and handle unity rich text styling for both html and browser console-->
+  <script src="./debug-console.js"></script>
 </body>
 
 </html>