Pixi.js: Pixi shows nothing after route

[ivan-dmvv]

When I first go to the page, everything works. But on repeated visits to the same page, the Pixi shows nothing.

I tried all the methods on the forums and nothing helps.
Clearing the cache is not suitable, because the pictures must be loaded once.

for (let texture of Object.keys (PIXI.utils.TextureCache)) {
PIXI.utils.TextureCache [texture] .destroy (true);
}

It also does not work app.destroy(true); app = null;.
How to use the Pixi on routing? I have several pages and at all there are several Pixi apps.

P.S. Sorry for my bad english.

[ivanpopelyshev]

What is your version of pixi? I think we fixed that before.

I have several pages and at all there are several Pixi apps.

Destroy pixi app.

If you show multiple webgl canvases at the same time, some of them can be dropped and you have to call restore of context, please google "WEBGL CONTEXT RESTORE" , access it through renderer.gl.restore or something like that.

If problem persists, look inside this class: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

Copy it and make your own. Determine which thing is not destroyed properly (ticker, renderer, stage or what). You have to do it anyway if your app is not a helloworld.

[ivan-dmvv]

Hi, my version PIXI is 4.8.1.
Thank you, I understand what the problem is.

For example, you have created one or more applications.
const app = new PIXI.Application(width, height, {transparent: true});

Further, with routs, you must clean the applications, then there will be no memory leak and everything will work.

router.route('/:page', (page) => {
    app.destroy(true);
    app = null;
});

But there was another problem, after loading the images, the texture method update does not work.

let loader = PIXI.loader;

let callback = () => {
    let size = [];
    let texture = loader.resouces.template.texture;

    // this method is not work!!!
    texture.on('update', function(){
        size[0] = texture.orig.width;
        size[1] = texture.orig.height;
    });
};

loader.add('template', sourceImage);
loader.load(callback);

What could be the problem? Help please :(

[ivanpopelyshev]

I think that texture already have width/height in that callback , and I dont know where exactly is update called if you load it through loader.

Here loader creates the texture, AFTER resource is loaded : https://github.com/pixijs/pixi.js/blob/dev/src/loaders/textureParser.js#L11

Here texture subscribes to BaseTexture update event: https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Texture.js#L131

However BaseTexture is already loaded and doesn't have to be updated at this point.

Yep, that's not an Observable and there's no guarantee that you get update event if texture is done already :(

[ivanpopelyshev]

Do you re-create loader every time or is it global?

[ivan-dmvv]

I create a local loader variable in every function where PIXI is used.
In the same place, I check if there are already loaded textures or not.

But earlier, when I had my own image loader, the method worked:

const load = () => {
    let templateImage = new Image();

    templateImage.src = appImageSource;

     templateImage.onload = () => {
        dimensions[0] = templateImage.width;
        dimensions[1] = templateImage.height;

        let texture = new PIXI.Texture.fromImage(appImageSource);
        texture.on('update', function() {
            // here code is working
       });
    };
};

And when I use the PIXI loader, then apparently the method is not needed, as I understand it!?
In the file baseTexture.js https://github.com/pixijs/pixi.js/blob/90268cd4472618c28c383ed5901caa3105c9a7df/src/core/textures/BaseTexture.js#L680
I found the download of pictures in the same way.

[ivan-dmvv]

Thank you for answers. I solved the problem, I hope it will help not only me :)
If you load textures in this way, then everything works.

let sizes = [];
let sprite = null;
let texture = new PIXI.Texture.fromImage(sourceImage);

texture.on('update', function() {
    sprite = PIXI.Sprite.from(texture);

    sizes[0] = texture.orig.width;
    sizes[1] = texture.orig.height;

    // ...and other code
});

Plus you need to clean the texture cache.
PIXI.utils.clearTextureCache();

In this case, when routing, the textures are always displayed and the images are only loaded once to the site.

[ivanpopelyshev]

Yep, you nailed it. fromImage creates texture before the network request, syncronously.

Yes, update can depend on cache. I think clearTextureCache() could also work for async loader.

Of course if we introduce observables to pixi resources people wont have that issue anymore. I hope https://github.com/tc39/proposal-observable will succeed.

From other point of view, you are now expert on pixi cache and loader, and you looked inside the code. Small inconsistencies force people to look inside lib at early stage of project, and you wont be surprised when you'll have BIG ISSUE.

[ivan-dmvv]

Thank you bro again.

I using PIXI to create animations on sites, not for games.
But even so, you should monitor the state so that at certain times it can clean the memory or free the cache so that the site works well.

But it would not be bad if in the future it was possible to track textures and their processes :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.