jbg Posted June 24, 2017 Share Posted June 24, 2017 In the trivial case of creating and then destroying an instance of Phaser.Game there appears to be a memory leak. Below is a complete working example: click the button to create an instance, click again to destroy it. Repeatedly clicking the button causes memory usage to grow without bound. Is there something I'm missing about the phaser lifecycle that I should be doing instead? <!doctype html> <html> <head> <meta charset="UTF-8"/> <title>test</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script> </head> <body> <button id="button">Click</button> <div id="canvas"></div> <script> window.onload = function() { var d, n, game; d = document.getElementById('button'); n = document.getElementById('canvas'); function preload() { } function create() { } function update() { } function handler() { if(game) { game.destroy(); game = null; } else { game = new Phaser.Game(800, 600, Phaser.AUTO, n, { preload: preload, create: create, update: update }); } } d.onclick = handler; }; </script> </body> </html> Link to comment Share on other sites More sharing options...
jbg Posted June 26, 2017 Author Share Posted June 26, 2017 Responding to my own question: the problem appears to be in Phaser.CanvasPool. Creating a new instance creates a new canvas and adds it to the pool, destroy does not remove it from the pool, and creating a new instance does not cause a canvas in the pool to be re-used. Is this expected behaviour, and if so what is the correct way of removing unused canvases from the pool? Manually clearing the list works as a crude hack, but I assume there's some more elegant way of handling this. ncil 1 Link to comment Share on other sites More sharing options...
jbg Posted June 26, 2017 Author Share Posted June 26, 2017 Replying to myself again: the source of the problem is Phaser.Utils.Debug.boot(), which creates a new canvas every time it is called, which by default is every time a new Phaser.Game instance is created and booted. Only affects instances where the renderer is WebGL (or more precisely whenever renderType !== Phaser.CANVAS), and if enableDebug is true, which is the default. For completeness, here's an edited version of the above demonstration code that does not exhibit the memory leak (by virtue of disabling debugging): <!doctype html> <html> <head> <meta charset="UTF-8"/> <title>test</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.1/phaser.js"></script> </head> <body> <button id="button">Click</button> <div id="canvas"></div> <script> window.onload = function() { var d, n, game; d = document.getElementById('button'); n = document.getElementById('canvas'); function preload() { } function create() { } function update() { } function handler() { if(game) { game.destroy(); game = null; } else { game = new Phaser.Game({ width: 800, height: 600, renderer: Phaser.AUTO, parent: n, enableDebug: false, state: { preload: preload, create: create, update: update }, }); } } d.onclick = handler; }; </script> </body> </html> ncil 1 Link to comment Share on other sites More sharing options...
Recommended Posts