Dynamic Sprite sheets

vik_b_it · December 30, 2012, 7:01am

Guys,

Question about dynamic sprite sheets… I am developing for Ipad1 + 2 and Ipad 3.

I am using image sheets.

My sprite sheet is a complex sheet ie (the following is only part of it)

  
 frames =  
 {  
 {  
 x = 0, y = 0, width = 200, height = 83  
 },  
 {  
 x = 200, y = 0, width = 200, height = 83  
 },  
 {  
 x = 0, y = 166, width = 200, height = 84  
 },  
 {  
 x = 200, y = 166, width = 200, height = 84  
 },

works great on the ipad… but when I change the view to Ipad retina, the dynamic scaling automatically picks up the 2x image sheet. But the sprite does not work properly as the sprite sheet config (above) will be out of synch… the sprite sheet data is in a file called data.lua… do I need to set up another file called data2x.lua?

or is there another way to do this?

Thanks [import]uid: 67619 topic_id: 34423 reply_id: 334423[/import]

bjsorrentino · December 30, 2012, 10:50am

Hi @vik_b_it,
You don’t need to create two data files, fortunately. To help solve this, I’d need to see your full “config.lua” setup, and also more of your image sheet setup and “data.lua” files. Can you crop out the “essential” parts of these and post them in code here? I have a feeling that some setting is off in these files somewhere…

Thanks,
Brent
[import]uid: 200026 topic_id: 34423 reply_id: 136799[/import]

vik_b_it · December 30, 2012, 3:42pm

Brent,

Thank you… really appreciate your help on this one Brent… The code is below
Config file

application =  
{  
 content =  
 {  
 width = 1024,  
 height = 768,  
 scale = "zoomEven", -- zoom to fill screen, possibly cropping edges  
  
 imageSuffix =  
 {  
 ["@2x"] = 2  
  
 },  
  
 },  
}

main.lua

  
display.setStatusBar( display.HiddenStatusBar )  
require "sprite"  
local definitions = require ('data')  
  
local imageSheet = graphics.newImageSheet("dog\_sleeping.png", definitions.options )  
local character = display.newSprite( imageSheet, definitions.sequenceData )  
character.x = display.contentWidth/2  
character.y = display.contentHeight/2  
character:setSequence( "left")   
character:play()

data.lua

[code]

local zombie_data = {

options =
{

frames =
{
{
x = 0, y = 0, width = 200, height = 83
},
{
x = 200, y = 0, width = 200, height = 83
},
{
x = 0, y = 166, width = 200, height = 84
},
{
x = 200, y = 166, width = 200, height = 84
},
{
x = 400, y = 334, width = 200, height = 85
},
{
x = 0, y = 419, width = 200, height = 85
},
{
x = 400, y = 589, width = 200, height = 86
},
{
x = 200, y = 419, width = 200, height = 85
},
{
x = 400, y = 419, width = 200, height = 85
},
{
x = 400, y = 166, width = 200, height = 84
},
{
x = 0, y = 250, width = 200, height = 84
},
{
x = 400, y = 0, width = 200, height = 83
},
{
x = 0, y = 83, width = 200, height = 83
},
{
x = 200, y = 83, width = 200, height = 83
},
{
x = 200, y = 250, width = 200, height = 84
},
{
x = 400, y = 250, width = 200, height = 84
},
{
x = 0, y = 504, width = 200, height = 85
},
{
x = 200, y = 504, width = 200, height = 85
},
{
x = 0, y = 675, width = 200, height = 86
},
{
x = 400, y = 504, width = 200, height = 85
},
{
x = 0, y = 589, width = 200, height = 85
},
{
x = 200, y = 589, width = 200, height = 85
},
{
x = 0, y = 334, width = 200, height = 84
},
{
x = 200, y = 334, width = 200, height = 84
},
{
x = 400, y = 83, width = 200, height = 83
},

},

– The params below are optional; used for dynamic resolution support

sheetContentWidth = 782, – width of original 1x size of entire sheet
sheetContentHeight = 782 – height of original 1x size of entire sheet

},

sequenceData = {
{ name=“idle”, frames = {1}, time = 1000, loopCount = 1 },
{ name=“left”, start=1, count=25, time = 2000, loopCount = 0 },

}

return zombie_data

[/code] [import]uid: 67619 topic_id: 34423 reply_id: 136830[/import]

bjsorrentino · December 30, 2012, 9:01pm

Hi again,
Glad to help. I notice a few things at first glance…

you are "require"ing the old, depreciated “.sprite” library, but you’re using the newer methods which are tied into the display library. You don’t need to require the old sprite library, and in fact, you shouldn’t use it anymore, as it will receive no support or updates in the future.
I notice you only have one image suffix defined in your config.lua. You’ll need to define a suffix for your various displays to tell Corona to choose the proper sheet. Check out Rob’s tutorial to configure this properly:
http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
As for new sprite methods and APIs, you might find my tutorial useful:
http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/

Hope this helps!
Brent
[import]uid: 200026 topic_id: 34423 reply_id: 136860[/import]

vik_b_it · December 30, 2012, 9:58pm

Brent,

Thanks for the help

I got rid of the old sprite library line… thanks

I updated my config file as follows,

  
application =  
{  
 content = {   
  
 fps = 60, width = 1024, height = 768, scale = "letterbox", xAlign = "center", yAlign = "center",  
  
 imageSuffix = {  
 ["@1"] = 1.0,  
 ["@2"] = 2.0,  
  
 }  
 }  
}

then I added the following images
dog_sleeping.png
dog_sleeping@1x.png
dog_sleeping@2x.png

where the first two images are exactly the same, while the last image is double the size.

Now the animation seem to works for the Ipad retina… but it only loads the dog_sleeping.png file… it does not touch the 2x file at all (I put a small dot in the dog_sleeping.png to see which one loads up)

any pointers?

do you have a sample you can post? where you have a 1x and a 2x sprite sheet?

Thanks again
[import]uid: 67619 topic_id: 34423 reply_id: 136867[/import]

bjsorrentino · December 30, 2012, 10:12pm

Hi,
Your image suffix definitions need to match your actual file suffixes. I see you defined “@1” and “@2” in your config.lua, but named your files “@1x” and “@2x”… adding the “x” in each case. The suffix can be anything you want… even “@this-is-my-big-retina-sheet” if you wanted it that way. But, you must match the definitions and file suffixes.

Hope this solves it… keep me posted.

Brent [import]uid: 200026 topic_id: 34423 reply_id: 136868[/import]

vik_b_it · December 30, 2012, 10:23pm

Brent,

Thanks for that…

I renamed my files to

dog_sleeping@1.png
dog_sleeping@2.png

It still doesnt load up the @2 file. When I go to view as Ipad it loads the dog_sleeping.png file then when I change to view as ipad retina it loads the dog_sleeping@1.png file. Shouldn’t it load the dog_sleeping@2.png file for the ipad retina?

thanks again for your help [import]uid: 67619 topic_id: 34423 reply_id: 136869[/import]

bjsorrentino · December 30, 2012, 10:31pm

Hmmm… what is the total sheet size in pixels for both the @1 and @2 sheets? [import]uid: 200026 topic_id: 34423 reply_id: 136870[/import]

vik_b_it · December 30, 2012, 10:38pm

dog_sleeping@1.png - 782 X 782
dog_sleeping@2.png - 1532 X 1532
[import]uid: 67619 topic_id: 34423 reply_id: 136871[/import]

vik_b_it · December 30, 2012, 10:39pm

I can send you the files through email if it helps… [import]uid: 67619 topic_id: 34423 reply_id: 136872[/import]

bjsorrentino · December 30, 2012, 10:51pm

OK, a couple more things and then we’ll just resolve it by e-mail (you can send me the files).

First, add this line of code to your main.lua file and let me know what you see in the Terminal on various device selections in the Simulator. This basically shows the “suffix” value for the device.

print( 1 / display.contentScaleX, 1 / display.contentScaleY )

Second, what’s in your build.settings file? Did you define this as a landscape-oriented app? It appears you are going for that based on you config.lua width and height definitions.

Solution is getting closer!
Brent [import]uid: 200026 topic_id: 34423 reply_id: 136873[/import]

vik_b_it · December 31, 2012, 7:09am

Brent,

I just realised that my config was wrong… I had my width set to 1024 and height set to 768 and I remembered just now that I need to set it up the other way…

so the width = 768 and height = 1024

This gives me the correct suffixs

ipad = 1 1
ipad retina = 2 2

and now when I switch to the ipad retina the correct sprite sheet gets loaded, but still the frames jitter around… so it does not look right… works fine for Ipad…

yes I am using landscapeRight for my build.setings file…

Vik

[import]uid: 67619 topic_id: 34423 reply_id: 136894[/import]

vik_b_it · December 31, 2012, 8:15am

Brent,

here is an interesting thing, when I tried using TexturePakerGUI for my sprites…

it actually has a warning that comes up and says…

There seems to be a problem with odd sized trimmed sprites in Corona SDK. Animated Sprites jitter 1px to the left and right.

Vik [import]uid: 67619 topic_id: 34423 reply_id: 136899[/import]

bjsorrentino · December 31, 2012, 9:07am

Hi Vik,
Good to hear you solved the first issue… that was my suspicion after my most recent response (switching it to “portrait” even though it’s actually a landscape app).

On issue #2, you’re using TexturePacker, yes? You said that your sheets are 782 and 1532 (square). Try telling TP to force your sheets to the Power of 2 dimensions under “size constraints” and see if that helps. Also try adjusting some of those other settings under “Layout”: border padding, shape padding, extrude, etc. I can’t remember the technical details of what each one does, but TP has a mouse-over tool tip box for each.

Brent
[import]uid: 200026 topic_id: 34423 reply_id: 136902[/import]

vik_b_it · December 31, 2012, 4:52pm

Brent,

LIke you said earlier I think we are nearly there…

Thanks again for all your help… happy new year by the way

Using TexturePacker… I finally got it to work… but… why is there always a but…

with TexturePacker it generates a data file with all the x and ys… but it also generates

SourceX
SourceY
SourceWidth
SourceHeight

if I use all of it… it looks good… but since I want to progranmatically move the sprite around
the SourceX and SourceY don’t make sense. So I delete it… and then I can notice a slight gitter which was not there when I used the SourceX and SourceY. Even when I look at the data file I can see the Source Y sometimes is higher by about 2 in some frames…

 {  
 -- dog\_sleeping\_00028  
 x=2,  
 y=612,  
 width=200,  
 height=84,  
  
 sourceX = 82,  
 sourceY = 632,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },  
 {  
 -- dog\_sleeping\_00030  
 x=2,  
 y=266,  
 width=200,  
 height=85,  
  
 sourceX = 82,  
 sourceY = 631,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },  
 {  
 -- dog\_sleeping\_00032  
 x=204,  
 y=352,  
 width=200,  
 height=85,  
  
 sourceX = 82,  
 sourceY = 631,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },  
 {  
 -- dog\_sleeping\_00034  
 x=2,  
 y=90,  
 width=200,  
 height=86,  
  
 sourceX = 82,  
 sourceY = 630,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },

So I am not sure if the issue is with my sprites and TP is trying to compensate by adding 2? or if it is something else

with the above data file… I cannot set the x and y and move the sprite around…

is there any other programs you recommend for generating sprite sheets?

Thanks again [import]uid: 67619 topic_id: 34423 reply_id: 136962[/import]

bjsorrentino · December 31, 2012, 7:02pm

Always a “but”, you’re right!

There are probably some other programs to lay out sprite sheets, but TexturePacker is considered the “standard” by many developers, and generally it does a great job. I think it might just require a few more tweaks of the settings.

I would first suggest that you remove all the padding, border, extrude, etc. from the TP configuration. That kind of stuff adds in those extra features, but unless your images go edge-to-edge (of a frame), you shouldn’t need them. If you already have a couple pixels of transparent padding around things, that extra stuff is unnecessary.

There’s also a potential bug that I have logged that seems to affect these calculated sourceX and sourceY figures on Retina iPad, and only on Retina iPad. It has something to do with Corona not properly trimming frames or maintaining the proper “source” positioning. I hope to investigate this situation upcoming in January, after the dust settles from some other potential bugs that have surfaced with Push notifications, Facebook 3.1.1, etc. This might be what’s happening on your side, and it needs to be fixed, as another user has reported it and discussed it with me.

Brent [import]uid: 200026 topic_id: 34423 reply_id: 136964[/import]

vik_b_it · December 31, 2012, 7:42pm

Brent,

So just to confirm though if the data file specifies the Sourcex and SourceY… I cannot move the sprite around using spriteobject.x and spriteobject.y

I have tweaked the setting in TP but everything I have tried so far always updates the data file where some of the frames are updated by a few pixels… I have written to the TP support to see if they can help me…

Thanks [import]uid: 67619 topic_id: 34423 reply_id: 136965[/import]

bjsorrentino · December 31, 2012, 7:49pm

Hi Vik,
Let me know what TP support says… your issue might be something on their side, or it might be that fringe Corona issue…

Brent [import]uid: 200026 topic_id: 34423 reply_id: 136966[/import]

vik_b_it · December 31, 2012, 8:35pm

Brent,

Thanks for all your help

So just to confirm though if the data file specifies the Sourcex and SourceY… I cannot move the sprite around using spriteobject.x and spriteobject.y can I?
Vik [import]uid: 67619 topic_id: 34423 reply_id: 136967[/import]

vik_b_it · January 1, 2013, 3:37am

Brent

Question regarding the co-ordinate system as I am getting a bit confused…

my sprite sheet data is as follows (snippet)

 frames = {  
  
 {  
 -- dog\_wakesup\_00000  
 x=406,  
 y=440,  
 width=200,  
 height=84,  
  
 sourceX = 82,  
 sourceY = 632,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },  
 {  
 -- dog\_wakesup\_00001  
 x=406,  
 y=440,  
 width=200,  
 height=84,  
  
 sourceX = 82,  
 sourceY = 632,  
 sourceWidth = 1024,  
 sourceHeight = 768  
 },

my main.lua file is as follows

display.setStatusBar( display.HiddenStatusBar )  
  
print( 1 / display.contentScaleX, 1 / display.contentScaleY )  
  
local definitions = require ('data')  
  
local imageSheet = graphics.newImageSheet("testing.png", definitions.options )  
local character = display.newSprite( imageSheet, definitions.sequenceData )  
character:setReferencePoint( display.CenterReferencePoint )  
  
character:setSequence( "left")   
character:play()  
  
character.x = display.contentWidth/2  
character.y = display.contentHeight/2

with me setting the x and the y values to the center of the screen I would expect the sprite to be in the middle of the screen…

however the sprite is at the bottom left… what am I missing here?

Thanks again [import]uid: 67619 topic_id: 34423 reply_id: 136978[/import]