0

現在、Angular 12 で Pixi.js 6 を実行しようとしています (ただし、11 は同じ問題に直面しているようです)。

pixi でキャンバスを使用してコンポーネントを初期化し、スプライトを追加しようとすると、Pixi が基本クラスを初期化する方法に問題が発生します。

エラー TypeError: BatchSystem.setObjectRenderer で未定義のプロパティ 'start' を読み取ることができません (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();
      }
    );
  }
}

ドキュメントによると、デフォルトの動作は、いくつかのプラグインが事前設定されていることです。しかし、設定されていないものをチェックすると(以下の例のコンソールを参照)、上記のエラーが発生します。

問題の再現: https://stackblitz.com/edit/angular-zvqwsh?file=src/app/hello.component.ts

シンプルなセットアップで同じpixiバージョンを使用しても、問題なく動作します。したがって、Angulars のバンドルが問題の原因であると推測していますが、その方法がわかりません。コードは ESM バンドルに明確に存在するためです。

4

1 に答える 1