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);
bmds[i].draw(moon, 0, array);
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:
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