TexturePacker, spritsheets and @2x images...

TexturePacker
#1

Hello.

To build all my spritesheets, I use TexturePacker. My plan is to support 320x480 and 640x960 resolutions on the iPhone.

My config is pretty simple and looks like this:
[lua]application = {
content = {
width = 320,
height = 480,
scale = “letterBox”,
fps = 30,

imageSuffix = {
["@2x"] = 2,
}
},
}[/lua]

what I do is build the 640x960 sprites first, saving the png with the suffix @2x and then use TP to scale it to half size and save it with the normal file name.
But when testing on simulator, it always uses the normal images and not the @2x spritesheets.

My code to loading and using the sheets is like this:
[lua]–get all sprite data
–script generated by texturepacker
local heroSheetData = require(“scripts.herosheet”);
local heroData = heroSheetData.getSpriteSheetData();
–sheet created by texturepacker
local heroSheet = sprite.newSpriteSheetFromData( “images/herosheet.png”, heroSheetData.getSpriteSheetData() );
local heroSet = sprite.newSpriteSet(heroSheet, 1, 16);
–prepare animations
sprite.add(heroSet, “death”, 1, 3, 800, 1);
sprite.add(heroSet, “falling”, 4, 1, 1, 1);
sprite.add(heroSet, “jumping”, 5, 1, 1, 1);
sprite.add(heroSet, “sliding”, 6, 1, 1, 1);
sprite.add(heroSet, “rolling”, 7, 3, 200, 0);
sprite.add(heroSet, “running”, 10, 7, 400, 0);[/lua]

(Seems I missed the existence of the 3rd Party Tools and Services sub-forum. It doesn’t seem to be updated often though, if a moderator decides to move it then I guess it’s ok…) [import]uid: 136402 topic_id: 30336 reply_id: 330336[/import]

#2

Your code looks good. I would just make sure when you bring in your 640x960 images into texturepacker and export them make sure you select auto sd. You then need to make sure the png and the lua datasheet both end in @2x and then it will do the sd ones for you. If you did all that and are still having issues, i would test the paths and make sure they are all good. [import]uid: 26491 topic_id: 30336 reply_id: 121604[/import]

#3

I “discovered” the AutoSD feature and it’s a real time saver, it’s great!

My problem is still unsolved though, changing devices in the simulator still loads the low-res sprites. I don’t have a real device to test with yet.

I guess I could probably just check display.contentWidth or something similar and then load the appropriate files, but that kinda defeats the purpose of making a config.lua ;p [import]uid: 136402 topic_id: 30336 reply_id: 121693[/import]

#4

I’m still new to this, but your code looks good to me from what i can see. I’m not sure what you are doing after the sprite.add line, but here is the code that i am using and that i know works. May be of some help.

local enemyData = require("resources.sprite\_sheets.guy") local enemySpriteSheet = sprite.newSpriteSheetFromData( "resources/sprite\_sheets/guy.png", enemyData.getSpriteSheetData() ) local enemySpriteSet = sprite.newSpriteSet(enemySpriteSheet, 1, 24) sprite.add(enemySpriteSet,"run", 1, 10, 1000, 0) sprite.add(enemySpriteSet,"walk", 11, 14, 1000, 0) local enemy = sprite.newSprite(enemySpriteSet) enemy:prepare("walk") enemy:play() [import]uid: 26491 topic_id: 30336 reply_id: 121699[/import]

#5

Try changing the ["@2x"] = 2, to a lower value like ["@2x"] = 1.8.

[import]uid: 94868 topic_id: 30336 reply_id: 121710[/import]

#6

Sadly, no change.

I used print to see the values of display.contentWidth display.contentHeight display.viewableContentWidth and display.viewableContentHeight during gameplay. Their values are always 480x320 no matter what system I’m running the simulator on.

I’m using the latest daily build and director to manage my screens if that’s of any help. [import]uid: 136402 topic_id: 30336 reply_id: 121750[/import]

#7

okay looking at it again, how about changing “letterBox” to “letterbox”.

The display.contentWidth and display.contentHeight will always display the height/width you define in the config.lua. [import]uid: 94868 topic_id: 30336 reply_id: 121753[/import]

#8

nope, still nothing, I also tested it on my windows machine.

“The display.contentWidth and display.contentHeight will always display the height/width you define in the config.lua.”

I use that data to help me locate other elements in the game screen. Does that mean that when/if I get this working, even if I am using the higer res graphics Corona will still think that I’m on a lower screen resolution?
[import]uid: 136402 topic_id: 30336 reply_id: 121809[/import]

#9

Oh wait. You are using the older sprite api. That doesn’t do the dynamic scaling. Use the newer sprite api, it is a lot easier.

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

Well it knows you’re on a higher resolution screen, but it bases all of its values according to the height/width you defined in the config. So it scales all of the values to match the screen. And it swaps in the higher resolution images when the scale goes above the values you declared in the config.

[import]uid: 94868 topic_id: 30336 reply_id: 121838[/import]

#10

Whoa, one would think Ansca would have updated their articles to account for this. I finally managed to load the high res textures… But it’s not working right…

2 problems arose: 1. It seems that it’s not using the @2x script, because animations are out of place. And 2. The higher res graphics are bigger than they should be (meaning, the hd images are being scaled up).

