How to clear PIXI.Application?

[Nagaraju]

I have implemented PIXI application with more containers  like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null

 I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done.

try{

if (this.appRenderer != null || this.appRenderer.stage != null) {

 

if(this.ticker.started){

this.ticker.stop();

this.ticker.remove(this.tickSlideRight);

this.ticker.destroy(true);

}

this.mainContainer.children.map((item) =>{ //it contains another container in which video and image functionalities implemented

item.destroy(true);

})

this.mainContainer.destroy(true);

this.imageSlideElementHolder.removeChild(this.appRenderer.view);

this.appRenderer.stage.destroy(true);

this.appRenderer = null;

 

}

 

}catch(ex){

console.log("Component Unmount, Pixi release ",ex.message) //TO-DO

}

 

 

[ivan.popelyshev]

Hi! I'm glad that you use custom appplication! 

It should work.

Can you use devtools, to see where exactly is that function called? it should be one more ticker.

[ivan.popelyshev]

Actually, judging by "this.appRenderer.stage"... whats appRenderer in your case?

[Nagaraju]

I initialized like below

 

init = (glBaseElement) => {

//Create pixi application instance

this.baseElement = glBaseElement;

this.ticker = PIXI.Ticker.shared;

this.ticker.autoStart = false;

 

this.appRenderer = new PIXI.Application({

width: this.appRendererWidth,

height: this.appRendererHeight

});

 

this.imageSlideElementHolder = this.refs[glBaseElement];

this.imageSlideElementHolder.appendChild(this.appRenderer.view);

this.mainContainer = new PIXI.Container();

this.appRenderer.stage.addChild(this.mainContainer);

this.getAllSlides();

};

[Nagaraju]

 

 

19 hours ago, ivan.popelyshev said:

Hi! I'm glad that you use custom appplication! 

It should work.

Can you use devtools, to see where exactly is that function called? it should be one more ticker.

I am using only one ticker

[ivan.popelyshev]

what about the one inside application that is turned on by default? 

You have to read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop  and either get rid of application in favor of simple renderer, or notice that app has its own destroy: https://github.com/pixijs/pixi.js/blob/dev/packages/app/src/Application.js#L132

Application was created as a helper class for hello-worlds and examples. Yes, we support it in production if people want, but I require from everyone to actually look inside and understand that it's just a mashup, you should get rid of it as soon as you encounter first problem.