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 component:
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
I tried to use: PIXI.TextureCache['cupCake.png'].destroy(true);
but the error persists.
Here is my component:
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>
);
}
}
So how I could completely reset/delete state and assets?
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.