Good day to all. I would be grateful for the help.

I write the game on PIXI.js. The bottom line is that everything works as intended. But at some point the warning WebGL: INVALID_ENUM: activeTexture: texture unit out of range pops up in the console and the textures in the game start to blink a bit. This bacchanalia begins at an incomprehensible moment and at the same moment may disappear and so on in a circle.

There is a class for creating a monster and its method that moves a monster:

function Monster (monsterImages, startX) { this.hideEnemy = false; var frames = []; for (var i = 0; i < monsterImages.length; i++) { var texture = Texture.fromImage(monsterImages[i]); frames.push(texture); } this.movieclip = new PIXI.extras.AnimatedSprite(frames); this.movieclip.scale.x = -1; this.movieclip.anchor.set(0.5); this.movieclip.width = 170; this.movieclip.height = 140; this.movieclip.x = startX; this.movieclip.y = getRandomIntValue(Position.START_Y + this.movieclip.height / 2, Position.END_Y + this.movieclip.height / 2); this.movieclip.animationSpeed = 0.4; this.movieclip.play(); gameScene.addChild(this.movieclip); } Monster.prototype.updatePosition = function () { if (this.movieclip.x > Position.END_X - this.movieclip.width / 2) { this.movieclip.x -= Position.STEP_X; } else { // this.hideEnemy = true; this.movieclip.x = Position.START_X; this.movieclip.y = getRandomIntValue(Position.START_Y + this.movieclip.height / 2, Position.END_Y + this.movieclip.height / 2); } };

I create 4 monsters

 for (var i = 0; i < 4; i++) { enemy[i] = new Monster(monsterSprites[i], 1920 + 170 + gapBetweenBirds); gapBetweenBirds+=500; }

Then I move the method, and if he leaves the stage, I cut out from the array of this monster and insert a new one there.

 for (var i = 0; i < enemy.length; i++) { enemy[i].updatePosition(); if (enemy[i].hideEnemy) { enemy.splice(i, 1, new Monster(monsterSprites[getRandomIntValue(0,monsterSprites.length - 1)], 1920 + 170)); } }

The problem came when I started replacing the monster in the array. I think the problem lies somewhere there, but due to some experience I cannot catch it.

    1 answer 1

    I solved my problem. I needed to do a destroy () object that I deleted from the array, as it continued to be used in rendering.

    I added

     this.movieclip.destroy(); this.movieclip = null;

    in Monster.prototype.updatePosition

    So I did:

     Monster.prototype.updatePosition = function () { if (this.movieclip.x > Position.END_X - this.movieclip.width / 2) { this.movieclip.x -= Position.STEP_X; } else { this.hideEnemy = true; this.movieclip.destroy(); this.movieclip = null; } };