[SOLVED]Huge lag, memory leakage...

[Jambutters]

Probably not a problem with Pixi(most likely I'm just using pixi wrong and somewhere leaked) but somewhere there is a memory leak and I am not sure why. Ram usage keeps increasing and movement is very laggy even when I set to 5 from 30fps. If anyone can figure out why, thanks :D. (I am very beginner js, if you have good resources on debugging please link) or is it just my computer... ? (Also noted... the image rendered is the entire sprite sheet because I need to mess with player.frame more to add animation). Using nodejs to host webserver

(function(){
    let renderer = new PIXI.WebGLRenderer(640,480);

    document.body.appendChild(renderer.view);

    let rootStage = new PIXI.Container();
   
    let Unit = function(img, hp, type, spdX, spdY){
        let entity = new PIXI.Sprite(PIXI.loader.resources[img].texture);
        entity.img = img;
        entity.hp = hp;
        entity.type = type;
        entity.spdX = spdX;
        entity.spdY = spdY;
        entity.pressingDown = false;
        entity.pressingUp = false;
        entity.pressingLeft = false;
        entity.pressingRight = false;
        return entity;

    };
    
    let player;

    let createPlayer = function(){
        let tmpplayer = Unit("./img/player.png", 150, "player", 0.1, 0.1); //msp should be 16 but for some reason it moves me out of the map.. why is it so high/fast?? 
        player = tmpplayer;
        rootStage.addChild(tmpplayer);
    };


    let setup = () => {
        createPlayer();
        updateLoop();
    };
    
    document.onkeydown = function(event){
        if(event.keyCode === 87){ //w
            player.pressingUp = true;
        }else if(event.keyCode === 65){ //a
            player.pressingLeft = true;
        }else if(event.keyCode === 83){ //s
            player.pressingDown = true;
        }else if(event.keyCode === 68){ //d
            player.pressingRight = true;
        }
    };

    document.onkeyup = function(event){
        if(event.keyCode === 87){ //w
            player.pressingUp = false;
        }else if(event.keyCode === 65){ //a
            player.pressingLeft = false;
        }else if(event.keyCode === 83){ //s
            player.pressingDown = false;
        }else if(event.keyCode === 68){ //d
            player.pressingRight = false;
        }
    };

    let updatePlayerPos = function(){
        if(player.pressingUp === true){
            player.y -= player.spdY;
        }if(player.pressingLeft === true){
            player.x -= player.spdX;
        }if(player.pressingDown === true){
            player.y += player.spdY;
        }if(player.pressingRight === true){
            player.x += player.spdX;
        }
    };

    let updateLoop = function(){
        updatePlayerPos();
        renderer.render(rootStage);
        
        setInterval(updateLoop, 1000/25);
    };
    
    PIXI.loader.add("./img/player.png").load(setup);


}());

 

[Jambutters]

Alright, found the problem, its with setInterval, but I want to be able to use it opposed to requestframeanimation because I want to control the fps... unsure how to tackle the problem

[bubamara]

try this

var desiredFPS = 25;

var now;
var then = Date.now();
var elapsed;
var interval = 1000 / desiredFPS;

updateLoop();

function updateLoop()
{
	requestAnimationFrame(updateLoop);

	now = Date.now();
	elapsed = now - then;

	if (elapsed > interval)
	{
		then = now - (elapsed % interval);
		
		updatePlayerPos();
		renderer.render(rootStage);
	}
}

 

[labrat.mobi]

Since requestAnimationFrame passes current time (DOMHighResTimeStamp) as argument to callback, you can use performance.now() instead of Date.now().

 

var desiredFPS = 25;

var then = performance.now();
var elapsed;
var interval = 1000 / desiredFPS;

updateLoop(then);

function updateLoop(now)
{
    requestAnimationFrame(updateLoop);
    
    elapsed = now - then;

    if (elapsed > interval)
    {
        then = now - (elapsed % interval);
        
        updatePlayerPos();
        renderer.render(rootStage);
    }
}