Importing a Unity WebGL-project into an Angular2 component
angular, javascript, typescript, unity-game-engine, unity-webgl
Solution
To add Unity WebGL to your project:
1) Export WebGL project to a /unity folder in your Angular project root (same level as src). Copy the following files from your Build folder to /src/assets/unity:
- unity.json
- unity.data.unityweb
- unity.wasm.code.unityweb
- unity.wasm.framework.unityweb
2) Add UnityProgress.js and UnityLoader.js to your angular.json scripts:
"scripts": [
"unity/TemplateData/UnityProgress.js",
"unity/Build/UnityLoader.js"
],
3) (optional) Add style.css to your angular.json styles
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"src/assets/theme.scss",
"src/styles.scss",
"unity/TemplateData/style.css"
],
4) Add the base Unity HTML to your component.html:
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" (click)="unityInstance.SetFullscreen(1)"></div>
<div class="title">UnityProject</div>
</div>
</div>
5) Lastly, instantiate your `unityContainer` in your component.ts:
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare var UnityLoader: any;
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit, AfterViewInit {
unityInstance: any;
constructor() { }
ngOnInit() { }
ngAfterViewInit() {
this.unityInstance = UnityLoader.instantiate("unityContainer", "assets/unity/unity.json");
}
}
Problem
I'm looking to integrate a Unity WebGL-project into an Angular2 app. What's the proper way to move all this script into an Angular2 component? First, the Unity WebGL exports an index.html like this: ``` <!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 | Espoo web manager (Prefab preview)</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="Build/UnityLoader.js"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "Build/builds.json", {onProgress: UnityProgress}); </script> </head> <body> <div class="webgl-content"> <div id="gameContainer" style="width: 960px; height: 600px"></div> <div class="footer"> <div class="webgl-logo"></div> <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div> <div class="title">Espoo web manager (Prefab preview)</div> </div> </div> </body> </html> ``` I started to split this and first I moved the stylesheet into the template .css file: ``` @import './webgl-app/TemplateData/style.css'; ``` Then I moved the javascript into the component .ts-file: ``` import { Component, AfterViewInit } from '@angular/core'; import './webgl-app/TemplateData/UnityProgress.js'; import './webgl-app/Build/UnityLoader.js'; declare var UnityLoader: any; declare var UnityProgress: any; @Component({ selector: 'app-unity-prefab-preview', templateUrl: './unity-prefab-preview.component.html', styleUrls: ['./unity-prefab-preview.component.css'] }) export class UnityPrefabPreviewComponent implements AfterViewInit { constructor() {} gameInstance: any; ngAfterViewInit() { this.gameInstance = UnityLoader.instantiate("gameContainer", "./webgl-app/Build/builds.json", { onProgress: UnityProgress }); } } ``` And then for the .html template I left this: ``` <div class="webgl-content"> <div id="gameContainer" style="width: 960px; height: 600px"></div> </div> ``` However, whatever approach I try (like using 'require' on the JS-files instead), the line in the ngAfterViewInit always gives an error: "Reference error: UnityLoader is not defined". How should this be done properly so it would work?