unity-loader.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. var container = document.querySelector("#unity-container");
  2. var canvas = document.querySelector("#unity-canvas");
  3. var loadingBar = document.querySelector("#unity-loading-bar");
  4. var progressBarFull = document.querySelector("#unity-progress-bar-full");
  5. var warningBanner = document.querySelector("#unity-warning");
  6. function unityShowBanner(msg, type) {
  7. function updateBannerVisibility() {
  8. warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
  9. }
  10. var div = document.createElement('div');
  11. div.innerHTML = msg;
  12. warningBanner.appendChild(div);
  13. if (type == 'error') div.style = 'background: red; padding: 10px;';
  14. else {
  15. if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
  16. setTimeout(function() {
  17. warningBanner.removeChild(div);
  18. updateBannerVisibility();
  19. }, 5000);
  20. }
  21. updateBannerVisibility();
  22. }
  23. var buildUrl = "C3Dev/Build";
  24. var loaderUrl = buildUrl + "/C3Dev.loader.js";
  25. var config = {
  26. dataUrl: buildUrl + "/C3Dev.data.unityweb",
  27. frameworkUrl: buildUrl + "/C3Dev.framework.js.unityweb",
  28. codeUrl: buildUrl + "/C3Dev.wasm.unityweb",
  29. streamingAssetsUrl: "StreamingAssets",
  30. companyName: "DefaultCompany",
  31. productName: "C3Monitor",
  32. productVersion: "0.1",
  33. showBanner: unityShowBanner,
  34. };
  35. if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  36. // Mobile device style: fill the whole browser client area with the game canvas:
  37. var meta = document.createElement('meta');
  38. meta.name = 'viewport';
  39. meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
  40. document.getElementsByTagName('head')[0].appendChild(meta);
  41. container.className = "unity-mobile";
  42. // To lower canvas resolution on mobile devices to gain some
  43. // performance, uncomment the following line:
  44. // config.devicePixelRatio = 1;
  45. canvas.style.width = '100%';
  46. canvas.style.height = '610px';
  47. unityShowBanner('WebGL builds are not supported on mobile devices.');
  48. } else {
  49. // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
  50. //canvas.style.width = '600px';
  51. canvas.style.height = '610px';
  52. canvas.style.width = '100%';
  53. }
  54. loadingBar.style.display = "block";
  55. var myGameInstance = null;
  56. var script = document.createElement("script");
  57. script.src = loaderUrl;
  58. script.onload = () => {
  59. createUnityInstance(canvas, config, (progress) => {
  60. progressBarFull.style.width = Math.round(100 * progress) + "%";
  61. progressBarFull.innerHTML = Math.round(100 * progress) + "%";
  62. }).then((unityInstance) => {
  63. loadingBar.style.display = "none";
  64. myGameInstance = unityInstance;
  65. }).catch((message) => {
  66. alert(message);
  67. });
  68. };
  69. document.body.appendChild(script);