Auto-scrolling background via tileSprite is a bit laggy

[geekarlier]

Hi there,

 

I'm new to Phaser, and new to the forum, so hi everyone :-).

This forum has been super useful for me, but for this specific problem, i can't find a similar post to help me, so im asking for a little help from you guys.

 

I'm trying to make an auto-scrolling background with a tileSprite : 

- The game resolution is 1280x720

- The sprite is 1280x720 too

- The background is scrolling at  -700px per second on his x axis

 

The whole thing works quite well indeed : my background scrolls in an infinite loop ...

But it has some performance issues : while the framerate is always between 55 and 60 fps, the background randomly freezes for like 0.1 seconds ... and it's a bit annoying.

 

The problem is the same on my iMac on Firefox, Chrome and on my Nexus 5 with Chrome.

 

What i have tried : 

- I tried to scale down the whole game and its sprites, but the problem is the same.

- I tried to replace my tileSprite with some animated sprites to simulate the scroll effects, but it was worse ;-)

- I also tried to use a power of 2 tileSprite (1024x1024) , as i've read on previous posts that there were problems with non-power of 2 tile sprites before  

 

The way i initialise my tileSprite : 

	// Init	var background = game.add.tileSprite(		0,		0,		1280,		720,		'background'	);		// Scroll	background.autoScroll(	    -700,	    0	);

Also my game is scaled, maybe it is linked to my problem, here is how i scale it :

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.pageAlignHorizontally = true;    game.scale.pageAlignVeritcally = true;    game.scale.refresh();

Any idea ?

Thank you very much for your time !

 

PS : Sorry for my English.

[lewster32]

It sounds more like you have the garbage collector firing - you may want to try and make a small demo of just the scrolling and see if it still happens. Also, if you can, try to reduce the area that's scrolling - often it's not necessary to have an entire background scrolling, you could break it into slices. Moving an entire HD screen's worth of pixels isn't a trivial operation even for modern machines.

[geekarlier]

It sounds more like you have the garbage collector firing - you may want to try and make a small demo of just the scrolling and see if it still happens. Also, if you can, try to reduce the area that's scrolling - often it's not necessary to have an entire background scrolling, you could break it into slices. Moving an entire HD screen's worth of pixels isn't a trivial operation even for modern machines.

Thank you very much for your answer ... but :

- I tried to isolate it in a small demo : the problem is still here

- I downscaled the whole thing in 320x180px (natively), just to see ... but the problem was the same

- I also changed my background for a small slice  (64x320) repeated with the tileSprite system, without any real improvement.

- I used the Chrome memory profiler to find a memory leak, but nothing was really clear

 

Any idea ?

 

Thank you again for your time,

[hellspawn_bg]

Hello geekarlier,

 

Exactly the same issue here. I have a tileSprite scrolling infinitelly and the hole game hiccups a couple of times before it continues. Otherwise runs constantly on 60 frames. Did you managed to find any solution? I also thought that it could be related to the scale. Here is what I use for my game:

 

 this.scale.minWidth = 600;

 this.scale.minHeight = 400;

 this.scale.pageAlignHorizontally = true;

 this.scale.pageAlignVerticaly = true;

 this.scale.setScreenSize(true);

[geekarlier]

Hello Hellspawn_bg

 

Nope, the problem is still the same for me too : but i saw that the next Pixi version will improve the tileSprite system, maybe it will fix the problem ?