Bug on mobile devices!

[pollyndrom]

Immediately after loading the game, the browser crashes and sometimes gives the error message "something went wrong." I have repeatedly tried to run the game in two browsers (Chrome and the built-in browser) on my xiaomi, but nothing has changed. My friend has a newer phone and the same problem, "something went wrong." Please developer, fix this. I hope that my message will not go unnoticed.

[lucasgcb]

I took a quick look at this. From what I've debugged the problem is that, during the loading of images an InvalidStateError is thrown during createImageBitmap at some point. This is exclusive to mobile.

Replacing the input of the following fetch command with whatever static resource results in the game running on mobile just fine. Albeit with just one single image for literally every sprite. https://github.com/ncase/anxiety/blob/33d496a7d15944405326339cab9b59242d4029c4/scripts/game/Loader.js#L52

Case in point:

I'm not sure if it is one specific sprite throwing the exception or why would one specific image be doing this in the first place. Since the error flies off from a promise, and the src isn't stored in the exception, I'm having troubles pinpointing the culprit.

@ncase any ideas?

[kairacat]

We switched to using createImageBitmap over just creating new instances of Image because it caused bugs where the game would become unresponsive during gameplay. That happened because browsers just seem to take an image's decoded data out of memory whenever they feel like it, causing redecoding to happen mid frame (that was the cause of the unresponsiveness).

Switching to createImageBitmap allowed us to control the decoding ourselves, it prevents the data from being unloaded, which fixed the unresponsiveness. But as a tradeoff a lot more memory is used during loading, which is what I think causes some mobile browsers to crash...

That's probably why using only one image prevents crashes, because only one image is loaded instead of many, or the image you're loading is smaller than the size of the sprite sheets so less memory is used upfront. A few things I've thought of that we could try to fix it:

1. Load assets in a sequence (i think it's happening concurrently right now)
2. Add a short delay between loading each asset
3. Restructure loading so that images are loaded at the start of each scene, and unloaded when no longer needed
4. Shrink and compact the sprite sheets so that they require less memory to load (would probably take super long to implement and require rewriting all the loading / rendering code)

My thought behind the first two ideas is that maybe the browser thinks there's a horrible memory leak and something has gone wrong because suddenly all this memory is used out of nowhere? It's a total guess to be honest but maybe worth a try!

What do you peeps think?

[lucasgcb]

You'll probably have to go with either 3 or 4.

To try to combine what you said, Loading it the way I showed actually stores the bitmap data of the same image a bunch of times as bitmap in Library.images, so if anything it starts bloating memory with repeated decoded versions of the images. With that in mind, doing that with any of the following pictures returns an exception and kills the thread on my device:

sprites/act1/act1_beebee.png sprites/act1/act1_hong.png sprites/act1/act1_end.png sprites/act2/battle_bb.png sprites/act2/battle_hong.png sprites/act4/hong_transition.png sprites/intermission/bb.png sprites/intermission/bg.png sprites/credits/bb_dance.png sprites/credits/screens.png

The following however do not cause issues:

sprites/act2/dee.png sprites/act2/dum.png sprites/act2/special.png sprites/act3/hospital.png sprites/act4/al_shire.png sprites/credits/gramm.png sprites/credits/starring.png sprites/credits/end_message.png

What could be happening is that createImageBitmap bloats the higher resolution and transparency heavy spritesheets (regardless of file size, for instance starring.png is has a larger file size than hong_transition.png but the latter has higher absolute resolution accounting for all the alpha).

An unlikely but more documented cause is that there's simply something corrupted with the sprite information in the files, they seem to work on unit tests however so we may have an integration case.

Any solution at this point would be interesting. My best guess is that there's something off with the way sprites are getting decoded by createImageBitmap, in particular the higher resolution spritesheets. They all seem supported, some just tragically less efficient than others. Either loading these dynamically or cutting them down should do.

[cph4cker]

Could this have something to do with this BUG? @ncase https://stackoverflow.com/questions/49363047/chrome-crash-with-webworkers-and-createimagebitmap/54750054#54750054