Large images problem on iPad

mambostudio · August 20, 2014, 12:05am

Hi, I’m having a problem with image resolution on iPad. I’m using TexturePacker to generate large sprite sheets and load them on my game, I’ve created one sprite sheet for every screen, however, since I started to use these sprites the image quality significantly dropped on iPad. I’ve already tested if the correct image has been loaded, and yes, it was. For example, one of the sprite sheet have 1536 × 3644 on @4x, other have 7868 × 568 on @4x, and other have 1944 × 8160 on @4x they contains several small sprites inside. I open the images on my desktop and they looks fine, but on iPad all sprites looks stretched. If I load the images individually (with no sprite sheets) using newImageRect they loads well.

I wonder if there are some size limitation to load images on iPad devices, or if there some best approach to handle this.

Thank you very much

bjsorrentino · August 20, 2014, 8:35pm

Hi @mambostudio,

Can you post your code where you set up the image sheet for one of these sprites?

Thanks,

Brent

mambostudio · August 20, 2014, 9:00pm

Of course, there is an example. I use this same pattern in several places.

local startSheetInfo = require('spritesheets.start.start') local startSheet = graphics.newImageSheet("images/start/start.png", startSheetInfo:getSheet() ) function lyt\_start.showLogo() local img = display.newImage( startSheet, startSheetInfo:getFrameIndex("logo") ) img.x = contentWidth\*.5 img.y = 115 return img end

bjsorrentino · August 20, 2014, 9:27pm

Hi @mambo,

First thing is that you should be using “display.newImageRect()” to display images that are dynamically selected based on the device. There may be other things to check as well, but please start with this.

Brent

bjsorrentino · August 20, 2014, 9:27pm

Link:

http://docs.coronalabs.com/api/library/display/newImageRect.html

mambostudio · August 20, 2014, 10:53pm

Hi, thanks for your reply.

I was using newImage because I saw that on a Texture Packer tutorial. Now I’ve tried with newImageRect, but unfortunately the problem continues. I used the code below to test:

local startSheetInfo = require('spritesheets.start.start') local startSheet = graphics.newImageSheet("images/start/start.png", startSheetInfo:getSheet() ) function lyt\_start.showBackground() local frame = startSheetInfo:getFrameIndex("bg") local img = display.newImageRect( startSheet, frame, startSheetInfo:getSheet().frames[frame].width, startSheetInfo:getSheet().frames[frame].height ) img.x = display.contentCenterX img.y = display.contentCenterY return img end

bjsorrentino · August 20, 2014, 11:46pm

Next thing to confirm is that TP is including the “sheetContentWidth” and “sheetContentHeight” properties in its image sheet setup. These are required for dynamic image selection from image sheets, as explained here:

http://docs.coronalabs.com/api/library/graphics/newImageSheet.html

mambostudio · August 21, 2014, 2:07am

Thank you brent. I’ve checked already, the lua files have both properties. Just to be sure that the problem is clear. Corona is loading the correct image, i’ve write a text over the image 4x and 2x to be sure, however, the 4x image is loaded streched, if I load the very same image but out of the spritesheet file and directly from newImageRect it is loaded fine. I’ve opened the spritesheet on my desktop and it is high resolution, so apparently TP is generating a correct image.

bjsorrentino · August 21, 2014, 2:59am

In this case, my guess is that the width and height parameters that you’re pulling in (for the last two arguments of the newImageRect() call) are not the correct “1x” size. Do a print() and confirm that you’re getting the correct values… again, these should be the size of the default “1x” image.

Brent

mambostudio · August 21, 2014, 11:02pm

The values are correct, I’ve tested with the background (380, 570) and another image file, the values are the same that I’ve used to test with individual images rather than spritesheets images.

bjsorrentino · August 21, 2014, 11:10pm

Hi @mambo,

I still don’t know what the issue is. Are you saying it only happens if you set these up as sprites (display.newSprite), but if you use the exact same image sheet and place a static image (display.newImageRect) from one frame, it’s correct?

mambostudio · August 21, 2014, 11:26pm

Thanks Brent. Actually no. The image only looks fine if I don’t use a sprite sheet file at all. For example, suppose I have 3 files (“background.png”, “logo.png”, “button.png”), then I use TP to generate a sprite sheet (“startScreenSheet.png”) containing these 3 images, ok? If I use like the code below, for example, it works perfectly:

local img = display.newImageRect("background.png", 380 , 570 )

However, if I use like the code below:

local startSheetInfo = require('startScreenSheet') local startSheet = graphics.newImageSheet("startScreenSheet.png", startSheetInfo:getSheet() ) local frame = startSheetInfo:getFrameIndex("background") local img = display.newImageRect( startSheet, frame, startSheetInfo:getSheet().frames[frame].wi dth, startSheetInfo:getSheet().frames[frame].height )

the image loses quality, the edges are blurry, looks like a slightly streched image. Obviously, the first reason that come to mind is that TP somehow decreases the image quality, but if I open the sprite sheet file on my desktop, the image looks perfect.

Is it more clear now?

bjsorrentino · August 22, 2014, 6:56am

Hi @mambo,

Can you give me the exact pixel dimensions of these 3 images, then show me the contents of the Lua file that TP generates which contains the parameters for each frame?

mambostudio · September 1, 2014, 1:18pm

Sorry about the delay to answer, I’ve asked some tests to the design team to try to understand what exactly is happening. Apparently TP is actually reducing the image quality. When I generate a half sized image directly from Photoshop it looks fine on the device, but when TP generate the half size image it somehow loses quality. We’ll keep trying to isolate the problem to identify what exactly is causing the issue.

Christopher_Bishop · September 1, 2014, 3:21pm

In TP you can change the output of the png file this combined with image-padding/border/inner-padding etc. is more than likely your problem.

bjsorrentino · August 20, 2014, 8:35pm

Hi @mambostudio,

Can you post your code where you set up the image sheet for one of these sprites?

Thanks,

Brent

mambostudio · August 20, 2014, 9:00pm

Of course, there is an example. I use this same pattern in several places.

local startSheetInfo = require('spritesheets.start.start') local startSheet = graphics.newImageSheet("images/start/start.png", startSheetInfo:getSheet() ) function lyt\_start.showLogo() local img = display.newImage( startSheet, startSheetInfo:getFrameIndex("logo") ) img.x = contentWidth\*.5 img.y = 115 return img end

bjsorrentino · August 20, 2014, 9:27pm

Hi @mambo,

First thing is that you should be using “display.newImageRect()” to display images that are dynamically selected based on the device. There may be other things to check as well, but please start with this.

Brent

bjsorrentino · August 20, 2014, 9:27pm

Link:

http://docs.coronalabs.com/api/library/display/newImageRect.html

mambostudio · August 20, 2014, 10:53pm

Hi, thanks for your reply.

I was using newImage because I saw that on a Texture Packer tutorial. Now I’ve tried with newImageRect, but unfortunately the problem continues. I used the code below to test:

local startSheetInfo = require('spritesheets.start.start') local startSheet = graphics.newImageSheet("images/start/start.png", startSheetInfo:getSheet() ) function lyt\_start.showBackground() local frame = startSheetInfo:getFrameIndex("bg") local img = display.newImageRect( startSheet, frame, startSheetInfo:getSheet().frames[frame].width, startSheetInfo:getSheet().frames[frame].height ) img.x = display.contentCenterX img.y = display.contentCenterY return img end