Question

此应用使用PixiJS。我只想尝试从tileset加载一个sprite。它在第一次运行代码时效果很好。当我进入第二页时，绘制舞台（黑色背景），但不显示精灵。这是一个SPA，因此不会重新加载页面，PixiJS会在加载器中保留我加载的纹理。

我可以看到代码在渲染此元素，纹理存在以及sprite javascript对象两次看起来都是相同的时候执行。这是我绘制精灵的代码：

ngOnInit() {
    let renderer = PIXI.autoDetectRenderer(64, 64);
    this.el.nativeElement.appendChild(renderer.view);
    let stage = new PIXI.Container();
    const sprites = 'assets/images/tiles/sprites.json';
    const resource = PIXI.loader.resources[sprites];
    if (!resource) {
        // First load through executes this code
        PIXI.loader.add(sprites);
        PIXI.loader.load().on('complete', then => {
            // This works!  Sprite is added to the stage and drawn.
            this.drawAvatar(sprites, stage, renderer);
        });
    } else {
        // Second time through, this code is executed.
        // This doesn't work.  Sprite is not rendered.
        this.drawAvatar(sprites, stage, renderer);
    }
}

private drawAvatar(sprites: string, stage: PIXI.Container, renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer) {
    const sprite = new PIXI.Sprite(PIXI.loader.resources[sprites].textures[this.logo]);
    stage.addChild(sprite);
    renderer.render(stage);
}

只有通过检查PIXI.loader.resources[sprites]才能第一次调用loader.add和loader.load。如果我再次尝试再次调用它，则会收到资源已存在的错误。

PixiJS添加精灵第一次工作，而不是第二次

0 个答案: