Search the Community

I have a game where the screen fills up with falling blocks in a grid. The blocks are rendered by canvas drawing operations and use arcade physics to test for collisions between the blocks-group and itself, and the the ground. The game runs fine at 60fps on desktop, and it also runs fine on mobile -- until I get about 20 blocks on screen. Then the framerate drops progressively, down to about 30fps when the screen is filled with blocks. I have done some profiling and debugging and believe the problem is with the physics quadtree operations. In the profiler, before many blocks stack up, the rendering functions take most of the time. After a few blocks get stacked up, the heavy operations are all quadtree related. See the attached screenshots (profile1 and profile2 respectively). I have tested rendering simple sprite images instead of canvas drawings, with no difference. I have tried to disable physics on blocks once they land, but only partially succeeded (this.body.enable = false). I tried switching landed blocks to a different group, but had other problems with that and gave up. Should that even be necessary? All my code is at https://github.com/jschomay/color-blocks-blitz/commit/0487b02496989e007c032303b9a7d952e069acbf. You can test the game yourself at http://jeffschomay.com/color-blindness-blitz/. Any suggestions on what I am doing wrong, or if I need to be more clever at something? Thank you so much for your help - I'm new to Phaser, but I really like it, and want it to work for me, but it's got to work on mobile. Everyone tells me to just use Unity, but I want to give this a try.