SpriteGrabber class -SpriteSheets in 2 lines

Magenda · December 21, 2010, 1:04pm

Your feedback is always welcome.

I tend to believe that people here don’t even use spritesheets, because of the involved additional steps for preparing the spritesheets. So, it may be somewhat romantic to promote a “best practice” for universal scaling that not only *requires* everything to be in spritesheets, but also dictates every coordinate to be given as a percentage. Maybe it’s the healthiest thing in the world, but in the end Corona is more or less a middleware for people that prefer convenience (easiness) over flexibility (including myself to an extent).

Now, regarding your question, positioning is *absolute* in Corona (by default). To see how this lacks universability try the following:

Place a sprite/image/shape at coordinates (480,320), which stands for bottom right on landscape, while working with the iPhone Simulator. You now have two options for getting your sprite showing on the iPad simulator…

You either setup your config.lua to include (width=480, height=320, scaling=“letterbox”) for activating Ansca’s “Dynamic Content Scaling” and you get a properly sized sprite BUT displayed NEAR bottom right, because iPad has a different ratio to that of iPhone

OR

You delete config.lua (deactivating Dynamic Content Scaling) and then you correct the coordinate *by hand* to (1024,768) and you get your sprite at the proper position (bottom right of the screen) on iPad BUT you also get it half sized because of the double+ resolution that iPad has over iPhone (while your image stays the same).

Now can you see where “Relative Positioning” (percentages instead of absolute coordinates) can help? You don’t want to make a different build (correct coordinates) for each set of devices that have a different ratio (width/height). You only want 1 Universal build !

The solution I propose (“Adaptive Layout”), uses relative positioning to correctly place things on screen and alongside it detects the device and selectively loads the most appropriate version of your provided spritesheets to maintain same sprite sizes among ANY devices. It also corrects the absence of suited versions by scaling sprites up/down, so that you always get a sprite with a size of the same screen proportion.
[import]uid: 7356 topic_id: 3197 reply_id: 14687[/import]

Hunnenkoenig · February 2, 2011, 2:02pm

I know, I am stupid, but I don’t get it.

I did everything I’m supposed to do.

I have only ONE animation in my sprite. A coin is spinning.

How do I get it onto the screen and let it spin?

There is a description for sprite sheets with multiple animations, which I can’t use at the moment.

I get my coin to the screen, but it is not spinning, so I do something wrong, but I don’t know, how to write the code for a SINGLE animation.

Can somebody make my stupidity away, please? [import]uid: 6587 topic_id: 3197 reply_id: 20220[/import]

Magenda · February 2, 2011, 5:19pm

Hi Hunnenkoenig,

Have you read the examples in SpriteGrabber module page?
You can also see a very quick example in the first post of this thread.

If you still have issues plz post your code here so we could help you.
[import]uid: 7356 topic_id: 3197 reply_id: 20271[/import]

Hunnenkoenig · February 3, 2011, 2:29am

I have no code, because I messed around already so much, I don’t know anymore, what worked and what not.

The simplest I can find anywhere is this (from the OP),but this is an animation with two sequences. I have no two sequences.

enemy=sprites.getSprite("enemy", true, {stand={1,6,1000,0}, attack={7,6,1000,1}})

I think, I understand the sample codes if I have more sequences and more animations on one sheet, but I can’t figure out, how to do this for only one animation on one sheet.

I have a coin.lua
There are 11 png files registered in it: coin1.png - coin11.png

I have a sprite sheet named coin.

So, what is the code to get this onto my screen and animate, please?
Because the above code doesn’t work, because there are attack and stand in it and I don’t know, what to remove, because no matter how I alter this, I get all kind of error messages.

All the samples on the code exchange page are useless for me too, because all of them do things, I don’t want to do.

For me it seems, in corona everything has to be as complicated as possible.

Nobody can write examples with the simplest things. Everything is bloated with super duper extra stuff, so a newb can get lost in the first second for sure. Frustrating

EDIT:

I messed around a bit today again and I still don’t get it.
Here is the code, which gets the coin onto the screen, but doesn’t animate.

local coinSprites=grabber.grabSheet("coin") local coin=coinSprites:grabSprite("coin", true, {1,11,100,0})

the error message:

SpriteGrabber.lua:268: bad argument #-2 to ‘prepare’ (sprite.SpriteSequence expected, got nil)
stack traceback:
[C]: ?
[C]: in function ‘prepare’
EDIT 2:

Ok, I got it to work:

