Tracking down webGL crash reason - possible video memory leak

[html5gamedev]

I am creating new AnimatedSprites on pointerdown event (and deleting them on next pointerdown event)  over the course if application lifetime. At some point around 20 clicks, the app crashes with an error:  Rats! webGl crashed. At that point no error is displayed in console. Crash happens on a mobile device, and would probably also happen on desktop, if someone perform plenty of clicks.

 

Code that is repeatedly used is below. I also include live example at http://forwardingsolutions.club/. Can someone please point out what am I doing wrong?

 

From other answers I deduced that you need to reset the loader and call destroy() on animated sprite. I call both of this methods, but there is still an issue.

 

Quote

    function setupNextSpritesAnimation(){
        setupNextAnimation();
        console.log("next color: "+nextColor);
        switch (nextColor) {
            case "red":
                var newLoader = new PIXI.loaders.Loader()
                .add('nextSprite', '/assets/sprite/red.png.png')
                .load(function (loader, resources){
                    var interval = setInterval(function(){
                        if (!isAnimating){
                            clearInterval(interval);
                            createNewAnimatedSprite(resources,newLoader);
                        }
                    },50);

                });

                break;
            case "aqua":
                var newLoader = new PIXI.loaders.Loader()
                .add('nextSprite', '/assets/sprite/aqua.png.png')
                .load(function (loader, resources){
                    var interval = setInterval(function(){
                        if (!isAnimating){
                            clearInterval(interval);
                            createNewAnimatedSprite(resources,newLoader);
                        }
                    },50);
                });
                break;            
            case "green":
                var newLoader = new PIXI.loaders.Loader()
                .add('nextSprite', '/assets/sprite/blue.png.png')
                .load(function (loader, resources){
                    var interval = setInterval(function(){
                        if (!isAnimating){
                            clearInterval(interval);
                            createNewAnimatedSprite(resources,newLoader);
                        }
                    },50);
                });
                break;            
            case "purple":
                var newLoader = new PIXI.loaders.Loader()
                .add('nextSprite', '/assets/sprite/purple.png.png')
                .load(function (loader, resources){
                    var interval = setInterval(function(){
                        if (!isAnimating){
                            clearInterval(interval);
                            createNewAnimatedSprite(resources,newLoader);
                        }
                    },50);
                });
                break;   
                         }
    }

 

    function createNewAnimatedSprite(resources,newLoader){
        var tmpSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture));
        app.stage.addChild(tmpSprite);
        spritesArray.push(tmpSprite);
        setupNextSprites(tmpSprite);

        app.renderer.plugins.prepare.upload(tmpSprite, function(){
            console.log("updoaded now");
            canRunNext = true;
            newLoader.reset();
            //console.log("kill");
            delete tmpSprite;

        });
    }

 

    function setupNextSprites(nextSprite){
        nextSprite.x = app.renderer.width / 2;
        nextSprite.y = app.renderer.height / 2;
        nextSprite.anchor.set(0.5);
        nextSprite.loop = false;
        nextSprite.animationSpeed = 0.5; 
        nextSprite.visible = false;
        nextSprite.onComplete = function (){
            console.log("animation finished");
            isAnimating = false;
        };
    }


    function setupNextAnimation(){
        var randomNumber = getRandomInt(0,3);
        switch (randomNumber) {
            case 0:
                nextColor = "red";
                break;
            case 1:
                nextColor = "aqua";
                break;            
            case 2:
                nextColor = "green";
                break;            
            case 3:
                nextColor = "purple";
                break;   
                            }  
    }

 

 

    app.stage.on("pointerdown", function () {
        if (firstRun && !isAnimating) {
            firstRun = false;
            isAnimating = true;
            currentSprite.gotoAndPlay(0);
            currentSprite.gotoAndPlay(0);
        }else{ 
            if (canRunNext && !isAnimating){
                isAnimating=true;

                if (currentSprite.visible){
                    currentSprite.visible = false;
                    currentSprite.destroy(true);
                }
                spritesArray[spritesArray.length-1].visible = true;
                spritesArray[spritesArray.length-1].gotoAndPlay(0);

                app.stage.removeChild(spritesArray[spritesArray.length-2]);
                spritesArray[spritesArray.length-2].destroy(true);

                canRunNext = false;
                setupNextSpritesAnimation();

            }
        }
    });


function setupSpritesAnimation(){
//created currentSprite just once at the start of app
spritesArray.push(currentSprite);
}

 

[ivan.popelyshev]

try that one:

destroy({ children:true, texture:true, baseTexture:true})

 

[html5gamedev]

Thanks for a swift reply! Unfortunately the issue remains. I updated the live example with the suggested code.