11.【cocos2d翻译系列】Actions, Transformations and Effects--Animation
2013-07-02 20:14
501 查看
使用精灵和精灵批处理接节点
使用Flash cs4制作动画,并导出为图片序列
当Flash支持2D动画时就表明了它是重量级的,尤其是对于角色类动画。每一个动画创建自己的.fla文件,并且确保动画在主时间线上(timeline)。
如果你的动画在你按下回车键后在主timeline上运行,那麽就说明它可以导出为图片序列了。
找到File->Export->Export Movie。修改格式为PNG序列,并且点击保存这时它就创建了你的图片序列。
使用Photoshop制作动画,并导出为图片序列
Photoshop是十分适合创建动画的,假如你使用的是最新的版本。旧的版本可能会调用一个伙伴程序来获得的动画。动画工具条可以在Window->Animate处找到。这样你就可以创建你的动画并且导出它们为精灵表单。
当你对你的动画满意时,找到File->Export->Render to Videc。
在文件选项区域,选上“image Sequence”,并且使用PNG格式。
然后再渲染选项中,修改你的alpha通道Straight - Unmatted。
选择你的保存位置,然后点击render就会从把你的动画创建为图片序列。
创建精灵表单
使用工具来创建你的精灵表单和.plist文件
Zwoptex就是一个用来将图片制作为精灵表单的应用。TexturePacker是另一个可以完成此工作的应用,Mac OS X和windows下可用,基本功能免费。
这些工具都可以自动的安排图片,所以他们会充分利用纹理空间。附加的特性允许你去除空白(trim)和旋转精灵。
现在可以导出纹理和坐标(plist)了,并且添加到你的工程中。
另一个创建表单的方法就是使用mkatlas.pl,它可以在Cocos2d的tool文件夹中找到。
使用精灵表单
CCSpriteBatchNode
你需要创建一个CCSpriteBatchNode 对象,它用于存储所有精灵frame的真实图片的边界坐标。你可以将此对象添加到scene中,虽然它不会绘制任何的东西,但它是渲染管道(rendering pipeline)的一部分,应该被添加到scene中。例如:
// 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] ;
CCSpriteFrameCache
下一步你需要使用CCSpriteFrameCache单例来保存frame的名称对应frame的边界(就是精灵在表单中的矩形区域)。例如:
// 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" ] ;
怎样显示一帧动画
当你精灵表单和frames都加载完毕,并且精灵表单也添加到了scene中了,你就可以很方便的使用函数spriteWithSpriteFrameName 通过frames创建精灵,并且作为一个孩子添加到精灵表单中。// 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] ;
随后如果你想切换显示的精灵图片,如下:
CCSpriteFrame * frame = [ [ CCSpriteFrameCache sharedSpriteFrameCache ] spriteFrameByName: @ "grossini_dance_02.png" ] ; [ sprite1 setDisplayFrame : frame] ;
注意:frame的名字是任意的,它保存在XML文件中,它们不是文件名。通常是原图片的名字作为frame的名字,但这不是必然的。
Simple Example:
CGSize s = [[CCDirector sharedDirector] winSize]; // IMPORTANT: // The sprite frames will be cached AN 4000 D RETAINED, and they won't be released unless you call // [[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames]; //NOTE: //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]]];
将下面这些代码放到你的dealloc函数中是什么重要的,否则你将会产生内存泄露
- ( void) dealloc { [ [ CCSpriteFrameCache sharedSpriteFrameCache ] removeUnusedSpriteFrames] ; [ super dealloc ] ; }
如果你将所有动画放到一个大的精灵表单中,你将会获得很好的性能(对于较老的设备最大1024X1024,对于iPhone4和iPad最大2048X2048),工具都会自动的帮你完成。
相关文章推荐
- 9.【cocos2d翻译系列】Actions, Transformations and Effects--Effect actions
- 7.【cocos2d翻译系列】Actions, Transformations and Effects--Composition actions
- 10.【cocos2d翻译系列】Actions, Transformations and Effects--Special actions
- 8.【cocos2d翻译系列】Actions, Transformations and Effects--Ease actions
- #ASM 翻译系列第二十四弹:ASM Internal ASM files number 10 and 11
- 3.【cocos2d翻译系列】Beginner's Guide-Lesson3:Scene and menus
- Gensim官方教程翻译(三)——主题与转换(Topics and Transformations)
- 4.【cocos2d翻译系列】Basic concepts-basic concepts(基本概念)
- 【Moqui业务逻辑翻译系列】Sales Representative Seeks Prospects and Opportunities 销售代表寻找期望合作对象和机会
- 【cocos2d书籍翻译-更新结束】《Learn iPhone and iPad Cocos2D Game Development》
- 5.【cocos2d翻译系列】Basic concepts-touch input
- Gensim官方教程翻译(二)——主题与转换(Topics and Transformations)
- Gensim官方教程翻译(三)——主题与转换(Topics and Transformations)
- 6.【cocos2d翻译系列】Basic actions
- Actions, Controllers and Results【翻译】
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之目录导航
- #ASM 翻译系列第二十三弹:ASM Internal ASM files number 12 and 254
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
- After Effects and Photoshop: Animation and Production Effects for DV and Film
- Cocos2d-x 3.0final 终结者系列教程11-触摸机制