local coinSprites=grabber.grabSheet("coin") local coin=coinSprites:grabSprite("coin", true, {coin={1,11,100,0}}) coin:playClip("coin")

Now the question is, how do I position it and how do I add physics to it
[import]uid: 6587 topic_id: 3197 reply_id: 20336[/import]

Magenda · February 3, 2011, 4:44am

If you have difficulties to understand how to code in Corona, be sure that you will find the other choices much more complicated. For example, take a look to what you have to master just for bringing in life a simple animation in Cocos2d (which is considered as the “easy” Objective-C way).

http://www.raywenderlich.com/1271/how-to-use-animations-and-sprite-sheets-in-cocos2d

In your code, replace getSheet and getSprite with grabSheet and grabSprite. (hm… I see you already found it).

To place sprites on screen use :
spritename:show(150,200)

Physics have nothing to do with SpriteGrabber. Just be sure to have all your sprite frames in fixed (same) dimensions to eliminate artifacts and other known problems. To have fixed dimensions, don’t check the “trim” option in TexturePacker/Zwoptex.
[import]uid: 7356 topic_id: 3197 reply_id: 20348[/import]

Hunnenkoenig · February 3, 2011, 5:02am

Thanks!

I could manage it already

That cocos2d stuff is crazy [import]uid: 6587 topic_id: 3197 reply_id: 20350[/import]

ChunkyApps · February 3, 2011, 1:00pm

I’m new here and my first attempt using sprites went perfectly using your helper code! Thanks a million!
The support within the Corona community is simply amazing. [import]uid: 22392 topic_id: 3197 reply_id: 20456[/import]

Magenda · February 3, 2011, 1:39pm

@noahm26

Yes, Corona community is constantly growing and has many members that love to share useful things. I also use code snippets from other guys and their work have saved me much time. Among them is Color-to-RGB, FPS module, Director, EasingX…

Sharing is a win-win situation [import]uid: 7356 topic_id: 3197 reply_id: 20471[/import]

Hunnenkoenig · February 3, 2011, 2:03pm

A last thing, I need a little help with:

How do I rearrange the animations on layers?

It seems, my coin animation is on top of the screen above my player, but I want the coin being behind my player.

Even if I place the coin code before my player code in the lua file, the coin will be drawn over my player.

EDIT:
Got it, thanks!
I inserted my animation to the localGroup, what I didn’t do before…silly me… [import]uid: 6587 topic_id: 3197 reply_id: 20472[/import]

Magenda · February 3, 2011, 2:13pm

@Hunnenkoenig

What really matters is the precedence you follow when inserting your objects to a group.

The objects are firstly auto-inserted in a default “screen” group on creation, so if you don’t use a custom group there is also some importance in the precedence of objects creation.

You may want to read a mini tutorial I once wrote about properly using Groups in Corona:

http://developer.anscamobile.com/forum/2010/10/03/mini-code-tutorial-groups

Again, if you still have issues publish your code here for the rest to take a look.

PS: You may also want to check the new API methods: object:toFront() , object:toBack()
http://developer.anscamobile.com/reference/index/objecttofront [import]uid: 7356 topic_id: 3197 reply_id: 20478[/import]

Hunnenkoenig · February 3, 2011, 2:50pm

Thanks for the links! [import]uid: 6587 topic_id: 3197 reply_id: 20489[/import]

maxnb · February 10, 2011, 10:02am

hi, have you released 1.3 and adaptive layout? [import]uid: 13099 topic_id: 3197 reply_id: 21978[/import]

haakon · February 18, 2011, 1:16pm

Hi,

Something crashes when I run my app on a device or in the xcode simulator. No sprites created with TexturePacker and loaded with SpriteGrabber shows up. In fact, the app crashes.

On the corona simultor, however, everything works fine.

Also, declaring sprites the “corona way”, without SpriteGrabber, everything works fine in simulators and on devices.

I have targeted the problem to this: If you put the TexturePacker files (lua and png) in a sub folder, the error occurs.

I have put together a small test project for you to look at. I am not sure if this is a problem with SpriteGrabber, Corona, TexturePacker or me

Test project is here: http://mainstreamexception.com/test.zip

If you dont want to download the project, here is the code from the test.lua:
[lua]module(…, package.seeall)

function new()
local grabber = require(“SpriteGrabber”)
local gameGroup = display.newGroup()

local sprites = grabber.grabSheet(“assets/mysprite”) – ERROR BECAUSE OF SUBFOLDER
local temp = sprites:grabSprite("", true)
temp:play()

