FPS Issues

[jesseabramson]

Hi all, relatively new to Phaser and I'm setting up a game that uses a large hex map, 100x100 hexagons which render fine, I get 50+ fps and they all tween and interact with nicely.

The issue is when I 'decorate' some of these hexes. Here is the creation of the hexmap, no issues.

hexes = Hexes.find().fetch();		hexes.forEach(function(hex, i) {	var hexagonX = hex.x * hexRectangleWidth + ((Math.floor(i/100) % 2) * hexRadius);	var hexagonY = hex.y * (sideLength + hexHeight) + (Math.random() * 6);	var hexagon = world.create(hexagonX,hexagonY,hex.terrain);	var decorations = decorate(hexagon);	decorations.forEach(function(decoration) {		hexagon.addChild(decoration);	});	hexagon.autoCull = true;	hexagon.inputEnabled = true;	hexagon.events.onInputOver.add(hexHover, this);	hexagon.events.onInputOut.add(hexOut, this);}); 

The decorate() function takes the hex and returns 'decoration' sprites to add as children:

 

decorate = function(hex) {  switch (hex.terrain) {    case 'forest':      for (i=0;i<game.rnd.realInRange(5,10);i++) {		var tree = world.create(	hex.baseX + 20 + game.rnd.realInRange(i-15, i+15), 	hex.baseY + (-10) + (hexHeight / 2) + (i*game.rnd.realInRange(0.3, 2.5)), 	  'tree' + game.rnd.integerInRange(1, 6)	);	tree.autoCull = true;	tree.scale.setTo(0.3);      }    return decorations;  default:    return [];  }}

the FPS cuts from 50+ to about 12, what am I doing wrong?

[rich]

Are your 'tree' images in the same texture atlas as those used by the parent hexagons? If not then what the decorations are doing is forcing a draw call for every single hexagon, nullifying the effect of batching that you get as standard.

[jesseabramson]

Are your 'tree' images in the same texture atlas as those used by the parent hexagons? If not then what the decorations are doing is forcing a draw call for every single hexagon, nullifying the effect of batching that you get as standard.

 

Ahhhh, so using an atlas is the way around this? Thanks so much, I'll look into it, right now they're just preloaded as separate images.

[jesseabramson]

Can't seem to fix the "Cannot set frameName" errors for every single texture in the atlas.

game.load.atlas(  'hexsheet',  'images/hexes.png',  'images/hexes.json');

{"frames": [{	"filename": "cactus1",	"frame": {"x":626,"y":2,"w":29,"h":66},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":29,"h":66},	"sourceSize": {"w":29,"h":66}},{	"filename": "cactus2",	"frame": {"x":558,"y":2,"w":32,"h":66},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},	"sourceSize": {"w":32,"h":66}},etc....

I get "Cannot set frameName: cactus1" but for every frame

[rich]

What are you using to generate the texture atlas? The snippet of data above looks fine, so it may be something in the code.

[jesseabramson]

Figured it out, seems like I have to completely delete and rebuild the png and json atlas files every time I make a change.

[rich]

If you make a change to the atlas, yeah. If you use Texture Packer it has a 'watch folder' option - so you can set it up to monitor a folder, drop all your pngs in there, and it'll rebuild the atlas when it detects a change without you having to manage the pngs yourself.