I am trying to mount/unmout a Pixi stage with React (I don't want to use react-pixi yet)

I have an error when I re-mount the ponent:

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
ponentDidMountmodules.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

I tried to use: PIXI.TextureCache['cupCake.png'].destroy(true); but the error persists.

Here is my ponent:

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  ponentDidMount() {
    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);
      });
  }

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

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

So how I could pletely reset/delete state and assets?

I am trying to mount/unmout a Pixi stage with React (I don't want to use react-pixi yet)

I have an error when I re-mount the ponent:

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
ponentDidMountmodules.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

I tried to use: PIXI.TextureCache['cupCake.png'].destroy(true); but the error persists.

Here is my ponent:

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  ponentDidMount() {
    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);
      });
  }

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

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

So how I could pletely reset/delete state and assets?

• javascript
• reactjs
• pixi.js

1 Answer 1

Answer is using the latest v4 version of PIXI

The best way to remove the texture is to call

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

This will destroy the stage, and all it's children, and any textures that any of it's children are using.

And after doing

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

Add the lines

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