Can you use P2 Physics with Phaser on Mobile?

Recently I finished writing a tutorial for CodeAndWeb which featured using the P2 Physics system in Phaser with their Physics Editor program. In the tutorial I built a simple game that involved some rope swinging and a whole bunch of enemies with complex hit areas. I’ll provide a link to that tutorial here when it is available, but for now you can play it here or see what it looks like below:

Although I do write all kinds of tutorials for Phaser in general, they are usually more geared towards mobile gaming. The problem with the P2 Physics system is that because it is so much more complex than the default Arcade Physics it is not really supported for mobile devices, which don’t have as much power as a desktop does.

I had heard that P2 performance on mobile isn’t great but I’d never really put it to the test, so I wanted to try running this game I created with P2 Physics on my mobile device and recording the results.

Method

I am by no means a scientist so these “experiments” are very ad hoc and don’t offer much more than anecdotal evidence. Basically my plan was to run the game on a mobile device and see how it goes, and then make changes based on the performance (I assumed from the start that the full game would not run well).

I also added a debugging label to the game (in the top left) which would show the current frames per second. You can add this to your own games by first running:

this.game.time.advancedTiming = true;

and then adding the following code to your render function in the games state:

render: function()
    {
        this.game.debug.text('FPS: ' + this.game.time.fps || '--', 20, 20);
    }

The experiments were run on an iPhone 5 running iOS 9.0, which is pretty reasonable . The games will be compiled using Cocoon.io and the Canvas+ WebView. You can read more about the different web views and how to to build mobile games with Cocoon, but the Canvas+ is essentially the highest performing web view and should be the default choice unless you have a specific reason not to use it.

As a base line, the game runs smoothly at around 60 FPS on a desktop browser.

Experiment 1: Full game without modification

For the first test I simply tried installing the game as it is and seeing how it ran. The results were not good, it was very slow and laggy and froze after about 10 seconds. It’s a bit hard to see in the picture, but I was only getting about 5 frames per second.

Experiment 2: No impact events

In the game I’m enabling impact events with the following code:

this.game.physics.p2.setImpactEvents(true);

What this does is allow you to add collision handlers to collision events, so when the player collides with any of the enemies a function can be called to do something, like this:

this.player.body.collides(
  [
    this.blockCollisionGroup,
    this.weightCollisionGroup,
    this.slithisCollisionGroup,
    this.flyCollisionGroup,
  ],
  this.collisionHandler,
  this
);

Unfortunately, enabling impact events with P2 physics is quite costly (which is why it is off by default), so it could have been what was causing the game to run so slowly. So for this experiment I tried removing impact events, which would mean I could no longer keep track of how many times the player had been hit.

The results were about the same as the first experiment. The FPS hovered around 5, it was very laggy and froze after a little while.

Experiment 3: No impact events and less enemies

There’s a lot going on on screen, there’s a total of 60 enemies created (each with polygon collision masks created in Physics Editor) and 2 new enemies are spawned every 300 milliseconds.

For this experiment I tried cutting down the total enemies to 15 and only spawned 2 new enemies once every 2 seconds.

This time the FPS stayed at around 7, but that’s a pretty negligible difference. For the most part the experience was pretty much the same: very slow and laggy and eventually froze.

Experiment 4: No impact events, less enemies, and basic hit boxes

One of the big differences in P2 physics is that it allows you to use sprites with complex hit areas. Take a look at the following example:

With Arcade Physics we just get a basic bounding box, but with P2 Physics we can create complex shapes to handle collisions. Everything comes at a cost though, and of course this means more work for the CPU to do.

So in this test I tried not loading in the polygons for the hit areas and instead just used a basic rectangular hit box. But again, the FPS was still about the same and the game heavily lagged.

Experiment 5: No Spring and Basic Hit Box

The spring is another complex feature in P2 physics, and in this game the player is attached to the ceiling via a rope which is implemented using a spring. So for this experiment I tried removing that spring (which renders the game pretty useless) to see how that was affecting it.

This time I got around 14 FPS and the performance was noticeably better. It was still laggy but much smoother and I would say in a state that was almost playable. However, it did still freeze after a little while.

Experiment 6: No spring but complex hit boxes

Since removing the spring had such a drastic impact on performance, I wanted to try adding the more complex hit boxes back in without the spring being present. The result was basically the same as the previous experiment: about 14 FPS, smoother than the original experiments but still laggy and eventually froze.

This showed that the complex hit boxes were having a negligible effect when compared to the spring.

Conclusion

This was hardly an exhaustive experiment, but given the poor performance it seems that P2 physics is not a viable option on mobile right now (which was to be expected). In some specific circumstances and with optimisation you might be able to get away with using P2 but not in a general case.

I asked Richard Davey, the creator of Phaser, about this and he said there is not many Phaser games out there with P2 Physics on mobile. He said if you do want to use P2 on mobile you need to keep the world size small, object counts low and be really careful with everything you’re doing.

Until mobile devices get more powerful we will just have to stick with the Arcade Physics system for now, which does have some limitations when compared to P2, but there is still a lot you can do with it and Arcade Physics is what most Phaser games use anyway.