Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.

Working with Sprites, and Sprite batch nodes

Animating with Flash(CS4), and exporting an image sequence

Flash is an obvious heavyweight when it comes to 2D animation, especially with character animation.

Create each animation in it's own .fla file, and make sure to animate on the main timeline.

If your animation works when you press enter(return) on the main time-line, it is ready to be exported into an image sequence.

Go to File → Export → Export Movie. Change the format to PNG sequence, and hit save to create your image sequence.

Animating with Photoshop, and exporting an image sequence

Photoshop is suitable to create animations, provided you are working with a recent version. Older versions tend to require the partner program Image Ready to get animation in photoshop.

The animation toolbar can be found under Window → Animate. Here you can create your animations and export them to a sprite sheet.

When you are satisfied with your animation, go to File → Export → Render to Video.

In the File Options section, check off “Image Sequence”, and use PNG as your file format.

Then in the Render Options, put your alpha channel to Straight - Unmatted.

Select your destination, and hit render to create the image sequence from the animation you've created.

Creating Sprite Sheets

Using tools to make your sprite sheet and .plist

Zwoptex is an app for making sprite sheets from images. It is available as a Flash app (free) as well as a downloadable binary for Mac OS (commercial).

TexturePacker is another tool for the job, available for Mac OS and Windows. Basic features are free, advanced require commercial license.

All three tools allow you to automatically arrange the images so that they make best use of the texture's space. Additional features allow you to trim, rotate the sprites.

Now export both the Texture and the Coordinates(plist), and add these to your project.

Another way to create your sheets is to use mkatlas.pl which can be found in cocos2d's tool folder.

Using Sprite Sheets


You need to create a CCSpriteBatchNode object, which contains the actual image of all the sprite frames. You'll add this to the scene, even though it won't draw anything itself; it just needs to be there so that it is part of the rendering pipeline. Example:

        // Create a batch node -- just a big image which is prepared to 
        // be carved up into smaller images as needed
        CCSpriteBatchNode *batch = [CCSpriteBatchNode batchNodeWithFile:@"grossini.png" capacity:50];
        // Add the batch node to parent (it won't draw anything itself, but 
        // needs to be there so that it's in the rendering pipeline)
        [self addChild:batch];


Next, you need to use the CCSpriteFrameCache singleton to keep track how frame names correspond to frame bounds – that is, what rectangular area of the sprite sheet. Example:

        // Load sprite frames, which are just a bunch of named rectangle 
        // definitions that go along with the image in a sprite sheet
        [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"grossini.plist"];

How to display a frame

Once your sprite sheet and frames are loaded, and the sprite sheet has been added to the scene, you can create sprites that use these frames by using the “spriteWithSpriteFrameName” convenience method, and adding it as a child of the sprite sheet:

        // Finally, create a sprite, using the name of a frame in our frame cache.
        sprite1 = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"];
        // Add the sprite as a child of the sheet, so that it knows where to get its image data.
        [sheet addChild:sprite1];

Then, if you later want to change which image the sprite displays, you get a new frame from the shared frame cache, and set that on the sprite, like so:

    CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
    [sprite1 setDisplayFrame:frame];

It's important to note that the frame names here are arbitrary strings in the XML file; they are not file names. It's common for the original image file names to be used as frame names, but that's not necessary. In the examples above, there needn't be any image called “grossini_dance_02.png” in the project.

CCAnimate and CCAnimate


Simple Example

Code from SpriteTest:

		CGSize s = [[CCDirector sharedDirector] winSize];
		// The sprite frames will be cached AND RETAINED, and they won't be released unless you call
		//     [[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
                //The name of your .png and .plist must be the same name
		[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"animations/grossini.plist"];
		// Animation using Sprite Sheet
		CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"]; //"grossini_dance_01.png" comes from your .plist file
		sprite.position = ccp( s.width/2-80, s.height/2); 
		CCSpriteBatchNode *batchNode = [CCSpriteBatchNode batchNodeWithFile:@"animations/grossini.png"];
		[batchNode addChild:sprite];
		[self addChild:batchNode];
		NSMutableArray *animFrames = [NSMutableArray array];
		for(int i = 1; i < 15; i++) {
			CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"grossini_dance_%02d.png",i]];
			[animFrames addObject:frame];
		CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];
		[sprite runAction:[CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO] ]];

It is very important to put this code in your dealloc method, otherwise you'll get a memory leak.

Code from dealloc:

-(void) dealloc
	[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
	[super dealloc];

You will get better performance, if you put all of your animations in one big sprite sheet (max 1024×1024 for old devices, 2048×2048 for iPhone4 and iPad), the tools automatically do this for you.

prog_guide/animation.txt · Last modified: 2011/09/14 15:48 by admin
Trace: animation
Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0