Loading large backgrounds

Phaser 3
1

How big (file size) is too big for backgrounds? I’m working on a platformer and have designed the whole level in PhotoShop. It’s a massive 10 mb file.

What’s the best approach for level design using background images? Seems like loading the one image would be the same as splitting the image into pieces and loading them separately.

On a PC my game loads, relatively quickly and the background works fine but when I use a mobile browser (I’m going to use cordova later on) it takes longer to load and the background image doesn’t show. It’s just black. My sprites load fine and show up but the background is black.

I’m actually ok with load times, I can work with that but not having the image show up on mobile isn’t going to work, obviously.

Thanks in advance for your help!

2

Consider using a tile map. That would men splitting up the image like you mentioned but the key difference is in re-using those images to assemble a big background (not every image is unique, they’re more like building blocks so you need fewer of them).

EDIT: check this out: https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6