我們今天來學習cocos2dX裡面的動畫的製作, 有人說, 不是前面CCAction已經學過了嗎? 怎麼還要學, CCAction是動作, 而我們今天要學的是動畫哦, 是讓一個東西動起來哦, 好了進入今天的正題CCAnimation/CCAnimate, 我們知道, 動畫看起來是在動的不是因為動畫本身在動, 而是因為我們快速切換圖片, 因為我們的視覺有一個殘留的效果, 所以看起來就像是在動一樣, 

先準備一堆素材, 開個玩笑啦, 實際開發過程中, 沒有人會弄一大堆素材放在那裡, 我們今天準備了兩種素材, 先來看看吧

一種是密密麻麻的帶有配置檔案的, 一種是每一幀都是相同大小的序列幀, 在這裡我們推薦大家使用第一種, 因為第一種最大限度的使用了空間, 能在一張相同大小的圖片上顯示更多的資源, 載入遊戲的時候可以節省記憶體(畢竟手機的記憶體還沒達到電腦的水準), 還有一個原因是操作起來比較方便, 加到快取裡面後直接用名字就能取出來, 而不像第二個還要計算位置, 我們這裡打包工具使用的是 "紅孩兒工具箱" , 當然, 大家也可以使用 "texturepacker", 具體的就不細說了, 趕快進入正題:

我們先來看看用法:

CCAnimation::create();

CCAnimation::createWithSpriteFrames( 幀陣列, 每幀之間的間隔);//儲存幀資訊

CCAnimate::create( CCAnimation物件);//根據CCAnimation不斷地切換精靈幀, 形成動畫效果

setDelayPerUnit();                             //設定幀間隔時間

setRestoreOriginalFrame( bool);      //動畫播放完之後會不會回到第一幀

setLoops();                                          //迴圈次數（-1為無限迴圈）

setFrames( 幀陣列);                            //設定動畫幀陣列

在寫程式碼之前我們先來看看這個配置檔案:

我們可以看到, 我們每張小圖都有一個對應的資訊, 不用我們自己去取位置

好了, 寫程式碼:

//使用第一張圖片建立一個精靈
	CCSprite* fish = CCSprite::createWithSpriteFrameName( "fish01_01.png");
	fish->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2));
	addChild( fish);

	//建立幀陣列
	char buff[20] = {0};
	CCArray* arr = CCArray::create();
	for ( int i = 1; i < 11; ++i)
	{
		if ( i < 10)
		{
			sprintf( buff, "fish01_0%d.png", i);
		}
		else
		{
			sprintf( buff, "fish01_%d.png", i);
		}
		CCSpriteFrame* fishFrame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName( buff);	//根據名字獲得圖片
		arr->addObject( fishFrame);																			//將CCSpriteFrame新增到數組裡面
	}

	//建立CCAnimation物件
	CCAnimation* animation = CCAnimation::createWithSpriteFrames( arr, 0.2f);								//設定0.2秒切換一幀影象
	animation->setLoops( -1);																				//動畫無限迴圈播放

	//利用CCAnimation建立CCAnimate
	CCAnimate* animate = CCAnimate::create( animation);
	fish->runAction( animate);
 

我們來看看效果, 小魚是不是遊動了啊, 我們還可以加入CCAction動作, 配合起來就更逼真了, 我這裡就不細說了

我們來接著看每張小圖都一樣大小的, 沒有配置檔案我們怎麼操作:

	// 第一步利用 CCTexture2D讀取圖片
	CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage( "heroHurt.png");
	//取出前面三個
	CCSpriteFrame* frame0 = CCSpriteFrame::createWithTexture( texture, CCRectMake(400*0, 240*0, 400, 240));
	CCSpriteFrame* frame1 = CCSpriteFrame::createWithTexture( texture, CCRectMake(400*1, 240*0, 800, 240));
	CCSpriteFrame* frame2 = CCSpriteFrame::createWithTexture( texture, CCRectMake(400*2, 240*0, 1200, 240));
	//用第一個建立一個精靈
	CCSprite* sprite = CCSprite::createWithSpriteFrame(frame0);
	sprite->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2));
	addChild( sprite);

	CCArray* arr2 = CCArray::create();
	arr2->addObject( frame0);
	arr2->addObject( frame1);
	arr2->addObject( frame2);

	CCAnimation* animation2 = CCAnimation::createWithSpriteFrames( arr2, 0.2f);								//設定0.2秒切換一幀影象
	animation2->setLoops( -1);																				//動畫無限迴圈播放

	CCAnimate* animate2 = CCAnimate::create( animation2);
	sprite->runAction( animate2);

記得以前用的是:

CCSpriteFrame* frame0 = CCSpriteFrame::frameWithTexture( texture, CCRectMake( 400*0, 240*0, 400, 240)); 

CCSprite* sprite = CCSprite::spriteWithSpriteFrame( frame0);

我用的2.1.5的竟然不能使用, 查了好久官方API才找到

CCSpriteFrame* frame0 = CCSpriteFrame::createWithTexture( texture, CCRectMake(400*0, 240*0, 400, 240));

CCSprite* sprite = CCSprite::createWithSpriteFrame(frame0);

好了  看效果:

額, 這個, 我沒有把圖片的位置計算對, 所以

今天還是就到此為止吧