imagesheet and layout issues

Solar2D General Questions/Discussion
#1

I am trying to create a puzzle game. I successfully created a prototype using my image assets from my iOS native version. It works great across all devices in the simulator but because I chose to only use iPad 3 resolution assets (to keep the best image quality and avoid having to code every resolution by hand) I am using 29.4MB texture ram regardless of device.

I am looking at optimizing this, and ideally use assets for each device without having to code everything by hand. I started playing around with image sheets, and dramatically decreased the amount of memory required, but ran into some issues.

The way I initially made my prototype is to create a table with the piece name (used to map to the correct file), the image dimensions, and the correct X/Y position for when the piece should “lock”. I have a display rectangle as my furthest background, this gives the canvas a color. I then loaded my “map” file that shows the outline of the puzzle and each piece (it is not a jigsaw, but shapes). This was a B&W transparent PNG file (2048x1536). I already have all the image assets in 4 resolutions and all the x/y coordinates from the iOS version of the game. If I use TopLeftRefererencePoint, everything lines up perfectly.

When using ImageSheets, the first thing I did was to load the map to fill the screen. I am using _W, _H for the size. When I do this, it does not fit the same way it did as an image. Because the transparency was removed, it no longer fits properly. I could load this file as a regular image but now I am stuck with a full size image again and I don’t think different sizes will line up correctly unless I use different sizes for everything, then I have to use custom x/y position for the “correct target” spot for each image individually,

Is there a better way to do all this, preferably using the benefits of imageSheets at least for the pieces and optimizing the texture memory without having to figure out x/y position for 4 images for each of the 200+ puzzles and all future ones?
[import]uid: 160288 topic_id: 32544 reply_id: 332544[/import]

#2

Hello,
Did you configure dynamic image picking in your config.lua file? You don’t need to hand-code much if you follow that method… Corona does most of the work under the hood.

Best regards,
Brent [import]uid: 9747 topic_id: 32544 reply_id: 129423[/import]

#3

Yes, if you mean

imageSuffix = {
["@2x"] = 2,
["@4x"] = 4
}

I have it picking the correct images, the problem is the image is 2048x1536 with transparency, previous if I used top left reference point, and loaded the image, everything lined up and I was able to use my existing x,y coordinates from the iOS native app. The puzzle pieces land fit perfectly with this map file.

Map File: https://dl.dropbox.com/u/5143353/cut.png
Imagesheet: https://dl.dropbox.com/u/5143353/pieces.png

If I use an image sheet so I can decrease the size, when I load the map file from the image, it tries to take up the entire screen, if I use 0,0 top left reference point with _W, _H size (Like I used when I loaded the file directly) and now the pieces don’t line up, and it is cut off. [import]uid: 160288 topic_id: 32544 reply_id: 129428[/import]

#4

I just configured my project to be 320x480, and 1x, 2x, 4x assets in the images folder. Changed all my code to reference 1x resolution when calling imageRect for the pieces. I am using x,y coordinates for the correct point as per the 1x images.

Everything works perfectly for iphone, iphone retina, ipad, all the android devices, but the iPad retina doesn’t line up. Everything else worked flawless, I tried ZoomEven and ZoomStretch.

I’m baffled by this, everything else scaled perfectly but the iPad retina, I have 4x files in their that are aligned perfectly. In fact, when I used just iPad retina images and let it scale down to all the devices, that worked perfectly for all devices, even the iPad Retina.

I can confirm it is loading the iPad Retina assets as the texture ram is showing the same size when I built with just the iPad retina images.

iPad Retina: https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2012.26.04%20AM.png
[import]uid: 160288 topic_id: 32544 reply_id: 129432[/import]

#5

If I remove the 4x image assets, it works perfectly on the iPad Retina using the iPhone Retina (I assume) image assets. Everything lines up perfectly, yet when using the 4x assets, it won’t line up (but they line up fine if I make an iPad Retina project and use them specifically). [import]uid: 160288 topic_id: 32544 reply_id: 129434[/import]

#6

Hello,
Did you configure dynamic image picking in your config.lua file? You don’t need to hand-code much if you follow that method… Corona does most of the work under the hood.

