Lots of trail images => performance problems

[blackbox]

Hi,

Players in my game leave trail. When update is called I'll make the trail image based on the current player position and add it to the trail group:

let trailImg = state.make.image(playerX, playerY, 'trail');
this.trailGroup.add(trailImg);

The game world might be big and after a while this group holds few thousand trail images. This leads to performance problems. The methods which take really long to execute are Phaser.Group.preUpdate, 
PIXI.WebGLSpriteBatch.render and PIXI.DisplayObjectContainer.updateTransform. 

How should I handle this?

[VitaZheltyakov]

Use

    if (this.inCamera) {
        // or Create trail
        this.renderable = true;
    }
    else {

        this.renderable = false;
    }

 

[blackbox]

Hi Vita, thanks for the response! 

I've tried to iterate over the trail group (using forEach) and update the renderable property based on the inCamera attribute (as you pointed). Unfortunately it didn't bring much improvement in terms of the performance :(. Am I missing something?

Also, I thought Phaser (or should I say Pixi?) by default renders only what's visible (within the camera view). Is there any valid reason not to do that? Is it correct to set the renderable flag manually?

Thanks again for help.

[VitaZheltyakov]

17 hours ago, blackbox said:

Hi Vita, thanks for the response! 

I've tried to iterate over the trail group (using forEach) and update the renderable property based on the inCamera attribute (as you pointed). Unfortunately it didn't bring much improvement in terms of the performance :(. Am I missing something?

Also, I thought Phaser (or should I say Pixi?) by default renders only what's visible (within the camera view). Is there any valid reason not to do that? Is it correct to set the renderable flag manually?

Thanks again for help.

http://phaser.io/docs/2.4.7/Phaser.Sprite.html#autoCull