[Garbage Collection] Broken? Adding sprites inreases GC activity for no "apparent" reasons?

[imshag]

I am having big issues with Phaser in regards to garbage collection (GC).

See for yourself.

 

 

DEMO

http://knostara.de/prototypes/gc/

 

JSFIDDLE

http://jsfiddle.net/dWws9/

 

 

ISSUE

Currently i am adding 30x30 (900) sprites in order to simulate a isometric tile map.

This causes an immense increase in the GC activity.

We are talking about a GC cycle roughly every 400 ms.

 

By decreasing the tile number and therefore the sprite number the GC activity drops proportionately.

 

 

QUESTIONS

1. Is this a known issue?

2. Is this how it is supposed to work? If yes, can someone explain why?

3. Is my approach flawed?

4. Is this a problem with pixi.js? (I didn't experience such trouble with the pixi.js demos)

5. Are there any solutions to this problem? Other approaches?

 

 

 

Thanks for your time!

 

CODE

GAME = new Phaser.Game(1280, 720, Phaser.CANVAS, 'gameWindow', {    preload: preload,    create: create});function preload() {    GAME.load.image('grass_tile', 'assets/gt_7.png');}var randomInt;var posY;var x;var y;var TILE_SIZE_WIDTH = 64;var TILE_SIZE_HEIGHT = 32;var TILE_OFFSET_MODULO = -TILE_SIZE_WIDTH / 2;var TILE_MAP_WIDTH_TILES_COUNT = 30;var TILE_MAP_HEIGHT_TILES_COUNT = 30;var TILE_MAP_OFFSET_Y = 200;var group;function create() {    group = GAME.add.group();    for (y = 0; y < TILE_MAP_HEIGHT_TILES_COUNT; y++) {        for (x = 0; x < TILE_MAP_WIDTH_TILES_COUNT; x++) {            // Create some random noise, so the ground doesn't look leveled            randomInt = ((Math.random() * 4) + 0) | 0;            if (randomInt % 2) {                randomInt = -randomInt;            }            posY = TILE_MAP_OFFSET_Y + (y * TILE_SIZE_HEIGHT / 2) + randomInt | 0;            if (y % 2 === 0) {                group.create((x * TILE_SIZE_WIDTH), posY, 'grass_tile');            } else {                group.create(TILE_OFFSET_MODULO + (x * TILE_SIZE_WIDTH), posY, 'grass_tile');            }        }    }}

[rich]

Hi,

 

I'm afraid this is a Pixi.js level issue, although I completely agree it would be great to resolve - so I'll have a dig into doing that for them. Just to prove my point here is a timeline of 900 sprites running in pure Pixi canvas mode, no Phaser anywhere:

 

 

And here is the code:

window.onload = function () {    // create an new instance of a pixi stage    var stage = new PIXI.Stage(0x66FF99);    // create a renderer instance    var renderer = new PIXI.CanvasRenderer(1280, 720);    // add the renderer view element to the DOM    document.body.appendChild(renderer.view);    requestAnimFrame(animate);    // create a texture from an image path    var texture = PIXI.Texture.fromImage("wip/gt_7.png");    for (var i = 0; i < 900; i++)    {        var bunny = new PIXI.Sprite(texture);        bunny.position.x = Math.random() * 1280;        bunny.position.y = Math.random() * 720;        stage.addChild(bunny);    }    function animate() {        requestAnimFrame(animate);        renderer.render(stage);    }}

However it's worth adding:

 

1) This doesn't happen in WebGL. The timeline does do a saw tooth but it's much less severe, for me it took nearly 2 minutes and the memory drop was less than a meg, which is nominal imho.

 

2) 900 sprites will never render on mobile in canvas fast enough to add a game on-top of this. Desktop should be ok if the hardware is good enough, but if you're targeting desktop you should target WebGL by default too really. This doesn't excuse what happens, but it's still worth noting.

 

[Videlais]

While it is a bit in the future for Phaser according to the roadmap, I did notice this same problem using node-webkit with Phaser recently. With a large number of sprites (like a huge tilemap, for example), the garbage collection became so severe the game was unplayable.

[rich]

Tilemaps don't use Sprites, just one single Sprite and a canvas texture. But that in itself could be leaking memory maybe at either level.