我正在寻求将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-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 });
}
}
然后是.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);
});
}
}
在types.d.ts中,我扩展了window元素。
interface Window {
unity: any;
}
所以当我打个电话时,我会这样称呼
Application.ExternalCall("unity.GetUnityNumber", rnd);
我现在唯一想念的是团结的呼唤……也许您对此有个想法?
我将unity-build作为私有npm软件包。构建时,所有内容都会复制到资产文件夹中。
我将Unity WebGL的输出简化为
unity-game.html
<body style="margin: 0px">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Browser.json", {onProgress: UnityProgress});
</script>
<div class="webgl-content">
<div id="gameContainer" style="width: 800px; height: 600px;"></div>
</div>
</body>
并将其加载到iframe中。这给你一个
unsafe value used in a resource URL context
错误。这可以通过使用特殊的iframe Angular组件来解决。
unity-game.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Component({
selector: 'app-unity-game',
templateUrl: './unity-game.component.html',
styleUrls: ['./unity-game.component.css']
})
export class UnityGameComponent implements OnInit {
@Input()
url: string;
urlSafe: SafeResourceUrl;
constructor(public sanitizer: DomSanitizer) { }
ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
}
unity-game.component.html
<iframe width="800" height="600" frameBorder="0" [src]="urlSafe"></iframe>
贷给Lrodriguez84: https://stackoverflow.com/a/50863439/719528
然后只需添加该特殊的iframe组件,即可将HTML文件传递到您希望Unity项目出现的任何位置!
<app-unity-game url="assets/unity-game.html"></app-unity-game>
我也对此感到困惑。
似乎未设置您的上下文
$.getScript('assets/UnityLoader.js').done(function ( bla , text) {
this.gameObject =
UnityLoader.instantiate('gameContainer','assets/test.json');
//gameObject not undefined at this stage..
// this does not point towards your container
});
解决方案:
$.getScript('assets/UnityLoader.js').done(function ( bla , text) {
this.gameObject =
UnityLoader.instantiate('gameContainer','assets/test.json');
//gameObject not undefined at this stage and this points to container
}.bind(this));
更多信息:https://docs.unity3d.com/2018.3/Documentation/Manual/webgl-interactingwithbrowserscripting.html
将Unity WebGL添加到您的项目:
1)将WebGL项目导出到Angular项目根目录中的/ unity文件夹(与src级别相同)。将以下文件从Build文件夹复制到/ src / assets / unity:
2)在您的angular.json脚本中添加UnityProgress.js和UnityLoader.js:
"scripts": [
"unity/TemplateData/UnityProgress.js",
"unity/Build/UnityLoader.js"
],
3)(可选)将style.css添加到您的angular.json样式
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"src/assets/theme.scss",
"src/styles.scss",
"unity/TemplateData/style.css"
],
4)将基本的Unity HTML添加到您的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)最后,在component.ts:
中实例化unityContainer
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");
}
}