Best regards,
Brent [import]uid: 9747 topic_id: 32544 reply_id: 129423[/import]

#7

Yes, if you mean

imageSuffix = {
["@2x"] = 2,
["@4x"] = 4
}

I have it picking the correct images, the problem is the image is 2048x1536 with transparency, previous if I used top left reference point, and loaded the image, everything lined up and I was able to use my existing x,y coordinates from the iOS native app. The puzzle pieces land fit perfectly with this map file.

Map File: https://dl.dropbox.com/u/5143353/cut.png
Imagesheet: https://dl.dropbox.com/u/5143353/pieces.png

If I use an image sheet so I can decrease the size, when I load the map file from the image, it tries to take up the entire screen, if I use 0,0 top left reference point with _W, _H size (Like I used when I loaded the file directly) and now the pieces don’t line up, and it is cut off. [import]uid: 160288 topic_id: 32544 reply_id: 129428[/import]

#8

I just configured my project to be 320x480, and 1x, 2x, 4x assets in the images folder. Changed all my code to reference 1x resolution when calling imageRect for the pieces. I am using x,y coordinates for the correct point as per the 1x images.

Everything works perfectly for iphone, iphone retina, ipad, all the android devices, but the iPad retina doesn’t line up. Everything else worked flawless, I tried ZoomEven and ZoomStretch.

I’m baffled by this, everything else scaled perfectly but the iPad retina, I have 4x files in their that are aligned perfectly. In fact, when I used just iPad retina images and let it scale down to all the devices, that worked perfectly for all devices, even the iPad Retina.

I can confirm it is loading the iPad Retina assets as the texture ram is showing the same size when I built with just the iPad retina images.

iPad Retina: https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2012.26.04%20AM.png
[import]uid: 160288 topic_id: 32544 reply_id: 129432[/import]

#9

If I remove the 4x image assets, it works perfectly on the iPad Retina using the iPhone Retina (I assume) image assets. Everything lines up perfectly, yet when using the 4x assets, it won’t line up (but they line up fine if I make an iPad Retina project and use them specifically). [import]uid: 160288 topic_id: 32544 reply_id: 129434[/import]

#10

Hi again,
Can you isolate and copy/paste your code in which you declare and configure your image sheet? Also where you place the images to the screen? I just want to check a few things in the code…

Finally, can you add some kind of temporary visual reference to your various image sheets, such that you can confirm it’s picking the correct resolution in each case? I know you mentioned the texture memory, but if you can just put a number or something on the sheets/pieces, it helps confirm the correct one is being used. I usually just drop some numbers on top of the image… 1x, 2x, 4x, whatever.

Thanks,
Brent
[import]uid: 9747 topic_id: 32544 reply_id: 129543[/import]

#11

I have two issues. For my ‘pieces’, imagesheet is working like a champ. It dropped my memory usage by 32%. But when I use it for the “map” image, either alone or combing with the pieces, when it recreates the image (I am using texture packer) it doesn’t honor the original size (with the transparency pixels) and instead tries to fill the screen with just the “meat” of the image.

This problem is less critical but would like to solve it for future projects and optimizing this project.

Easiest way is to just show these screenshots.

Without ImageSheet:
https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2011.07.03%20AM.png

With ImageSheet:
https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2011.05.36%20AM.png

What I want to do ideally:
https://dl.dropbox.com/u/5143353/pieces.png

The imageSheet for the map “cut” piece:

SheetInfo.sheet =  
{  
 frames = {  
  
 {  
 -- cut  
 x=8,  
 y=8,  
 width=1236,  
 height=1120,  
  
 sourceX = 408,  
 sourceY = 156,  
 sourceWidth = 2048,  
 sourceHeight = 1536  
 },  
 },  
  
 sheetContentWidth = 1252,  
 sheetContentHeight = 1136  
}

[import]uid: 160288 topic_id: 32544 reply_id: 129562[/import]

#12

The second issue is more critical and I’m pulling my hair out on.

I created a 1x, 2x, 4x imagesheet with just the pieces, and adjusted my code to use this. It works excellent, flawless on all devices including Android.

