├── LICENSE
├── README.md
└── Web3Template
    ├── TemplateData
        ├── UnityProgress.js
        ├── favicon.ico
        ├── fullscreen.png
        ├── progressEmpty.Dark.png
        ├── progressEmpty.Light.png
        ├── progressFull.Dark.png
        ├── progressFull.Light.png
        ├── progressLogo.Dark.png
        ├── progressLogo.Light.png
        ├── style.css
        ├── web3.min.js
        ├── web3Connect.js
        └── webgl-logo.png
    └── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 _dLabs
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # web3-webgl-template
 2 | 
 3 | Article: https://medium.com/@leondo/unity-engine-metamask-wallet-6797d4699e45
 4 | 
 5 | Automagically connect your Unity game to Metamask
 6 | 
 7 | ![Screen Shot 2020-10-19 at 9 53 06 PM](https://user-images.githubusercontent.com/19412160/96530472-87839600-1255-11eb-8db4-3139f2eadde5.png)
 8 | 
 9 | ## How to use
10 | 
11 | Create a folder called `WebGLTemplates` under `/Assets`
12 | 
13 | Download `Web3Template` from here and paste under `WebGLTemplates`
14 | 
15 | ![Screen Shot 2020-10-19 at 9 52 00 PM](https://user-images.githubusercontent.com/19412160/96530476-8a7e8680-1255-11eb-99ad-2e816cd5a06d.png)
16 | 
17 | In Unity
18 | 
19 | ![Screen Shot 2020-10-19 at 9 42 27 PM](https://user-images.githubusercontent.com/19412160/96530483-8c484a00-1255-11eb-81ee-fcfcd3f8330c.png)
20 | 
21 | Change template
22 | 
23 | ![Screen Shot 2020-10-19 at 9 41 36 PM](https://user-images.githubusercontent.com/19412160/96530489-8e120d80-1255-11eb-8e27-c6d8f0cb3dc1.png)
24 | 
25 | Build as webgl
26 | 
27 | ## Under the hood
28 | 
29 | ```javascript
30 | // Web3Template/TemplateData/web3Connect.js
31 | 
32 | if (window.ethereum) {
33 |   web3 = new Web3(window.ethereum);
34 |   // connect popup
35 |   ethereum.enable();
36 | } else {
37 |   alert("Non-Ethereum browser detected. Please connect to a wallet");
38 | }
39 | ```
40 | 


--------------------------------------------------------------------------------
/Web3Template/TemplateData/UnityProgress.js:
--------------------------------------------------------------------------------
 1 | function UnityProgress(unityInstance, progress) {
 2 |   if (!unityInstance.Module)
 3 |     return;
 4 |   if (!unityInstance.logo) {
 5 |     unityInstance.logo = document.createElement("div");
 6 |     unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
 7 |     unityInstance.container.appendChild(unityInstance.logo);
 8 |   }
 9 |   if (!unityInstance.progress) {    
10 |     unityInstance.progress = document.createElement("div");
11 |     unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
12 |     unityInstance.progress.empty = document.createElement("div");
13 |     unityInstance.progress.empty.className = "empty";
14 |     unityInstance.progress.appendChild(unityInstance.progress.empty);
15 |     unityInstance.progress.full = document.createElement("div");
16 |     unityInstance.progress.full.className = "full";
17 |     unityInstance.progress.appendChild(unityInstance.progress.full);
18 |     unityInstance.container.appendChild(unityInstance.progress);
19 |   }
20 |   unityInstance.progress.full.style.width = (100 * progress) + "%";
21 |   unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
22 |   if (progress == 1)
23 |     unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
24 | }


--------------------------------------------------------------------------------
/Web3Template/TemplateData/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/favicon.ico


--------------------------------------------------------------------------------
/Web3Template/TemplateData/fullscreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/fullscreen.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressEmpty.Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressEmpty.Dark.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressEmpty.Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressEmpty.Light.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressFull.Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressFull.Dark.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressFull.Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressFull.Light.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressLogo.Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressLogo.Dark.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/progressLogo.Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/progressLogo.Light.png


--------------------------------------------------------------------------------
/Web3Template/TemplateData/style.css:
--------------------------------------------------------------------------------
 1 | .webgl-content * {border: 0; margin: 0; padding: 0}
 2 | .webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
 3 | 
 4 | .webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
 5 | .webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
 6 | .webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
 7 | .webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
 8 | .webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
 9 | 
10 | .webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
11 | .webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
12 | .webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
13 | 
14 | .webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
15 | .webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
16 | .webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
17 | .webgl-content .footer .title {margin-right: 10px; float: right;}
18 | .webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
19 | 


--------------------------------------------------------------------------------
/Web3Template/TemplateData/web3Connect.js:
--------------------------------------------------------------------------------
 1 | if (window.ethereum) {
 2 |   web3 = new Web3(window.ethereum);
 3 |   // connect popup
 4 |   ethereum.enable();
 5 | 
 6 |   window.ethereum.on("accountsChanged", function () {
 7 |     location.reload();
 8 |   });
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/Web3Template/TemplateData/webgl-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/underscoredLabs/web3-webgl-template/51fe115e25943d7bfa61ffc06509614f9f861779/Web3Template/TemplateData/webgl-logo.png


--------------------------------------------------------------------------------
/Web3Template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
 7 |     <link rel="shortcut icon" href="TemplateData/favicon.ico">
 8 |     <link rel="stylesheet" href="TemplateData/style.css">
 9 |   </head>
10 |   <body>
11 |     <div id="unity-container" class="unity-desktop">
12 |       <canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}}></canvas>
13 |       <div id="unity-loading-bar">
14 |         <div id="unity-logo"></div>
15 |         <div id="unity-progress-bar-empty">
16 |           <div id="unity-progress-bar-full"></div>
17 |         </div>
18 |       </div>
19 |       <div id="unity-mobile-warning">
20 |         WebGL builds are not supported on mobile devices.
21 |       </div>
22 |       <div id="unity-footer">
23 |         <div id="unity-webgl-logo"></div>
24 |         <div id="unity-fullscreen-button"></div>
25 |         <div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>
26 |       </div>
27 |     </div>
28 |     <script>
29 |       var buildUrl = "Build";
30 |       var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
31 |       var config = {
32 |         dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
33 |         frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
34 |         codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
35 | #if MEMORY_FILENAME
36 |         memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
37 | #endif
38 | #if SYMBOLS_FILENAME
39 |         symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
40 | #endif
41 |         streamingAssetsUrl: "StreamingAssets",
42 |         companyName: "{{{ COMPANY_NAME }}}",
43 |         productName: "{{{ PRODUCT_NAME }}}",
44 |         productVersion: "{{{ PRODUCT_VERSION }}}",
45 |       };
46 | 
47 |       var container = document.querySelector("#unity-container");
48 |       var canvas = document.querySelector("#unity-canvas");
49 |       var loadingBar = document.querySelector("#unity-loading-bar");
50 |       var progressBarFull = document.querySelector("#unity-progress-bar-full");
51 |       var fullscreenButton = document.querySelector("#unity-fullscreen-button");
52 |       var mobileWarning = document.querySelector("#unity-mobile-warning");
53 | 
54 |       // By default Unity keeps WebGL canvas render target size matched with
55 |       // the DOM size of the canvas element (scaled by window.devicePixelRatio)
56 |       // Set this to false if you want to decouple this synchronization from
57 |       // happening inside the engine, and you would instead like to size up
58 |       // the canvas DOM size and WebGL render target sizes yourself.
59 |       // config.matchWebGLToCanvasSize = false;
60 | 
61 |       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
62 |         container.className = "unity-mobile";
63 |         // Avoid draining fillrate performance on mobile devices,
64 |         // and default/override low DPI mode on mobile browsers.
65 |         config.devicePixelRatio = 1;
66 |         mobileWarning.style.display = "block";
67 |         setTimeout(() => {
68 |           mobileWarning.style.display = "none";
69 |         }, 5000);
70 |       } else {
71 |         canvas.style.width = "{{{ WIDTH }}}px";
72 |         canvas.style.height = "{{{ HEIGHT }}}px";
73 |       }
74 | #if BACKGROUND_FILENAME
75 |       canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
76 | #endif
77 |       loadingBar.style.display = "block";
78 | 
79 |       var script = document.createElement("script");
80 |       script.src = loaderUrl;
81 |       script.onload = () => {
82 |         createUnityInstance(canvas, config, (progress) => {
83 |           progressBarFull.style.width = 100 * progress + "%";
84 |         }).then((unityInstance) => {
85 |           loadingBar.style.display = "none";
86 |           fullscreenButton.onclick = () => {
87 |             unityInstance.SetFullscreen(1);
88 |           };
89 |         }).catch((message) => {
90 |           alert(message);
91 |         });
92 |       };
93 |       document.body.appendChild(script);
94 |     </script>
95 |     <script src="TemplateData/web3.min.js"></script>
96 |     <script src="TemplateData/web3Connect.js"></script>
97 |   </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------