Oct 292011
 

Cocos2DでアニメGIFやFlashのフレームアニメーションのように、パラパラアニメを作成する方法。CCSpriteFrameCache、CCSpriteBatchNodeを使ってフレームを作成し、CCSprite、CCAnimation、CCAnimateを使ってフレームをアニメーションさせる。

素材ファイルの作成
フレームとなる画像をPhotoshop等で作成するところまでは簡単。以下のソフトに取り込むと複数の画像を一枚のpngファイルにまとめてくれる。pngと一緒に吐き出されるplistにはフレームとなる画像を切り出すためのオフセットやサイズ、ファイル名が記述されている。

Mac/Win兼用でUIはやや汚いが多機能。Pro版は約20ドル。
http://www.texturepacker.com/

Mac専用でUIも美しい。
http://zwoptexapp.com

素材ファイルのロードとフレームの生成
各一枚のhg.plistとhg.pngから、forループでhg1.pngとhg2.pngが生成される。そのpngを配列に格納しているところ。
一行目でhg.plistをロード。
二行目でhg.pngをロード。
三行目以下でフレームとなるpngファイルを2つ作成し配列に格納。

[[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"hg.plist"];
CCSpriteBatchNode *spritesheet=[CCSpriteBatchNode batchNodeWithFile:@"hg.png"];
NSMutableArray *anim=[NSMutableArray arrayWithCapacity:1];
for (int i=1; i<=2; i++) {
     [anim addObject:[[CCSpriteFrameCache sharedSpriteFrameCache]spriteFrameByName:[NSString stringWithFormat:@"hg%d.png",i]]];
}
フレームアニメーションの作成
一行目でCCAnimationによりフレームアニメーションを作成。
二行目でフレーム1のpngファイルを使ってCCSpriteを生成。
三行目で無限ループとしてアニメーション実行。
CCAnimation *animation=[CCAnimation animationWithFrames:anim delay:.2f];
_g1=[CCSprite spriteWithSpriteFrameName:@"hg1.png"];
[_g1 runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]]];
スクリーンに表示
一行目で素材ファイルにCCSpriteを表示。
二行目で素材ファイルをスクリーンに表示。
[spritesheet addChild:_g1];
[self addChild:spritesheet];

コメント

個のコメント

Powered by Facebook Comments

 Posted by at 19:38

Sorry, the comment form is closed at this time.