foldem Posted June 16, 2014 Share Posted June 16, 2014 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 More sharing options...
foldem Posted June 26, 2014 Author Share Posted June 26, 2014 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 More sharing options...
lewster32 Posted June 26, 2014 Share Posted June 26, 2014 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 More sharing options...
Recommended Posts