Since problem #1, I am forced to call the map “cut” image directly and this is where things get crazy. I managed to include 1x, 2x, and 4x imageSheets with all the pieces and 1x, 2x, 4x direct image for the “map”. Every device works flawlessly except the iPad Retina. I get the following output:

https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2012.26.04%20AM.png

Every other device in simulator works great, and scales perfectly with zoomEven (although I tried all 4 options).

What is wierd, when I made the project with just iPad Retina size images, and let it scale downwards, every device worked flawless, even the iPad retina. With those same image assets as my 4x, it doesn’t work. I get the problem above, this seems more to be related with the map than the pieces themselves (which are in an imagesheet, but they seem to line up perfectly, but the map file is stretched sideways). If I remove the 4x assets and allow it to upscale the 2x assets with no code changes, it all works perfectly.

The code I am using is:

Load Pieces Imagesheet

local piecesSheetInfo = require("images.pieces")   
local piecesImageSheet = graphics.newImageSheet( "images/pieces.png", piecesSheetInfo:getSheet() )

Show “map”

local imgMap = display.newImageRect("images/cut.png", \_W, \_H)  
imgMap.setReferencePoint(imgMap, display.TopLeftReferencePoint)  
imgMap.x, imgMap.y = 0,0  
piecesGroup:insert(imgMap)

Show pieces

for i=1, 7 do  
 local piece = display.newImageRect(piecesImageSheet, piecesSheetInfo:getFrameIndex(pieces[i].color), pieces[i].imgSizeW, pieces[i].imgSizeH)  
 piece:setReferencePoint( display.TopLeftReferencePoint)

This code works great on iPhone, iPad, Android, except for the iPad Retina.

I have almost exact same code prior with using just the 4x assets and no image replacement and it worked great on all devices, but isn’t ideal due to efficiency.
[import]uid: 160288 topic_id: 32544 reply_id: 129565[/import]

#13

Looks like problem #1 got thrown into the moderation queue, and will (hopefully) show up shortly but will be out of order. Problem #2 above is the more critical issue. [import]uid: 160288 topic_id: 32544 reply_id: 129566[/import]

#14

Hi again,
Can you isolate and copy/paste your code in which you declare and configure your image sheet? Also where you place the images to the screen? I just want to check a few things in the code…

Finally, can you add some kind of temporary visual reference to your various image sheets, such that you can confirm it’s picking the correct resolution in each case? I know you mentioned the texture memory, but if you can just put a number or something on the sheets/pieces, it helps confirm the correct one is being used. I usually just drop some numbers on top of the image… 1x, 2x, 4x, whatever.

Thanks,
Brent
[import]uid: 9747 topic_id: 32544 reply_id: 129543[/import]

#15

I have two issues. For my ‘pieces’, imagesheet is working like a champ. It dropped my memory usage by 32%. But when I use it for the “map” image, either alone or combing with the pieces, when it recreates the image (I am using texture packer) it doesn’t honor the original size (with the transparency pixels) and instead tries to fill the screen with just the “meat” of the image.

This problem is less critical but would like to solve it for future projects and optimizing this project.

Easiest way is to just show these screenshots.

Without ImageSheet:
https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2011.07.03%20AM.png

With ImageSheet:
https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2011.05.36%20AM.png

What I want to do ideally:
https://dl.dropbox.com/u/5143353/pieces.png

The imageSheet for the map “cut” piece:

SheetInfo.sheet =  
{  
 frames = {  
  
 {  
 -- cut  
 x=8,  
 y=8,  
 width=1236,  
 height=1120,  
  
 sourceX = 408,  
 sourceY = 156,  
 sourceWidth = 2048,  
 sourceHeight = 1536  
 },  
 },  
  
 sheetContentWidth = 1252,  
 sheetContentHeight = 1136  
}

[import]uid: 160288 topic_id: 32544 reply_id: 129562[/import]

#16

The second issue is more critical and I’m pulling my hair out on.

I created a 1x, 2x, 4x imagesheet with just the pieces, and adjusted my code to use this. It works excellent, flawless on all devices including Android.

Since problem #1, I am forced to call the map “cut” image directly and this is where things get crazy. I managed to include 1x, 2x, and 4x imageSheets with all the pieces and 1x, 2x, 4x direct image for the “map”. Every device works flawlessly except the iPad Retina. I get the following output:

