How best to optimize for mobile using the models provided?

darkgriffin · March 4, 2016, 3:17am

I recently tried my game on my mobile device, a Samsung Galaxy 4 Active, in firefox for android.

The framerate is very choppy, and despite my best efforts to framerate independently recalculate the movement and push values, the robot is way too fast and unpredictable on mobile. As he is the only physics object that even moves in the simulation, and is using the default capsule collision, I seriously doubt the engine is at fault here, so I must be doing something wrong or perhaps just have a super cheap phone? (What phones is the contest expecting to judge with anyway? Are we even allowed to know?)

Could someone else be kind enough to test this out on their phone? It works fine on PC, even my crappy single core laptop, but on mobile I get lots of lag related issues. As I only have the above phone to test with I’m working in a black box here.

As this is for the contest entry, I doubt I have time to work out how to do his movement through ray casting, nor do I think that will help much(the phone is heating up and missing textures as it is).

I’m also rather stuck with the textures on the robot, ufo, and rocket, and the polygon count on them as well, so I can’t optimize those models. (I tried downloading them but blender won’t open whatever format they come in for me to change, and I am pretty sure we can’t modify the models outside of playcanvas editor for the contest anyway. The UV mapping becomes all wrong if I change the resolution of the textures.)

What else could I try to optimize this and get it under control? Surely the engine is supposed to be able to do a bit more then this?

I can’t exactly scrap any of the menu, and it’s as optimized as I could get it given our sprite and text tools. (Actually a few things extra still need to be added to it, so it’s only going to get worse in that regard). And I doubt playcanvas would give us models the engine couldn’t handle on mobile, or the objective would be impossible.

Am I missing anything? Does my mobile device just suck? Or have I really blundered somewhere?

I’m genuinely a bit lost as to how(or if I even need to) salvage the mobile side of this.

dave · March 4, 2016, 10:19am

Seems to run OK on my Nexus 5X. Though with occasional long pauses probably either new shader compilations or garbage collection.

It’s difficult to know why your particular phone is running slow. It could GPU bound or CPU bound.

Are you using collision objects for all the coins, that could end up being a lot of collision volumes on a low-end device?

Are you using fullscreen effects? How many lights are in the scene?

Use the profiler to see how many draw calls you are using. On mobile it should be below 150.

It’s unlikely to be the polygon count or texture size.

Run the game using the remote debugging and profiler tools in Chrome. If you’re game code is using 100% CPU then you can see where to fix that.

darkgriffin · March 4, 2016, 3:18pm

Ok, a quick look at the profiler pretty much answered my question, the draw calls are hovering around 230 during the track.

I checked the camera settings and clicked a magical box called “Frustum Culling”. Oh look, 90-120 draw frames now. I is noob.

It’s still running choppy on my device, so I guess I’ll have to learn how to setup and use the remote debugging with my phone. Off to more dev adventures.

darkgriffin · March 4, 2016, 5:22pm

Ok, I am getting a spike in the heap snapshots that says “[array]”, but I have no idea what it is. The rest of my spikes are less then 5% of the load, so whatever playcanvas is doing on this is the cause of the spike.

I’ve tried several changes to my code and nothing seems to be improving or changing the reallocation of whatever playcanvas is moving around in memory. I doubt it’s a leak in playcanvas, but I’ve burned more time then I care to spend trying to fix that “random drop in framerate”.

I simply don’t understand enough about the memory use of pc or [array].gc to understand why it’s being flushed and apparently leaking? I did a little bit of digging using chrome debugger and a heap snapshot, and found it’s always something in [array] that’s being flushed and created again. The only time I actually destroy any array in my game, to my knowledge, would be loading and .destroy() on the level objects between the title and the track. But the spike and flushing seems to happen even if the track is left running and simply paused between snapshots.

I also tested a completely blank new scene, and there isn’t this flushing error(the heap stays flat the whole time the page is open). So it’s something I have or am using in the scene/game I made that seems to be causing the garbage flush.

I don’t have the time to figure this out, and according to the debug info all my own code and objects are only filling the garbage collector with 5% of the total garbage being cleaned up. So I don’t think this is going to do much performance-wise, even if I could track it down. (I’m new to the debugger and quickly found out that playcanvas engine is very confusing to fish through using the debugging tools, and I don’t know what I’m really doing or looking for anyway.)

I’d rather spend the rest of the contest time working on polish and two other track layouts, so for now I’m moving on to get those done.

I just figured I would mention this in case someone could tell me more info about what is expected here. That frame drop issue has come up multiple times now, and I don’t even know where to start since I’m completely new to the chrome debugging tools.

(Before you send me links to the google guides, I’ve read them already completely, and still barely understand what they are saying or what to do with the data I get from the windows. I have no idea if what I’m observing has anything to do with the frame freeze at my level of knowledge. Perhaps this is all normal and I’m tracking useless info, I wouldn’t know either way.)

Edit: An additional way of optimizing the game came to mind, but I do not know if Playcanvas gives me access or a control for it. Is there a way to change the “framerate” of the physics or rendering engine’s updates? Or is it stuck at the same rate it is at?

I was thinking on slower devices I could run the frame renderer slower to allow the device to catch up with the physics. What happens now is that the robot gets “pushed” more then the physics rendering can keep up with, resulting in a much faster push. It’s hard to describe, but basically he ends up teleport pushing as the physics engine + my time code try to keep up with the low framerate and large changes to the setup. This causes him to slip through checkpoints and triggers, gain way more speed then he is supposed to be getting, among other odd results.

If I had an override for the frame rendering, I could force the game to drop frames to allow the physics processing if the frame time is below a certain thresh hold to make up for this. Sadly a quick search seems to say playcanvas doesn’t have such a setting and just runs at whatever rate it’s got for the window. Is this info wrong now, or is there still no way to have reliable physics results?

marquizzo · March 5, 2016, 5:48am

Have you looked into disabling the use of device pixel ratio?

From your game’s Dashboard > Settings > USE DEVICE PIXEL RATIO

Make sure this option is unchecked. I’ve noticed that even though it looks very crisp, this feature eats up a lot of resources on retina and high pixel density-devices.

darkgriffin · March 5, 2016, 6:53pm

Ah, thanks for the tip marquizzo. That seems to have fixed most of the performance issues in a single button.

marquizzo · March 6, 2016, 12:02am

No problem! Glad you didn’t have to modify your build to accommodate for mobile.