如何彻底移除 Pixi 渲染器、舞台和资产？

Question

我正在尝试使用 React 安装/卸载 Pixi 阶段（我还不想使用 react-pixi）

重新挂载组件时出现错误：

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
componentDidMountmodules.js
_assign.notifyAllmodules.js
ON_DOM_READY_QUEUEING.closemodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
Mixin.performmodules.js
_assign.performmodules.js
flushBatchedUpdatesmodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
ReactDefaultBatchingStrategy.batchedUpdatesmodules.js
batchedUpdatesmodules.js
ReactEventListener.dispatchEvent

我尝试使用：PIXI.TextureCache['cupCake.png'].destroy(true);，但错误仍然存​​在。

这是我的组件：

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderer = PIXI.autoDetectRenderer(256, 256, {transparent: true});
    this.refs.gameCanvas.appendChild(this.renderer.view);

    // create the root of the scene graph
    this.stage = new PIXI.Container();
    this.stage.width = 1366;
    this.stage.height = 768;

    PIXI.loader
      .add("cupCake.png")
      .load(()=> {

        //Create the `cat` sprite from the texture
        var cat = new PIXI.Sprite(
          PIXI.loader.resources["cupCake.png"].texture
        );

        //Add the cat to the stage
        this.stage.addChild(cat);

        //Render the stage
        this.renderer.render(this.stage);
      });
  }

  componentWillUnmount() {
    this.refs.gameCanvas.removeChild(this.renderer.view);
    PIXI.TextureCache['cupCake.png'].destroy(true);
  }

  render() {
    return (
      <div className="game-canvas-container" ref="gameCanvas"></div>
    );
  }
}

那么我如何才能完全重置/删除状态和资产？

Answer 1

Answer 使用的是最新的 v4 版本的 PIXI

去除纹理的最好方法是调用

this.stage.destroy(true);
this.stage = null;

这将破坏舞台，它的所有孩子，以及它的任何孩子正在使用的任何纹理。

做完之后

this.refs.gameCanvas.removeChild(this.renderer.view);

添加行

this.renderer.destroy( true );
this.renderer = null;