问题描述
目前正在尝试使用 angular 12 运行 Pixi.js 6(但 11 似乎确实面临同样的问题)。
如果我尝试通过 pixi 用画布初始化一个组件并添加一个精灵,我确实遇到了 Pixi 如何初始化它的基类的问题。
错误类型错误:无法读取未定义的属性“开始” 在 BatchSystem.setobjectRenderer (BatchSystem.ts:56)
import { AfterViewInit,Component,ElementRef,ngzone } from "@angular/core";
import { Application } from "@pixi/app";
import { Sprite } from "@pixi/sprite";
@Component({
selector: "hello",template: `
<h1>game</h1>
`,styles: [
`
h1 {
font-family: Lato;
}
`
]
})
export class HelloComponent implements AfterViewInit {
constructor(public elRef: ElementRef,private zone: ngzone) {
// The application will create a canvas element for you that you
// can then insert into the DOM.
}
public ngAfterViewInit(): void {
this.zone.runOutsideAngular(
(): void => {
const app: Application = new Application({
//view: this.myCanvas.nativeElement,});
this.elRef.nativeElement.appendChild(app.view);
console.log("Plugins",app.renderer.plugins);
const sprite: Sprite = Sprite.from(
"https://avatars.githubusercontent.com/in/2740?s=64&v=4"
);
app.stage.addChild(sprite);
app.render();
}
);
}
}
根据 docs,默认行为应该是预填充的插件很少。但是,如果确实检查了未设置的那些(请参阅下面示例中的控制台),则会产生上述错误。
问题的重现:https://stackblitz.com/edit/angular-zvqwsh?file=src/app/hello.component.ts
如果我在一个简单的设置中使用相同的 pixi 版本,它确实工作得很好。所以我的猜测是 Angulars 捆绑导致了这个问题,但我不知道是怎么回事。因为代码清楚地存在于 ESM 包中。
解决方法
当我尝试调试它时,插件注册在 node_modules/pixijs/dist/esm/pixi.js
中,因为 angular 项目没有导入它,插件没有正确注册。
我已经添加了这个:
import * as PIXI from 'pixi.js';
在文件顶部并添加到下面一行以避免摇树以从最终包中删除 pixi.js
console.log(PIXI.VERSION);
工作版本:https://stackblitz.com/edit/angular-2cwx4k?file=src/app/hello.component.ts