cocos2dで簡単アニメーションプログラム

Tweet

cocos2dで作る iPhone＆iPadゲームプログラミングのサンプルプログラムを動かして勉強してきましたが、そもそもじっとしていられない質なのと、自分の理解度を試すために、簡単なプログラムを作りました。

内容は、ネコグラス時計のネコのアニメーションを表示するだけのものです。

工程としては以下のようになりました。

1. Flashでネコだけをステージに配置したSWFファイルを作成
2. SWFSheetでネコのアニメーションを1つのテクスチャファイルに書き出し
3. 使用するアニメーション画像を画像ソフトで切り出す
4. TexturePackerProでテクスチャアトラスを作成
5. アニメーションタイムラインをplistファイルで作成
6. Xcodeでcocos2dのテンプレートプロジェクトを作成
7. plistファイルからCCAnimationデータを作成するエクステンションを追加
8. ネコをCCSpriteで表示

工程1 : Flashでネコだけをステージに配置したSWFファイルを作成

Flash CS5.5で、ネコをステージに配置したSWFファイルを作成します。ステージのサイズもネコに合わせて小さくしましたが、あえて必要な作業ではありません。

工程2 :  SWFSheetでネコのアニメーションを1つのテクスチャファイルに書き出し

工程3 :  使用するアニメーション画像を画像ソフトで切り出す

SWFSheetで書き出した画像ファイルから、上記の３つ画像をそれぞれ切り出しました。切り出す際に、それぞれの中心位置がズレないように注意して下さい。
書き出したファイル名は cat0.png , cat1.png , cat3.png としましたが、ファイル名はそれぞれ好きな名前で良いです。

工程4 : TexturePackerProでテクスチャアトラスを作成

先ほどの3つのpngファイルを TexturePackerPro へ Drag&Drop してテクスチャ アトラスを作成します。pngファイル名はcocos2d上ではフレーム名として扱われ、それぞれのテクスチャを呼び出す際のkeyとなるので覚えておいて下さい。
パブリッシュすると、テクスチャ画像とplistファイルが書き出されます。ファイル名は、それぞれ cat-tex.png , cat-tex.plist とします。

工程5 : アニメーションタイムラインをplistファイルで作成

プロパティエディタなどでタイムライン アニメーションの設定ファイルを作成します。
今回は上記のように設定しました。animations、frames、delayは固定名なので変えないで下さい。
cat_type1 はアニメーション名です。プログラム中からアニメーションを呼び出す際の keyとなります。
framesの中身は、各フレームで呼び出されるフレーム名を設定します。先ほどの pngファイル名になります。
delayは各フレーム間の時間(秒)を設定します。今回は0.06秒にしました。

工程6 : Xcodeでcocos2dのテンプレートプロジェクトを作成

ここはcocos2dアプリを作るときのお決まりの工程なので割愛します。

工程7 : plistファイルからCCAnimationデータを作成するエクステンションを追加

参考にしたのは、Loading Cocos2D Sprite Frame Animations from Plist Filesです。
ここでは、CCAnimationCacheクラスにエクステンション機能をつけて、先ほどのplistファイルを読み込み、CCAnimationデータを生成する方法が解説されています。これを元に、独自の実装を追加していくのが良いのではないかと思いました。

工程8 :  ネコをCCSpriteで表示

まず、適当なシーン作成のイニシャライザで、以下のコードを記述します。ここでは、テクスチャ アトラスとアニメーションファイルを読み込ませておきます。それぞれキャッシュに入れるので、後からkeyを使用して、いつでも呼び出すことが可能になります。
最後にネコ(Catクラス)のインスタンスを作成し、適当なポジションに配置します。

// テクスチャアトラスの読み込み
CCSpriteFrameCache *frameCache = [CCSpriteFrameCache sharedSpriteFrameCache];
[frameCache addSpriteFramesWithFile:@"cat-tex.plist"];

// アニメーションの読み込み
CCAnimationCache *animCache = [CCAnimationCache sharedAnimationCache];
[animCache addAnimationsWithFile:@"cat-anim.plist"];

CGSize screenSize = [[CCDirector sharedDirector] winSize];

Cat *cat = [Cat cat];
cat.position = CGPointMake(screenSize.width/2,screenSize.height/2);
[self addChild:cat z:0 tag:GameSceneNodeTagCat];

Catクラスは、CCSpriteクラスの派生クラスにしてあります。ここでは採用しませんでしたが、NSObjectの派生クラスにして、CCSpriteクラスを保持(Has a)する方法もあります。
Catクラスのイニシャライザでは以下のコードを記述します。この中で、cat_type1 を keyとして、キャッシュから CCAnimation データを呼び出し、そのアニメーションを無限ループさせるアクションを生成し、その後実行しています。

+ (id)cat
{
	return [[[self alloc] initWithImage] autorelease];
}

- (id)initWithImage
{
	if ((self = [super initWithSpriteFrameName:@"cat0.png"])) {
		CCAnimation *animation = [[CCAnimationCache sharedAnimationCache] animationByName:@"cat_type1"];
		if (animation!= nil) {
			CCAction *action = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]];
			[self runAction:action];
		}
	}
	return self;
}

以上のような工程で、初めてでも案外あっさり完成してしまいました。
うーん、Flashほどでは無いにしても、cocos2dも楽々らくち〜んかも！