Optimising Phaser for giant maps with lots of collisions

Article by Richard Davey. Posted on 17th Aug 2015.   @phaser_

image

From The Botanist Game Blog: "The Botanist is all about huge maps and lots of environment — especially giant, sprawling forests with tons of trees. Unfortunately, stage loading performance has been terrible for my larger maps, so I decided to dive in and figure out the issue. As a reward, I received a 1,500x decrease in my stage loading time with PhaserJS. I’m excited about this, so I’d like to share the solution with you all.

I’ve written before about how performance is important for The Botanist, and I’ve made some performance-enhancing tweaks in the past. Recently, however, I’ve started to develop the first playable section of the game. You can’t walk through trees, and there are lots of other things you can’t walk through, so there are tons of collisions defined in two large collision layers that can make any piece of game art collidable. I use setCollisionBetween and set the range for all of my tiles on my two collision layers.

In developing larger and larger maps, however, I’ve noticed that the stage loading time has blown up. It can take up to 15 seconds for a map to load! Obviously this is unacceptable, so we revisit our friend the profiler:"

Read More