Mobile Crashes

Oh yeah the whole thing crashes on mobile for some reason, but only if you’re playing it in portrait mode, and it crashes the whole os. I’ll figure that out eventually.

I finally figured this out yesterday! It was kind of a wild ride, since the game was crashing iOS entirely, which meant that my normal debugging trick of keeping the console open for errors didn’t work (it’d get blown away with the OS crash).

I got the tip that I could get iOS crash reports from Analytics Data (Settings > Analytics & Improvements > Analytics Data), but unfortunately that turned out nothing either. So…the debugging process turned into a very manual one, where I connected my phone to my computer, set up a local server to the dev build, and then uhhh started commenting out whole parts of my game until it stopped crashing.

Eventually (with some difficulty; iOS Safari would frequently cache the crashy versions and make it difficult to replace it with a version that didn’t crash), I figured out that as soon as the Phaser.JS instance was created (to handle bgs and characters), the whole thing would fail.. So something was up with the initialization process in Phaser.JS specifically and my React was fine.

The other clue I had was that it was crashing only in portrait mode, not landscape. Which meant – possibly something CSS or graphics related, since height / width were different? Either way, I got my big hint when I looked up Phaser.JS issues and found this one, which suggested that Phaser.JS could crash on iOS from using too much memory at larger resolutions. The bug had been fixed, but my game was still crashing, but that was a lead!

I looked into where I was creating RenderTextures, and realized – I’d been scaling them up by window.devicePixelRatio to make sure the resolution matched native, but then Phaser itself was then downsampling them to fit them into the game window. And on iphones, window.devicePixelRatio is 3, on a viewport height of ~900px…so every render texture was being created with a size of ~1000x2700 pixels. That on top of the very very strict memory requirements of web browser tabs on mobile, and various other shader effects being done under the hood…yeah.

Anyway, removing the scale factor for window.devicePixelRatio fixed all my problems, and it was silly and took way too long, but it’s fixed now and I know what’s going on, yay. It might not be terribly useful, since the experience playing on portrait mode in mobile is not good and I will likely disable it regardless, but not crashing OSes is objectively a good thing.

(Also, perhaps this could’ve gone so much faster if I had known how to really hook up a phone to a proper debugger / profiler – half the battle was figuring out that it was a memory error to begin with. Then again, my experience with debugging phone graphics issues is that the vast majority of issues is memory management, since phones aggressively throttle performance when under memory pressure.)