unity webgl自定義啟動進度條動畫
阿新 • • 發佈：2019-01-07
多多少少在unity官網webgl模板看到了Template自定義介紹，今天分享一個超級實用的
新增自定義的模板有兩種方式：
1.在你-----unity安裝位置\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates
在這目錄下建立自定義模板
2.直接在unity的 Assets下建立WebGLTemplates資料夾 再到裡面建立自己的檔案（必須這個資料夾下名字不能打錯）
然後playersettings->Resolution and presentation->webgl Template 就可以看到你自定義的模板了
在這檔案下建立一個index.html檔案和一張你需要的logo圖片
直接看h5程式碼：
unity自帶的：
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity WebGL Player | %UNITY_WEB_NAME%</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="%UNITY_WEBGL_LOADER_URL%"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress}); </script> </head> <body> <div class="webgl-content"> <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div> <div class="footer"> <div class="webgl-logo"></div> <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div> <div class="title">%UNITY_WEB_NAME%</div> </div> </div> </body> </html>
自定的：
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>%UNITY_WEB_NAME%</title> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; background: #444; } #gameContainer { width: 100vw; height: 100vh; } canvas { width: 100%; height: 100%; display: block; } .logo { display: block; width: max-width: 80vw; height: max-height: 60vh; } .progress { margin: 1.5em; border: 1px solid white; width: 50vw; display: none; } .progress .full { margin: 2px; background: white; height: 1em; transform-origin: top left; } #loader { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .spinner, .spinner:after { border-radius: 50%; width: 5em; height: 5em; } .spinner { margin: 10px; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; transform: translateZ(0); animation: spinner-spin 1.1s infinite linear; } @keyframes spinner-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="gameContainer"></div> <div id="loader"> <img class="logo" src="logo.png"> <div class="spinner"></div> <div class="progress"><div class="full"></div></div> </div> </body> <script src="%UNITY_WEBGL_LOADER_URL%"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress}); function UnityProgress(gameInstance, progress) { if (!gameInstance.Module) { return; } const loader = document.querySelector("#loader"); if (!gameInstance.progress) { const progress = document.querySelector("#loader .progress"); progress.style.display = "block"; gameInstance.progress = progress.querySelector(".full"); loader.querySelector(".spinner").style.display = "none"; } gameInstance.progress.style.transform = `scaleX(${progress})`; if (progress === 1 && !gameInstance.removeTimeout) { gameInstance.removeTimeout = setTimeout(function() { loader.style.display = "none"; }, 2000); } } </script> </html>
看效果：
對應預設模板裡的h5程式碼來修改的， 對比可看出我還自適應螢幕了，好了拿去試試吧
- ％UNITY_WEB_NAME％ - 在unity設定下定義的產品名稱
- ％UNITY_HEIGHT％ - 來自WebGL解析度和unity設定中的演示的高度
- ％UNITY_WIDTH％ - 來自WebGL解析度和unity設定中的簡報的寬度
- ％UNITY_WEBGL_LOADER_GLUE％ - 載入構建的程式碼，通常在正文結束標記之前。