large sprite gets scaled down issue (iPad only)

[florianhacker]

Hello!

I'm trying to solve the problem why my 4096x4096 sprite sheet gets scaled down to 50% on iPAD, but not on desktop. It's all working fine with a 2048x2048 sprite sheet!

  // V1: referencing 4096x4096 sprite
  var sprite1 = new PIXI.Sprite.fromFrame( "frame1.jpg" );
  pixi.stage.addChild( sprite1 );
  // gets scaled down, sprite's coordinates are messed up!

  // V2: referencing 2048x2048 sprite
  var sprite2 = new PIXI.Sprite.fromFrame( "frame2.jpg" );
  pixi.stage.addChild( sprite2 );
  // works fine!

Anyone ran into this issue or know how to solve this?

Thanks!

[GoodBoyDigital]

Hi @florianhacker,
That is an interesting one! Are you loading a different json file for each texture?

[florianhacker]

Yes, I'm loading different files for each texture. It seems like this is more of an ios issue rather than a PIXI problem. I tried drawing a 4096x4096 image on a canvas without Pixi, the exact same affect happened!

[GoodBoyDigital]

Crazy Days! Is that an ipad 3? as if not it may be because the max texture size for ipad 2 / 1 is somthin like 2048 x 2048 ?

[florianhacker]

It's an iPad 4, displaying the image within an image tag works fine (without scaling issues), therefore I think it has to do with the canvas drawing context.

According to Apple (http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html)
"The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM."

Can this cause a scaling down issue as 4096x4096 increases the 5MP?
There is a library dealing with similar issues: https://github.com/stomita/ios-imagefile-megapixel

Thanks

[florianhacker]

All works fine with PNG/JPG sprite sheets up to 5 MP, everything above gets scaled down!

My MovieClip now loads textures from 2 different spritesheets (5 MP each), I can notice a jerky movement when the MovieClip switches between the sprites. Is there a way to fix this?

[GoodBoyDigital]

Happy to take a peek for you if there is a code example you dont mind sharing?

[florianhacker]

That would be nice, here you go:

https://dl.dropboxusercontent.com/u/4260558/pixi_test/index.html

The page displays an image and a canvas element layered on top of each other.
Both elements refer to the same source, you won't notice a difference on desktop, but if you open the page on an ipad, you'll see that the canvas element displays the image half the size.

[namuol]

No way for me to test/confirm this, but I'm willing to bet this has to do with the backingStorePixelRatio of the device.

4096x4096 is the maximum texture size on the iPad, but when rendering it on the canvas, it doubles image sizes because the backingStorePixelRatio is 2. So it works "normally" for your 2048x2048 texture because its doubled-size is within the means of the device, but in the case of the 4096x4096, the browser just shrugs its shoulders and does nothing, because the GPU can't handle an 8192x8192 texture.

Of course, I could be completely wrong; check your console for warnings, and file a bug with Apple, if you can!

[pisi]

I think it has to do with resource limits for encoding images. Hence it works fine on iPad4 (reportedly) but not on older (read lower memory).

Because of the memory available on iOS, there are limits on the number of resources it can process:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

From chapter Know iOS Resource Limits

When iPad faces such image, it resamples it down as much to fit into available memory.

[florianhacker]

It does not work on my iPad 4, I also think it has to do with backingStorePixelRatio. I tried implementing the drawImage method from http://www.html5rocks.com/en/tutorials/canvas/hidpi/ into PIXI but without success. I'm now using 2 sprites instead of one.

[englercj]

Unfortunately this sounds like a device issue. 😦

[namuol]

It might be helpful to print warnings when textures go over a certain size. I think the safest max size is 2048x2048, according to WebGLStats. The texture size should be multiplied by backingStorePixelRatio before checking its size.

Alternatively, it might also be as helpful to include a link to this issue in the documentation somewhere.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.