Feedback on performance

[Markarz]

Hi everyone, 

 

I'm working on a relatively small web game, and I'm starting to feel concerned about performance and whether I'll be able to continue building on the game with the rate that my performance is degrading. I'm currently using p2 physics in general with some calls to arcade physics for things like distanceBetween and angleBetween. All of the projectiles are in sprite groups. 

 

On my desktop, I generally run at 60 fps but drop to 40-50 when the map is scrolling on the first stage, and drop to 20-30 on the second stage. I've also tested on some laptops that seem to get closer to 40 in general. The UI is only working in Chrome right now, so all of my testing data is from running the game in Chrome. My concern is that neither stage map is really that large, the game window size is relatively small, and I don't have very many enemies or projectiles active on either map. I'm not really planning on mobile performance, but I wasn't expecting to run into performance issues on desktop browsers so quickly and with such a small game. 

 

Here's a link to the current version: https://damp-hamlet-9791.herokuapp.com/

 

Any feedback would be greatly appreciated. I enjoy working with Phaser a lot and would like to continue, but if I'm just going to run into performance issues I'm wondering if I should switch to another engine. 

[goyeneche]

In desktop you should't have many problems of performance, In mobile, well it's more complicated..
 

• Do you create your objects before starting the game? this is an example (then you can reuse them)
• Be creative and do the minimun calculations inside update function. Are AI need to be calculated each frame?
• Avoid large images if possible.
• If you have texts in game you should try to use bitmap fonts (but I see you use text outside the game)
• Objects that are far from the player could avoid been drawing and doing calculations.
• Did you try Canvas?
   

[Markarz]

Thanks for the reply @goyeneche!

 

I'm currently creating almost all of my objects before starting the state. It's done in the create function for each stage, so the objects are created every time you go down the stairs. I'm not sure if there's a better way than that, but it should only affect the loading time for switching levels I think (which hasn't been a problem yet). 

 

The AI is only calculated on a 3s timer, via this statement: 

this.game.time.events.loop(Phaser.Timer.SECOND * 3, creator.loopEnemies, this);

 

I haven't really noticed much lag on the timer updates especially, although I'm sure that could get worse further down the line. The loopEnemies function loops through all of the enemies and checks them against the players array (which only has 1 player at the moment) and calls 

this.game.physics.arcade.distanceBetween(this, this.game.players);  to check the distance. If the player is within the aggro distance, it does an additional check to get the angle between them. I'm not sure if there's a better way to handle AI, but this was my first attempt at it.

 

I'm not sure how to specify using canvas, but I'll do some research on it and give it a try.  

 

I did manage to improve performance significantly by reducing the number of sprites in the weapons group, which is imported by all enemy instances. I figured the number wouldn't impact performance much since they start dead, but it must be either bogging down the memory or the dead sprites are still used in calculations somewhere. I had them set arbitrarily high (250 bullet sprites per enemy) and reducing that to 10 made a big impact. I may be able to further improve performance by using a single bullet pool for each enemy type, but I'm worried that would cause some odd behavior for the enemies later on if I add dynamic firing rates that might exceed the bullet pool. 

[goyeneche]

I see you have a lot of Box Objects, maybe is that?

[Markarz]

@goyeneche I think those must have been from the weapon groups. I'm not seeing large numbers of box objects at the moment; were you looking on the heap snapshot from chrome? 

 

Also, do you have any other feedback for the game at the moment? I know the UI is messy and I need to work on that, but I don't want to invest much time until I decide if I'm going to try using something like Angular for it. It's currently all done with html, css, and jquery just to get something up on the screen to display information. 

[goyeneche]

@goyeneche I think those must have been from the weapon groups. I'm not seeing large numbers of box objects at the moment; were you looking on the heap snapshot from chrome? 

 

Yes, in level 1 = 60 Boxes, level 2 = 200 Boxes

I thought that the Boxes are the Walls, I don't know how much affects the performance having individual blocks of walls while scrolling. You can try removing that to see what happens

the game it's ok, but I would like more action

[Markarz]

Oh, hmm, thanks @goyeneche. Yes, at some point I had trouble getting p2 to load the collision layer on my json files from Tiled and had to switch it to use collision by exclusion like this: 

 

map.setCollisionByExclusion([274, 295, 296, 297, 298]);
var tiles = game.physics.p2.convertTilemap(map, layer);

for(var i = 0; i < tiles.length; i++) {
tiles.setCollisionGroup(game.tileCollisionGroup);
tiles.collides([game.playerCollisionGroup, game.weaponCollisionGroup, game.enemyWeaponCollisionGroup, game.enemyCollisionGroup]);
}

 

I guess that does set up quite a lot of collisions since it would be checking in the update for every wall tile against every player, weapon, and enemy. I'll try to figure out how to get the collision layer from Tiled working again in Phaser, which would probably reduce that first stage to around 10 collisions. 

 

Any suggestions on what type of action to add in? Are you thinking more on the player side, or more interactive stages, or better AI for the enemies? Something else?