Jump to content

Javascript / canvas game memory leak


blobspamzuulord
 Share

Recommended Posts

I've been working on a simple canvas game and have run into a problem :/

 



It uses the metronome example from this Web Audio tutorial http://www.html5rocks.com/en/tutorials/audio/scheduling/

 

 

Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline :

 

Before

mIvat5z.png

After 

QCFDH8j.png

 

But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red :

 

heap snapshot

0BwdLBR.png

 

 

- Does this mean the entity images are somehow not getting removed properly or are being duplicated still?

 

- Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case?

 

 

 

Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array)

 



    // in the monster's update function
    if (this.isDead === true) {
        if (barNumber % this.barTiming === 0)
            if (current16thNote % this.timing === 0) {  //  Waits until it's queue to disappear and play it's sound
                score += this.points;
                this.toRemove = true;  //  sets to remove to true, read this could solve some problems // 
                playSoundDelay(samplebb[this.sound], this.channel);
            }
    }


    // monster's render function, (thought this could be something to do with it if the image elements are the problem)
      render: function (ctx) {
    if (this.isDead === false) {
        ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey);
    } else if (this.isDead === true) {  //  if monster is dead, make it translucent
        ctx.save();
        ctx.globalAlpha = 0.4;
        ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey);  // resources.js is an asset loading library 
        ctx.restore();
    }
    }




    // One type of entity
    var Shark = function (position) {
    this.x = position.x;
    this.y = position.y;
    this.sizex = 64;
    .....  .....
    this.speed = Math.random() * (120 - 50) + 50;
    this.monsterImage = "images/Shark.png";  //  the url to be passed into the resource.get call
    };
    Shark.prototype = Object.create(MonsterMove2.prototype);






    function updateEntities(dt) {
    for (var x=0; x < monsters.length; x++) {
    var monster = monsters[x];
    monster.update();
    if (typeof monster.move === 'function') {
        if (!monster.isDead) {  //  If entity is alive, chase the player
            monster.move(dt);
        }
    }
    if (monster.toRemove){
        monsters.splice(x,1);  //  Removes the monster from the array
    }
    }


Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while! 

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...