return gameGroup
end[/lua]

Thank you.

[import]uid: 21746 topic_id: 3197 reply_id: 23737[/import]

Magenda · February 19, 2011, 7:33am

@Nermion

Adaptive Layout is ready and working but I’m not very sure if I should include it in SpriteGrabber. I am going to further test it in my game and weight the value/complexity it brings before doing so.
@HaaakonL

I can reproduce the issue but I don’t see how it could be technically resolved. Subforlders were never working without issues in Corona, so I chose to not use them in my projects (thus no support in SG).

What I personally do in my current project is to name each asset I use with a prefix, depending on its nature. For example “xi-myimage.png”, “xss-myspritesheet.png”, “xa-myaudio.wav”…

So, having them all starting with “x” I see them on the bottom of my code files and they are all sorted by the next to “x” letters, by their kind. So, I have no issues with subfolders without loosing any visual convenience when inspecting my project files. [import]uid: 7356 topic_id: 3197 reply_id: 23862[/import]

haakon · February 22, 2011, 3:04am

Hi. We use folders for all audio, video, fonts and graphics and that works like a charm. And from now on we will put sprites and texturepack luas in the root folder and prefix them with x- Thanks for looking into it. [import]uid: 21746 topic_id: 3197 reply_id: 24390[/import]

amigoni · February 23, 2011, 6:00am

@Magenda. Please help. I am stuck with this combination:

TexturePacker + Sprites + Dynamic Content Scaling = NOT WORKING.

Hope you can give some advice.

Cheers [import]uid: 8192 topic_id: 3197 reply_id: 24645[/import]

Magenda · February 23, 2011, 9:13am

@amigoni

No problem. It works nicely here, even though I prefer to have Adaptive Layout (my solution) activated.

Please give me the following info:

Paste here your config.lua code

What png names do you get from TexturePacker?
How is your lua data file named?
With right click and Get Info on the pngs what dimensions do you see?
What scaling factor have you set in TP?

Do you scale your sprites from your code?
What exactly doesn’t work? What do you see as a result in iphone3 and iphone4 simulators? [import]uid: 7356 topic_id: 3197 reply_id: 24675[/import]

andreas.loew · February 23, 2011, 9:27am

@Magenda thanks for helping amigoni here.
I was just starting to look into it but I am not too familiar with corona. [import]uid: 9611 topic_id: 3197 reply_id: 24681[/import]

amigoni · February 23, 2011, 2:22pm

@Magenda.

application =  
{  
 content =  
 {  
 width = 320,  
 height = 480,  
 antialias = false,  
 scale = "letterbox",  
 imageSuffix =  
 {  
 ["@2"] = 2  
  
 }  
  
 },  
}

I used @2 but it seems to be a problem with requiring the .lua file from texture packer. Maybe the HD extension is better.

In TexturePacker I get i.e. menusprite.png, menusprite@2x.png
I have the sprite scale set to 1 in TexturePacker. I don’t do any scaling in Corona. Do I have to? It seems this might be the problem. But it seems very cumbersome.
I use

  
if display.contentScaleX == .5 then  
 sheet = "menuSprite.png"  
 else  
 sheet = "menuSprite@2x.png"  
end

This makes a good display for Retina, but everything big for 3g and of course wrong sprites since it’s using the wrong .lua file. It always uses the munuSprite.lua. I couldn’t get the menusprite@2x.lua load in the require. Corona doesn’t seem to like the @ symbol.

Thanks so much for your help. It is greatly appreciated.

@Andreas. I can’t find the way to alphabetize the .lua file. Am I missing something?

Thanks to both of you guys for all your work and help in the community. This is really a time saver.

[import]uid: 8192 topic_id: 3197 reply_id: 24753[/import]

Magenda · February 23, 2011, 3:21pm

@Amigoni

Ok. Try this in your code:

[lua]if display.contentScaleX == 1 then
sheet = “menuSprite.png”
else
sheet = “menuSprite@2x.png”
end[/lua]

This should be ok for ip3/ip4/ipad.

If you still have problems with the “@2x” suffix, change it to “-hd”, both in TexturePacker and in your code above. After that, remove the imageSuffix record from your config.lua file.

Also, be sure to have the -hd suffix both in “Data file” and “Texture file” fields in TexturePacker.

I use TP version 2.1.3.2009(Pro) and I have no problems with the sorting in the lua file. I remember some versions ago there was an issue indeed, so try to update TP.
[import]uid: 7356 topic_id: 3197 reply_id: 24763[/import]