https://dl.dropbox.com/u/5143353/Screen%20Shot%202012-11-01%20at%2012.26.04%20AM.png

Every other device in simulator works great, and scales perfectly with zoomEven (although I tried all 4 options).

What is wierd, when I made the project with just iPad Retina size images, and let it scale downwards, every device worked flawless, even the iPad retina. With those same image assets as my 4x, it doesn’t work. I get the problem above, this seems more to be related with the map than the pieces themselves (which are in an imagesheet, but they seem to line up perfectly, but the map file is stretched sideways). If I remove the 4x assets and allow it to upscale the 2x assets with no code changes, it all works perfectly.

The code I am using is:

Load Pieces Imagesheet

local piecesSheetInfo = require("images.pieces")   
local piecesImageSheet = graphics.newImageSheet( "images/pieces.png", piecesSheetInfo:getSheet() )

Show “map”

local imgMap = display.newImageRect("images/cut.png", \_W, \_H)  
imgMap.setReferencePoint(imgMap, display.TopLeftReferencePoint)  
imgMap.x, imgMap.y = 0,0  
piecesGroup:insert(imgMap)

Show pieces

for i=1, 7 do  
 local piece = display.newImageRect(piecesImageSheet, piecesSheetInfo:getFrameIndex(pieces[i].color), pieces[i].imgSizeW, pieces[i].imgSizeH)  
 piece:setReferencePoint( display.TopLeftReferencePoint)

This code works great on iPhone, iPad, Android, except for the iPad Retina.

I have almost exact same code prior with using just the 4x assets and no image replacement and it worked great on all devices, but isn’t ideal due to efficiency.
[import]uid: 160288 topic_id: 32544 reply_id: 129565[/import]

#17

Looks like problem #1 got thrown into the moderation queue, and will (hopefully) show up shortly but will be out of order. Problem #2 above is the more critical issue. [import]uid: 160288 topic_id: 32544 reply_id: 129566[/import]

#18

This is a very strange issue…

I hesitate to play the “blame game”, but this could be an issue with TexturePacker… seriously. I don’t know how it manages things, and I don’t know how that “cut” function works. Just saying that when you use a 3rd-party tool outside Corona, you’re susceptible to what that product does within Corona. Considering this seems like a “packing” or “clipping” issue, it might very well be TexturePacker which is the culprit.

Also, I should note that with image sheets, you don’t need to use the “newImageRect()” API and specify width and height. Those parameters are specified in the image sheet configuration and they are used by the standard “newImage()” API for full resolution-dynamic picking. I never use “newImageRect()” anymore, since image sheets were rolled out earlier this year.

Brent [import]uid: 9747 topic_id: 32544 reply_id: 129621[/import]

#19

I tried without Rect and x,y, the problem is it pulls the content back as if it was just the image in the middle, ignoring the transparent pixels clipped.

Here is the entire sheet information for that image by itself (as created by Texture Packer). The image is 2048x1536 (iPad retina) but lots of transparent pixels around the “core image” but without those transparent pixels restored I cannot align it back to where I had everything. I depend on seeing it full size and in the right location.

I see the sourcewidth/height, and assume that would be use to “reconstruct” the transparent pixels.

[code]
local SheetInfo = {}

SheetInfo.sheet =
{
frames = {

{
– cut
x=8,
y=8,
width=1236,
height=1120,

sourceX = 408,
sourceY = 156,
sourceWidth = 2048,
sourceHeight = 1536
},
},

sheetContentWidth = 1252,
sheetContentHeight = 1136
}

SheetInfo.frameIndex =
{

[“cut”] = 1,
}

function SheetInfo:getSheet()
return self.sheet;
end

function SheetInfo:getFrameIndex(name)
return self.frameIndex[name];
end

return SheetInfo
[/code] [import]uid: 160288 topic_id: 32544 reply_id: 129622[/import]

#20

Another thing, I tried storing the pieces in an imagesheet, when I loaded them via newImage they were too big, when I used newImageRect, it worked perfectly (for the pieces), still can’t get the map working right. [import]uid: 160288 topic_id: 32544 reply_id: 129623[/import]