Non uniform size Sprite Sheet « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Non uniform size Sprite Sheet

(13 posts) (8 voices)

Started 2 years ago by khangle81
Latest reply from drakhen

Tags:

khangle81
Member

Hey everyone, I'm new to the forum :)

I'm a newbie at making Sprite Sheet and I got a couple of questions

1) does the sprites all have to have even width and height? Which mean that the longest or tallest sprite dictate the overall size of every other sprites? If that is the case, then how does games like Street Fighter with character like Dhalsim which have certain frame that is extremely wide (the extended arm sprite) deal with the spacing? I can't imagine that Dhalsim widest sprite dictate all the other sprite height and widith because it would be a huge waste of texture size since most of the space will be empty.

2) if cocos2d allow for non uniform sprite size, then how does the programmer deal with finding the fixed point of each sprite so that the animation doesn't jitter all over the place.

I apologize if similar question has been posted before. I search for a bit but didn't find anything post with this issue. thanks ahead for any help.

Posted 2 years ago #
Mitch Lindgren
Member

1) No, sprites in a sprite sheet can be of arbitrary width and height, and the width/height don't have to be the same.
2) I'm not sure what you mean by this - could you clarify?

Posted 2 years ago #
khangle81
Member

http://www.panelmonkey.org/sprite.php?id=611&theme=3

above is Dhalsim sprite sheet. So is this an acceptable layout of sprite sheet for cocos2d? if so, how does the programmer align the animation frame so it doesn't jitter. wouldn't it be a lot of work to align every frame uniquely in code to make sure the animation doesn't jitter? like how the fireballs in the bottom are in very small quadrants. so the programmer would have to uniquely assign coordinate for each of these frame? the game i'm working on have 12 frames per second so doing that manually in code sounds really tedious.

Posted 2 years ago #
abitofcode
Moderator

This post may help;

http://groups.google.com/group/cocos2d-iphone-discuss/browse_thread/thread/f9a3c5a1620ee9f7

Regarding the fireballs you could just create a new AtlasSprite and center the anchorPoint;

fireball.anchorPoint = ccp(0.5f,0.5f);

Dhalsim looks like he could probably be left aligned for the majority of his actions with an exception for the falldown;

dhalsim.anchorPoint = ccp(0,0);

Posted 2 years ago #
Mitch Lindgren
Member

Ah, I think I understand now... you're wondering if there's a good way to define the rectangles for each sprite so that the character is centered properly in each one, yes? I don't know of an easy way around this; the coordinates definitely have to be assigned manually if the sprites aren't uniform in size.

What you could do to save a bit of time is just save all the coordinates in a comma-delimited text file or something, and then load that into your game to define the rectangles. Then, you'd just have to make sure your sprites are in order and you could reference them by number. But as for actually finding the proper coordinates for each sprite... I don't know of a good way to do that.

Posted 2 years ago #
Blue Ether
Member

Someone posted a link to here earlier:

http://robertjpayne.com/textureatlascreator/

It's a flash based tool for assembling a texture atlas from component images. It will export a plist with coordinates. However, I believe in order to get the coords you have to insert each frame as a seperate image. So, you would have to break up the existing spritesheet into its components first.

By the way, iPhone is normally limited to max 1024x1024 texture sizes. Not sure if cocos2d is doing some finagling to bypass that limitation though.

Posted 2 years ago #
khangle81
Member

I really appreciate this. thanks for all your help! :)

Posted 2 years ago #
abitofcode
Moderator

I believe the 3GS can deal with 2048x2048

Posted 2 years ago #
Clain
Member

@Blue Ether ;
I think the tool is now here : http://zwoptex.zwopple.com/

Posted 2 years ago #
Nightmare_82
Member

I use the zwoptex tool to save texture space and now I want to start some animations. I have all the informations I need but I dont know what is the best way to have animated frames with different offsets.(e.g. the first frame has the offset 10/15 because this whitespace was removed, the second frame has an offset of 20/20 because there was more whitespace)
Can someone tell me if there is a clean way to do this with cocos2d or is it better to use the code provided from Zwoptex ?

Posted 2 years ago #
slipster216
Moderator

If you want to have non-uniform sprite frames it's best to use zwopple's code for now. In cocos0.9, the best features of zwopples code will be included with cocos's atlas system.

You can find more information about the difference between the two systems and the 0.9 refactor for the atlas system in this thread:

http://www.cocos2d-iphone.org/forum/topic/1713#post-10816

Posted 2 years ago #
Nightmare_82
Member

OK, thx for the information.

Posted 2 years ago #
drakhen
Member

FYI, I ran into a similar situation where I had different-sized animation frames that required offsets. I created an iPad app to assist in lining them up so there is no jitter during animation. It's pretty basic right now but will be enhancing it in future releases (feedback welcome). You can also import .plists generated by Zwoptex and it will separate the individual images.

Image Offset:
http://itunes.apple.com/us/app/image-offset/id422126370?mt=8

Hopefully this will help out future projects.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.