Physics Performance on Mobile

[Edricus]

So I'm working on a game that is just about complete and I'm using CocoonJS to wrap it up for Android. I noticed that when putting it on a Samsung Galaxy S4 that it does lag a bit. It's not too troublesome but I would like to remove this lag if at all possible. I have a strong feeling that it's coming from my physics calls because of the way my game is set up, so hopefully I can get some tips on how to better set things up.

 

Currently my game has a character the rides along a set of teeth. As the character touches each tooth it becomes clean thus playing an animation. This continues indefinitely as per design of the game. Currently in the main update function there is this piece of code for handling the collision.

for (var i = 0, length = this.teethGroup.length; i < length; i++) {     this.game.physics.arcade.collide(this.bactoSurfer, this.teethGroup.getAt(i),           this.cleanToothHandler, null, this);}

The callback function simply plays an animation and updates the score. The tooth's body property is set to immovable and velocity to -350. However in order to stop the player from being pushed back I had to set it's velocity to 350.

 

Is there a better way to handle this kind of collision?

Also is there a way to have the player's character just sit on the moving teeth and still have the collision callback function go off without having to counter the teeth's velocity?

My final question is what sort of performance issues should I look for in the physics portion of the game?

 

Thanks in advance.

[lewster32]

You can pass the collide function a group to simplify this; there's no need to have a loop. Passing a group should batch the operations using Phaser's QuadTree to optimise the collisions:

this.game.physics.arcade.collide(this.bactoSurfer, this.teethGroup, this.cleanToothHandler, null, this);

Otherwise I'm not sure what else you can do to optimise the physics much more than is there. I guess you could maybe write your own routine to only check collision against the nearest tooth (and optimise the nearest calculation so it gets the tooth that's within a certain x range maybe?) though I don't know how much this will improve performance. The Arcade physics checks are fairly well optimised and in the kind of game it sounds like you've made, I'd be surprised if it really is the physics that's stretching the device. Rendering is in most cases the most intensive part of Phaser's subsystems.

[Edricus]

I'd be surprised if it really is the physics that's stretching the device. Rendering is in most cases the most intensive part of Phaser's subsystems.

 

Thanks, looking back I don't even know why I was looping through individual elements in a group. Thanks for pointing that out, I went ahead and changed all the collision to follow that. However the same type of lag is still present. You mentioned the most intensive part of Phaser is the rendering aspect. What can I do to look into what could be bogging it down? Should I lower the asset quality?

[lewster32]

Asset 'quality' in the sense of jpeg compression or png quality has no impact on performance, only the dimensions of the assets and amount you put onscreen. If you want to truly isolate the problem to see if it is the rendering, you could set all of your sprites to be sprite.visible = false and see if even with no sprites being rendered you still get the lag. Narrowing it down like this is an essential part of debugging.

[Edricus]

What's interesting about the lag is that when I'm running it in Cocoon there is absolutely NO FPS drop being recorded in the top left corner. It's consistently playing at 60 - 61 FPS. However while playing the game there is a slight jitteriness to it. I will try turning off some of the assets and proceed from there. Thanks for the tips thus far.

[lewster32]

I've noticed stuff in Phaser does often develop a jitter; not a lag as such, but like the frames are getting out of sync with the screen refresh causing it to stutter for a little while, then go smooth again. If this is what you're experiencing then I think it's normal, though I would like to find out why it happens.

[Edricus]

 

So as the screenshot above displays I have a character that surfs along a set of teeth. Every time a tooth is touched it plays a cleaning animation. The goal of the game is to dodge the incoming germs and clean as many teeth as possible before becoming victim to the germs. On desktop the games runs smoothly. Over the past few weeks I posted a few topics here to try and get some help with performance and such. I figured instead of writing a new topic I would post in here again.

 

On mobile I noticed a jitteriness before. At first I saw no frame drop but upon close inspection frames do drop when the jitteriness happens. I have done quite a bit of performance handling from suggestions on these forums and the jitteriness has gone down quite a bit however it's still there. It's there mostly towards the beginning of the game for about 30 seconds or so. Frames will spike between 50 and 60 FPS causing a noticeable jitter. However after about 30 seconds the frames stabilize a bit and hang mostly between 55 and 60 FPS. The jitter is less often but still happens.

 

Another thing I noticed is that if I hover in the middle and don't touch any teeth there is no FPS drop at all. Thus why I am back in this thread. Lwester32, I know you mentioned rendering is heavy part of Phaser and that it most likely wasn't the physics. I made the changes above that you suggested and took out the unnecessary for loops. After atlasing my assets and compressing I am still lost as to what I could do to help get rid of this.

[spencerTL]

I don't have the expertise to help with further optimisation but in regards to the lack of performance at the beginning of the game that will probably be due to how the browser produces its efficient code. Until it's ran through out it can't make the necessary optimisation. I take that fact to mean that I either reduce game complexity to have it smooth at the start or accept a short period of lag if my game is at the edge of a device's capability.

This and a few other ideas is in this article, about Chrome, but probably applicable to others too:

http://www.html5rocks.com/en/tutorials/speed/v8/

Edit: sorry I see you are referring to Cocoon rather than browsers. Maybe this works the same way, I don't know.