spritesheet question « cocos2d for iPhone

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

spritesheet question

(13 posts) (7 voices)

Started 1 year ago by deiong
Latest reply from phynet

Tags:

deiong
Member

i've seen the tutorials on using that zsomething tex program to make plist for png files, running the program i didn't much care for it. i know is there any other software that does this or is this the only thing.

and a second question. is there something easier to use. i already use the sprite sheets in directx for windows and its horrible easy there i thought there would be an equally easy way for this. since i know the frame size of the sprite is 39 x 98 with 30 frames, is there something as easy as setting the frame size and telling it how many frames there are for easy animation? i read something about the plist having coordinates, but not sure why that is needed. shouldn't it be as easy as each frame is 39 x 98 i have x amount of frames and tell it to run animation? searching on teh web just shows the plist stuff and anything without plist stuff has so many lines of code it becomes a monster, its odd there isnt something simple as a few lines of code. or maybe there is. hence why im posting.

thanks :)

Posted 1 year ago #
Dragyn
Member

Zwoptex and Texture Packer are the two spritesheet makers that are most commonly used here, mostly because they both produce spritesheets compatible with cocos2D.

The reason the plist contains a lot of coordinates is that the idea behind the whole system is to have the spritesheets optimized for space, and the plist contains all the coordinates needed to create a sprite properly. Does it all via hand-coding is a monster - that's why those two tools are extremely popular.

Honestly, as a Zwoptex user, I can't imagine anything much easier than it, for ease of use: Import your sprites, Click a button to auto-arrange them, and then save out the plist and png files it creates. Import those files into your cocos2D project, and 2 or 3 lines of code to implement them.

Cocos2D is a game creation framework, not a graphic creation program. I wouldn't expect it to handle all the "monster code" of creating spritesheets any more than I would expect Photoshop to generate game code.

Of course, if you don't like those 2 programs, you are more than welcome to write your own spritesheet creation program. We can always use more tools to choose from.

Posted 1 year ago #
Andreas Loew
Member

Read this how to integrate TexturePacker into XCode.

TexturePacker XCode Integration - 5 minutes that save hours

Posted 1 year ago #
deiong
Member

i figured out how to make it without a plist, and so i'm now going to write a helper class that will make it as easy as heck

want to make life way easier

[spriteSheet setSpriteSheet = @"file"];
[spriteSheet setFrameSize:39 :98]; //width : height
[spriteSheet setRows:1]; //rows: columns
[spriteSheet setFrames:12]; //this will then also populate columns adn have a get property for colums as well.

since it'll inherit CCSprite it'll inherit all its other props and methods.

this will save a ton of time.

Posted 1 year ago #
Andreas Loew
Member
As long as your sprites are all the same size using a tool like TexturePacker is overhead in the beginning.

But usually you add more sprites to your game, different sizes and stuff like that.

Adding them to a sprite sheet gives you many advantages: Simpler handling, faster loading time and a much better performance since you don't have to swap textures during the draw phase. (Which is hidden from you by cocos2d).

The other advantage is that the tools trim the sprites - removing transparent data wich improves speed if parts of your animation are blank.

For animations I use this code:
```
NSMutableArray* loadAnimFrames(NSString *nameFormat, int numFrames)
{
    NSMutableArray *animFrames = [NSMutableArray arrayWithCapacity:numFrames];
    for(int i = 1; i <= numFrames; i++)
    {
        CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:nameFormat,i]];
        [animFrames addObject:frame];
    }
    return animFrames;
}

CCAnimate* loadAnimAction(NSString *animationName, NSString *nameFormat, int numFrames, float speed, BOOL restoreOriginalFrame)
{
    return [CCAnimate actionWithAnimation:loadAnimSequence(animationName, nameFormat, numFrames, speed) restoreOriginalFrame:restoreOriginalFrame];
}
```
I organize the animation phases in my assets/sheetname directory and name them all with numbers, e.g.
- running_01.png
- running_02.png
- running_03.png
Then I create the sheet with TexturePacker and load the animation with
```
loadAnimAction(@"running", @"running%02d.png", 3, 0.1f, NO);
```
Posted 1 year ago #
deiong
Member

umm im not sure what your talking about, the subject is on spritesheets. im not talking about loading a bunch of individual images at all.

Posted 1 year ago #
napierzaza
Member

