Jump to content

Increasing FPS when having many images displayed


foldem
 Share

Recommended Posts

Hi there,

 

I'm making a match-3 game where some graphic elements are static (background, tile bg, etc) and some are moving (color tiles). When I do a grid 11 x 9 and fill it with images, the FPS goes down pretty bad (Chrome - 40, ok; FF - 17; Stock Browser on Samsung Galaxy S3 - 7).

 

The FPS is pretty low even when nothing happens, so it's a problem or rendering/redrawing I guess. So the question is if I do everything right to get the best productivity? Is there any chance to get some images be drawn once and no redrawing (for backgrounds f.e.)? 

 

I tried 2 ways: have all the art in one atlas and 1 atlas + game bg image separately - but haven't noticed a big difference. 

 

Finally, perhaps I can re-use texture somehow, but I can't figure out how to make it properly to get the desired increase. 

 

The game itself is here: http://charstudio.com/html5/sweet_candies_dev2/

 

How I add sprites now: 

		this.loc.matrix = [];		this.loc.backTiles = [];		this.loc.colorTiles = [];		for (var i = 0; i < this.loc.mapSize.y; i++)		{			this.loc.matrix[i] = [];			this.loc.backTiles[i] = [];			this.loc.colorTiles[i] = [];			for (var j = 0; j < this.loc.mapSize.x; j++)			{				this.loc.matrix[i][j] = new Game.MatrixData(this.loc.levelData[i][j]);								if (this.loc.levelData[i][j] != Constants.EMPTY_TILE_NUM)				{					//creating a backTile					this.createBackTile(i, j);										//creating a colorful tile					this.createColorTile(i, j);				}			}		}
	createColorTile: function(i, j)	{		var excludeColorsArray = this.getEcludeColorsArray(i, j);		var color = Utils.prototype.getRandomIntWithExclude(1, Constants.TOTAL_COLORS_NUMBER, excludeColorsArray);				var sprite = new Phaser.Sprite(this.game, (this.game.data.mapMinPos.x) + Constants.tileSize * j * this.game.artZoom, 						(this.game.data.mapMinPos.y) + Constants.tileSize * i * this.game.artZoom, 'game', 'colorTile' + color);		sprite.width = Constants.tileSize * this.game.artZoom;		sprite.height = sprite.width;		this.loc.levelLayers.colorTiles.add(sprite);		this.loc.colorTiles[i][j] = sprite;		this.loc.matrix[i][j].color = color;	},		createBackTile: function(i, j)	{		var sprite = new Phaser.Sprite(this.game, (this.game.data.mapMinPos.x) + Constants.tileSize * j * this.game.artZoom, 						(this.game.data.mapMinPos.y) + Constants.tileSize * i * this.game.artZoom, 'game', 'tile1Bg');								sprite.width = Constants.tileSize * this.game.artZoom;		sprite.height = sprite.width;		this.loc.levelLayers.backTiles.add(sprite);		this.loc.backTiles[i][j] = sprite;							},
Link to comment
Share on other sites

  • 2 weeks later...

Found the possible solution after tons of testings. 

 

You have to use Phaser.AUTO instead of Phaser.CANVAS when initializing the Phaser.Game. 

 

Seems like it effects only Android stock browser, the FPS changed from 5-6 to 40-45!

Link to comment
Share on other sites

If you are composing a background of multiple images but it won't change after that (except maybe to move, scale or change opacity) you can set cacheAsBitmap to true on the object (usually a group) which will flatten it down into a single texture. This trades a bit memory for speed, which will probably be okay in your situation.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...