Huge FPS drops after running for some time

[ugattie1611]

Hi everyone!

I'm currently trying to let Phaser create 3 different strips by using Bitmap Data. Afterwards, I add these to an array, which looks like this:

bmd1 = game.add.bitmapData(400, 3200);
    bmd2 = game.add.bitmapData(400, 4000);
    bmd3 = game.add.bitmapData(400, 4800);
    bmds = [bmd1,bmd2,bmd3];

To draw some symbols on the strips, I use a separate function that loops though all the BMD's. I'm doing that by using this code:

bmds[i].draw(lightning, 0, array[0]);
        bmds[i].draw(moon, 0, array[1]);

The array represents the Y coordinate. After I've drawn all the symbols, I add them to the world by using addToWorld.

The animation part:
To animate all the strips, I use the moveV function. When it hits the end, it will stop spinning and after all the strips are done spinning, it clears all the Bitmaps using the .clear() function. Then it will start over from the beginning by redrawing all the symbols, but then on a different Y coordinate.

From the beginning, the animations are fine. But after some time, there's a major performance drop that is especially noticeable on my ultrabook (I7 8550U, 8GB, IGPU). On my PC (FX8350, 8GB, GTX760) it can get proper frames for a much longer time.

Something in this code is not right, while debugging, I noticed that the requestAnimationFrame duration takes much longer than from the beginning. Check the following screens for some more information:
Begin: http://prntscr.com/kgctq0
End: http://prntscr.com/kgct79
Especially checkout the total cost, its a big difference.

Something is too heavy or not properly programmed, but I can't find out whats the problem. I tried using some different methods, clearing code or replacing functions but the same problem keeps popping up. If I don't clear and redraw the strips, there's no loss in performance.

Hopefully someone has the answer to this problem. It's greatly appreciated!

Thanks in advance!

Edit: Here's a demo
http://gokkastdomein.nl/sprite.php

[samme]

I don't know exactly, but you'd want to avoid the moveV call.

Save the results of addToWorld() and you'll have 3 images. You can animate those instead by changing their positions.

[ugattie1611]

Why avoid the moveV call though? Just curious, because it doesn't seem to affect the performance. 

I also noticed that after using the image method, it doesn't come back up anymore. Any way to make it go the same way as how it goes using moveV.

Here's a demo of what I mean, where the second one will not get back up again.
http://gokkastdomein.nl/sprite.php

EDIT: Changing the bitmap to sprites seems to have delayed the problem, but its still lagging after a while. Some buffer is not clearing up properly I think and I cannot find out how to clear it.

[ugattie1611]

After some trail and error, I tried something completely different. Right now I'm creating an array with 3 new Bitmapdata's. After the animation is done, it kills the old Bitmapdata's, clears the array and starts over again by making new Bitmapdata's.

Good thing: the lag is gone!
Bad thing: Huge memory leak. I can't seem to figure out how to get rid of the old Bitmapdata's. Destroy() won't actually destroy them and I haven't found out yet how to fix it.
Interesting note: Even with 2.5GB of memory usage, the FPS won't drop by that much. Only some small lag spikes sometimes, but later on the application will just crash because of a memory limit.

New question: How do I completely remove a BitmapData from the game and / or memory?

[ugattie1611]

For the people who encounter this problem, stop using bitmaps. I'm using separate smaller sprites and animating them together by using groups. Works a lot better and uses less code :-).