any image larger than 4096px in width will not show on any mobile browser

[valueerror]

..but works perfectly on my desktop...  i have a background image that is 6400x480 and i tried A LOT of different sizes over 4096x480 and none of them worked.. the moment i scale down the image to 4096 (or lower) and reload the page the background image is back

 

wth?

 

 

[valueerror]

ahh.. i forgot..  i added this image as tileSprite...  i just found out that  if i do it as normal sprite it shows up normally..   hmm..  solved?  i don't know..    which one should i use to add a simple (non tiled) background image? thx!

game.add.image(0, 0, background);game.add.sprite(0, 0, background);game.add.tileSprite(0, 0, 6400, 480, background);

[Jorasso]

Browsers has limit for texture's size. If you want your game to work on mobiles, you have to keep all textures under 2048x2048, or even 1024x1024 for older devices. Then in the game, you can build from them your huge background

[BdR]

6400x480?! That's a huge sprite! 

 

I assume it's for a big scrolling background? It's probably better to break it up in smaller reusable components instead of using one giant "pre-compiled" background. For example look at Submarine Dash. It uses the parts of this image to create its backgrounds at run-time.

 

Btw if it's a sprite sheet with character animation etc. you could re-arange it so it's more square-ish, like 1920x1920 or something like that.

[valueerror]

well.. thank you both for your answers .. i created a 2048x2048 tileset for all kinds of terrain and designed my worlds in tiled .. the problem is now that because of the amount of layers i now have the performance is down by 20fps now.. but thats a different problem for a different thread..  :/

[ZoomBox]

You could... well, create a "HugeBackgroundManager".

Split your huge background into small half-screen-sized pieces and show them (load them ?) dynamically based on the camera/player position.

The game would have to deal with 9 of your tiles (midle, right, left, top, bottom and 4 diagonals).

 

If you only kill and revive them dynamically it's a quite simple process.

But I suggest you to first check if a killed sprite is actually less performances-consumming than an alive one (in the case it's not, lets go out and cry on a swing).

[valueerror]

that's an interesting idea..   it's just that those images take a lot of space on mobile devices..  because the levels are quite big the jpgs (or pngs) used use up to 1mb space.. so i am trying now to work with tilesets (i guess it is the proper way to do it) and fix the performance issue somehow..   if i don't succeed i'm goingback to huge images with less textures and more compression so that the filesize is going down    thx nevertheless..

[lewster32]

If your images are mostly flat colour or empty space, use png. Also, run it through a site like www.tinypng.com to reduce them further still - this should get your bandwidth consumption down to reasonable levels, though be aware it won't affect the memory consumption; a jpeg or a png regardless of file size will take up the same amount of memory as if it had been saved as a bmp.

[valueerror]

hey thx lewster... tinypng is awesome..  it reduces my tileset from 1mb to 200kb without noticable quality loss..  

 

i whish there was a gimp plugin for that..    "save for web" can do indexed png's but transparency is handled very bad..

[valueerror]

just found a wonderful program named

 

pngquant   it's in the ubuntu default repos..

 

the quality is even better than with tinypng (although the filesize is a little bit larger)