|
我希望將Unity WebGL項目集成到Angular2應用程序中.將所有這些腳本移動到Angular2組件的正確方法是什么？
首先,Unity WebGL會像這樣導出index.html：
<!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>
我開始拆分它,首先我將樣式表移動到模板.css文件中：
@import './webgl-app/TemplateData/style.css';
然后我將javascript移動到組件.ts文件中：
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 });
}
}
然后對于.html模板我留下了這個：
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
</div>
但是,無論我嘗試什么方法(比如在JS文件上使用’require’),ngAfterViewInit中的行總是會出錯：“引用錯誤：未定義UnityLoader”.
應如何正確完成這樣才能起作用？ 解決方法: 所以我一直在搞亂這個……
我使用angular / cli @ latest 1.6.5進行運行
這是我的app.component.ts
import { Component, NgZone, OnInit } from '@angular/core';
import * as $from 'jquery';
declare const UnityLoader;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
public gameObject: any;
constructor(private ngZone: NgZone) {
window.unity = window.unity || {};
window.unity.GetUnityNumber = this.randomNumberFromUnity.bind(this);
}
public ngOnInit(): void {
this.init();
}
public helloUnity() {
console.log(this.gameObject); // <-- always undefined ?
this.gameObject.SendMessage('SetText', 'HELLO?');
}
private init() {
$.getScript('assets/UnityLoader.js').done(function ( bla , text) {
this.gameObject =
UnityLoader.instantiate('gameContainer','assets/test.json');
//gameObject not undefined at this stage..
});
}
private randomNumberFromUnity(input: string) {
this.ngZone.run(() => {
console.log('call from unity', input);
});
}
}
在typings.d.ts中,我擴展了窗口元素.
interface Window {
unity: any;
}
所以,當我從團結中打電話時,我稱之為
Application.ExternalCall("unity.GetUnityNumber", rnd);
我現在所缺少的就是團結一致…也許你對這個有一個想法？
我將unity-build作為私有的npm包.構建時將所有內容復制到assets文件夾中. 來源：https://www./content-1-273951.html
|