code for loading the spritesheet now looks like

 --get all sprite data  
 local oldStyleData = require("scripts.catsheet");  
 local oldSpriteSheetData = oldStyleData.getSpriteSheetData();  
 local options = { spriteSheetFrames = oldSpriteSheetData.frames };  
 local heroSheet = graphics.newImageSheet( "images/catsheet.png", options );  
 --prepare animations  
 local sequenceData = {  
 { name="death", start=1, count=3, time=800, loopCount=1 },  
 { name="falling", start=4, count=1, time=1, loopCount=1 },  
 { name="jumping", start=5, count=1, time=1, loopCount=1 },  
 { name="sliding", start=6, count=1, time=1, loopCount=1 },  
 { name="rolling", start=7, count=3, time=200, loopCount=0 },  
 { name="running", start=10, count=7, time=400, loopCount=0 }  
 };  
 --start everything  
 local hero = display.newSprite( heroSheet, sequenceData );  
 hero:setSequence("running");  
 hero:play();

config.lua remains unchanged. [import]uid: 136402 topic_id: 30336 reply_id: 121881[/import]

#11

I am not exactly sure what you mean by the @2x script, but I believe Corona will always use the data from the initial lua file; In other words if you have a 1x and a 2x file (with the 1x file not actually having the 1x suffix), Corona will base all of the coordinates off of the data in the 1x lua file that TexturePacker produced. So when it uses the images from the @2x sprite sheet, it is basing the height,width,x and y position off of the data in the 1x file. So if the two sprite sheets are not scaled correctly, your @2x images will be off.

So if your maximum resolution images are @2x, you images’ dimensions should be divisible by 2. Otherwise, when it produces the 1x sprite sheet, it will have 1/2 a pixel and it will either round up or down and then your spacing will be off between the two sprite sheets. Also make sure your border padding and shape padding are changed also.

I think I read somewhere that Texture Packer might be addressing the issue or has some additional code (or maybe that is what you were referring to?) Or maybe it is in the beta. No idea and haven’t looked into it.

And not sure about your second problem of the items being scaled up.

[import]uid: 94868 topic_id: 30336 reply_id: 122140[/import]

#12

Your code looks good. I would just make sure when you bring in your 640x960 images into texturepacker and export them make sure you select auto sd. You then need to make sure the png and the lua datasheet both end in @2x and then it will do the sd ones for you. If you did all that and are still having issues, i would test the paths and make sure they are all good. [import]uid: 26491 topic_id: 30336 reply_id: 121604[/import]

#13

I “discovered” the AutoSD feature and it’s a real time saver, it’s great!

My problem is still unsolved though, changing devices in the simulator still loads the low-res sprites. I don’t have a real device to test with yet.

I guess I could probably just check display.contentWidth or something similar and then load the appropriate files, but that kinda defeats the purpose of making a config.lua ;p [import]uid: 136402 topic_id: 30336 reply_id: 121693[/import]

#14

I’m still new to this, but your code looks good to me from what i can see. I’m not sure what you are doing after the sprite.add line, but here is the code that i am using and that i know works. May be of some help.

local enemyData = require("resources.sprite\_sheets.guy") local enemySpriteSheet = sprite.newSpriteSheetFromData( "resources/sprite\_sheets/guy.png", enemyData.getSpriteSheetData() ) local enemySpriteSet = sprite.newSpriteSet(enemySpriteSheet, 1, 24) sprite.add(enemySpriteSet,"run", 1, 10, 1000, 0) sprite.add(enemySpriteSet,"walk", 11, 14, 1000, 0) local enemy = sprite.newSprite(enemySpriteSet) enemy:prepare("walk") enemy:play() [import]uid: 26491 topic_id: 30336 reply_id: 121699[/import]

#15

Try changing the ["@2x"] = 2, to a lower value like ["@2x"] = 1.8.

[import]uid: 94868 topic_id: 30336 reply_id: 121710[/import]

#16

When I say “the @2x script” I talk about the script generated by Texture Packer. For example, if I create a spritesheet called heroanimations, and I use the AutoSD, then i get 4 files.

heroanimations.png
heroanimations.lua
heroanimations@2x.png
heroanimations@2x.lua

What I suspect is that even if Corona loads the higher res sprites, it still uses the original lua script. Causing the coordinates to be wrong and causing the messy animations. I upgraded to Texture Packer beta (that has a reworked AutoSD feature) but the issue is still the same.

I really don’t know what could be wrong here… [import]uid: 136402 topic_id: 30336 reply_id: 122355[/import]

#17

Sadly, no change.

I used print to see the values of display.contentWidth display.contentHeight display.viewableContentWidth and display.viewableContentHeight during gameplay. Their values are always 480x320 no matter what system I’m running the simulator on.

I’m using the latest daily build and director to manage my screens if that’s of any help. [import]uid: 136402 topic_id: 30336 reply_id: 121750[/import]

#18

okay looking at it again, how about changing “letterBox” to “letterbox”.

The display.contentWidth and display.contentHeight will always display the height/width you define in the config.lua. [import]uid: 94868 topic_id: 30336 reply_id: 121753[/import]

#19

nope, still nothing, I also tested it on my windows machine.

“The display.contentWidth and display.contentHeight will always display the height/width you define in the config.lua.”

I use that data to help me locate other elements in the game screen. Does that mean that when/if I get this working, even if I am using the higer res graphics Corona will still think that I’m on a lower screen resolution?
[import]uid: 136402 topic_id: 30336 reply_id: 121809[/import]

#20

Oh wait. You are using the older sprite api. That doesn’t do the dynamic scaling. Use the newer sprite api, it is a lot easier.

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

Well it knows you’re on a higher resolution screen, but it bases all of its values according to the height/width you defined in the config. So it scales all of the values to match the screen. And it swaps in the higher resolution images when the scale goes above the values you declared in the config.

[import]uid: 94868 topic_id: 30336 reply_id: 121838[/import]