What he means is for the sprite sheet programs you just import the individual images and it creates the plist and the sheet for you. So if you want to add an image to your project it's much easier than if you reedit your project.

Posted 1 year ago #
Andreas Loew
Member

@deoing: The code above is with sprite sheets. It loads an animation sequence from a sheet.

If you want to build a sheet from 30 39x92 sprites the best way is to use 512x256 or 1024x128 but this can only be done if you allow rotation. Otherwise you have to go for 512x512 because 2048x128 won't work on older iPhones...

So you can't just add sprites in a sequence but you need to read them from a grid. And for optimal memory size you also need to read rotated sprites...

cocos2d and TexturePacker already do this for you.

If you complain about the size of the plist file: It has advantages over setting everything up in code: It can be removed from memory and some other files can be loaded.

What would you prefer? TexturePacker to output Obj-C code? That can easily be done.

But in the end you are at the famous queation: Make or buy? If you are a serious programmer you have to ask yourself: What costs more: Some bucks for a tested and well known tool or work x hours to do it yourself and start testing on your own.

Posted 1 year ago #

deiong
Member

made a class that took care of all this

// woman walking - create and add the sprite sheet and sprite
        LIGSpriteSheet *womanWalking = [LIGSpriteSheet spriteSheetWithFile:@"woman_001.png"];
		[self addChild:womanWalking];
        [womanWalking setAnimation:@"dance" delay:0.11f];
        [womanWalking setTotalFrames:11];
        [womanWalking setupFrameWindow:CGRectMake(0, 0, 39, 98) columns:12 rows:1];
        [womanWalking setPosition:ccp(100, 75)];
        [womanWalking startAnimation];

        //explosion - create and add the sprite sheet and sprite
        LIGSpriteSheet *explosion = [LIGSpriteSheet spriteSheetWithFile:@"explosion.png"];
		[self addChild:explosion];
        [explosion setAnimation:@"boom" delay:0.09f];
        [explosion setTotalFrames:30];
        [explosion setupFrameWindow:CGRectMake(0, 0, 128, 128) columns:6 rows:5];
        [explosion setPosition:ccp(410,220)];
        [explosion startAnimation];

        //asteroid - create and add the sprite sheet and sprite
        LIGSpriteSheet *asteroid = [LIGSpriteSheet spriteSheetWithFile:@"asteroid.png"];
		[self addChild:asteroid];
        [asteroid setAnimation:@"asteroid" delay:0.1f];
        [asteroid setTotalFrames:64];
        [asteroid setupFrameWindow:CGRectMake(0, 0, 60, 60) columns:8 rows:8];
        [asteroid setPosition:ccp(220,200)];
        [asteroid startAnimation];

LIGSpriteSheet is just a class i made that inherits CCSpriteSheet and does the work

this did every thing for me, making it breathtakingly easy instead of all the hoop jumps you had to do

Posted 1 year ago #

TBBle
Moderator

Well, it adds the hoop of having to put all your sprite frames into one large texture yourself. And another of having to change your code if your sprite sheet size or layout changes.

And you sacrifice packing, padding and trimming, potentially wasting large chunks of texture memory.

Of course, looking at this thread, you're working with an older version of Cocos2d, and have possibly simply recreated CCTextureAtlas and combined it with CCSpriteBatchNode (formerly CCSpriteSheet) if it didn't already exist for you.

Posted 1 year ago #
phynet
Member
Hi all!

I'm having a problem with my sheet.

I'm getting this errors

cocos2d: CCSpriteFrameCache: Trying to use file 'spritelist.png' as texture
cocos2d: CCTexture2D. Can't create Texture. UIImage is nil
cocos2d: Couldn't add image:spritelist.png in CCTextureCache

while trying to implement my textures with code above:
```
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"spritelist.plist"];
		batchNode = [CCSpriteBatchNode batchNodeWithFile:@"texturas.png"];
		[self addChild:batchNode];
```
I know is a noob question, but, if I use the sheet from an example code it works fine.

I made my sheet with Zwoptex saving as Cocos2D format, and I know I'm doing something wrong, but I can't see it.
Posted 1 year ago #
alfaro
Member

i think you dont have spritelist.png imported to your project

Posted 1 year ago #
phynet
Member

HI!, I forgot to respond.

Thank you for the answer, but the problem was that the Zwoptex was making the plist wrong. So, I switched to TexturePacker and fixed the problem :D

Thank you!

Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.