Menu
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?
227
just open your terminal and go into your directory (where the HTML file lies), and start the server using one of the commands below. This will open the port for you. Then direct your browser to http://localhost:8360/YOURFILENAME.html The default one would usually be index.
Unity has always made great use of WebGL, and is using the emscripten compiler toolchain to cross-compile the Unity runtime code.
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:
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");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
