Cocos2d-x 2.0 网格动画深入分析
[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址：http://blog.csdn.net/honghaier]
红孩儿Cocos2d-X学习园地QQ2群：44208467 加群写：Cocos2d-x
红孩儿Cocos2d-X学习园地QQ群：249941957 [暂满]加群写：Cocos2d-x
本章为我的Cocos2d-x教程一书初稿。望各位看官多提建议！
另：本章所用Cocos2d-x版本为:
cocos2d-2.0-x-2.0.2 @ Aug 30 2012
http://cn.cocos2d-x.org/download
写在前面：请各位大大在转载博文时注明来源，红孩儿每天熬夜写博实属不易，但屡有一些同学拿来主义，把本博的文章去头掐尾，抹掉作者，然后赤裸裸的改成自已的 " 原创 "，实在令人气愤。在此特声明：本博博文，欢迎您收藏，转载，如果有需要，也可以借用段落或插图，请您经我同意，我不是一个刻板吝啬的人。但如果直接剽窃，我将奋起反击！
在TestCpp中的EffectsTest示例中展示了一些屏幕特效，它是将屏幕划分为多个格子，并对这些格子进行了动画处理从而产生出相应的屏幕特效。今天我们来学习一下这些动画。
主要是涉及到以下几个文件：
CCGrid.h /cpp :网格数据及渲染，包括基本网格数据和3D网格数据，这是数据的基础。
CCActionGrid.h /cpp :网格基本动画，这是动画的基础。
CCActionGrid3D.h/cpp: 3D网格基本动画，这是3D网格动画的基础。
CCActionTiledGrid.h / cpp :网格衍生动画，这是最终的特效实现。
咱们首先来看 关于网格数据及渲染的文件：CCGrid.h
上面讲的是操控网格数据表现一些基本动画的类。下面我们来看一下由这些基本动画的类衍生出来的复杂动画。
打开CCActionTiledGrid.h:
最后我们来看一下EffectsTest的场景演示方面的代码：
EffectsTest.h:
//enum { kTagTextLayer = 1, kTagBackground = 1, kTagLabel = 2,};//动画的索引static int actionIdx=0; //效果标题列表。static std::string effectsList[] ={ "Shaky3D", "Waves3D", "FlipX3D", "FlipY3D", "Lens3D", "Ripple3D", "Liquid", "Waves", "Twirl", "ShakyTiles3D", "ShatteredTiles3D", "ShuffleTiles", "FadeOutTRTiles", "FadeOutBLTiles", "FadeOutUpTiles", "FadeOutDownTiles", "TurnOffTiles", "WavesTiles3D", "JumpTiles3D", "SplitRows", "SplitCols", "PageTurn3D",}; //由CCShaky3D派生出一个动画演示。class Shaky3DDemo : public CCShaky3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 return CCShaky3D::create(5, false, ccg(15,10), t); }};//由CCWaves3D派生出一个动画演示。class Waves3DDemo : public CCWaves3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 return CCWaves3D::create(5, 40, ccg(15,10), t); }};//由CCFlipX3D派生出一个动画演示。class FlipX3DDemo : public CCFlipX3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFlipX3D* flipx = CCFlipX3D::create(t); CCActionInterval* flipx_back = flipx->reverse(); CCDelayTime* delay = CCDelayTime::create(2); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(flipx, delay, flipx_back, NULL)); }};//由CCFlipY3D派生出一个动画演示。class FlipY3DDemo : public CCFlipY3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFlipY3D* flipy = CCFlipY3D::create(t); CCActionInterval* flipy_back = flipy->reverse(); CCDelayTime* delay = CCDelayTime::create(2); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(flipy, delay, flipy_back, NULL)); }};//由CCLens3D派生出一个动画演示。class Lens3DDemo : public CCLens3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { CCSize size = CCDirector::sharedDirector()->getWinSize(); //调用基类相应函数创建一个具体的动画演示。 return CCLens3D::create(CCPointMake(size.width/2,size.height/2), 240, ccg(15,10), t); }};//由CCRipple3D派生出一个动画演示。class Ripple3DDemo : public CCRipple3D {public: //重载其创建函数。 static CCActionInterval* create(float t) { CCSize size = CCDirector::sharedDirector()->getWinSize(); //调用基类相应函数创建一个具体的动画演示。 return CCRipple3D::create(CCPointMake(size.width/2,size.height/2), 240, 4, 160, ccg(32,24), t); }};//由CCLiquid派生出一个动画演示。class LiquidDemo : public CCLiquid{public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 return CCLiquid::create(4, 20, ccg(16,12), t); }};//由CCWaves派生出一个动画演示。class WavesDemo : public CCWaves {public: //重载其创建函数。 static CCActionInterval* create(float t) {//调用基类相应函数创建一个具体的动画演示。 return CCWaves::create(4, 20, true, true, ccg(16,12), t); }};//由CCTwirl派生出一个动画演示。class TwirlDemo : public CCTwirl {public: //重载其创建函数。 static CCActionInterval* create(float t) {//调用基类相应函数创建一个具体的动画演示。 CCSize size = CCDirector::sharedDirector()->getWinSize(); return CCTwirl::create(CCPointMake(size.width/2, size.height/2), 1, 2.5f, ccg(12,8), t); }};//由CCShakyTiles3D派生出一个动画演示。class ShakyTiles3DDemo : public CCShakyTiles3D{public: //重载其创建函数。 static CCActionInterval* create(float t) {//调用基类相应函数创建一个具体的动画演示。 return CCShakyTiles3D::create(5, false, ccg(16,12), t) ; }};//由CCShatteredTiles3D派生出一个动画演示。class ShatteredTiles3DDemo : public CCShatteredTiles3D{public: //重载其创建函数。 static CCActionInterval* create(float t) {//调用基类相应函数创建一个具体的动画演示。 return CCShatteredTiles3D::create(5, false, ccg(16,12), t); }};//由CCShuffleTiles派生出一个动画演示。class ShuffleTilesDemo : public CCShuffleTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCShuffleTiles* shuffle = CCShuffleTiles::create(25, ccg(16,12), t); CCActionInterval* shuffle_back = shuffle->reverse(); CCDelayTime* delay = CCDelayTime::create(2);//调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(shuffle, delay, shuffle_back, NULL)); }};//由CCFadeOutTRTiles派生出一个动画演示。class FadeOutTRTilesDemo : public CCFadeOutTRTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFadeOutTRTiles* fadeout = CCFadeOutTRTiles::create(ccg(16,12), t); CCActionInterval* back = fadeout->reverse(); CCDelayTime* delay = CCDelayTime::create(0.5f); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(fadeout, delay, back, NULL)); }};//由CCFadeOutBLTiles派生出一个动画演示。class FadeOutBLTilesDemo : public CCFadeOutBLTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFadeOutBLTiles* fadeout = CCFadeOutBLTiles::create(ccg(16,12), t); CCActionInterval* back = fadeout->reverse(); CCDelayTime* delay = CCDelayTime::create(0.5f); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(fadeout, delay, back, NULL)); }};//由CCFadeOutUpTiles派生出一个动画演示。class FadeOutUpTilesDemo : public CCFadeOutUpTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFadeOutUpTiles* fadeout = CCFadeOutUpTiles::create(ccg(16,12), t); CCActionInterval* back = fadeout->reverse(); CCDelayTime* delay = CCDelayTime::create(0.5f); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(fadeout, delay, back, NULL)); }};//由CCFadeOutDownTiles派生出一个动画演示。class FadeOutDownTilesDemo : public CCFadeOutDownTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCFadeOutDownTiles* fadeout = CCFadeOutDownTiles::create(ccg(16,12), t); CCActionInterval* back = fadeout->reverse(); CCDelayTime* delay = CCDelayTime::create(0.5f); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(fadeout, delay, back, NULL)); }};//由CCTurnOffTiles派生出一个动画演示。class TurnOffTilesDemo : public CCTurnOffTiles{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCTurnOffTiles* fadeout = CCTurnOffTiles::create(25, ccg(48,32) , t); CCActionInterval* back = fadeout->reverse(); CCDelayTime* delay = CCDelayTime::create(0.5f); //调用基类相应函数创建一个具体的动画演示。 return (CCActionInterval*)(CCSequence::create(fadeout, delay, back, NULL)); }};//由CCWavesTiles3D派生出一个动画演示。class WavesTiles3DDemo : public CCWavesTiles3D{public: //重载其创建函数。 static CCActionInterval* create(float t) {//调用基类相应函数创建一个具体的动画演示。 return CCWavesTiles3D::create(4, 120, ccg(15,10), t); }};//由CCJumpTiles3D派生出一个动画演示。class JumpTiles3DDemo : public CCJumpTiles3D{public: //重载其创建函数。 static CCActionInterval* create(float t) { CCSize size = CCDirector::sharedDirector()->getWinSize(); //调用基类相应函数创建一个具体的动画演示。 return CCJumpTiles3D::create(2, 30, ccg(15,10), t); }};//由CCSplitRows派生出一个动画演示。class SplitRowsDemo : public CCSplitRows{public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 return CCSplitRows::create(9, t); }};//由CCSplitCols派生出一个动画演示。class SplitColsDemo : public CCSplitCols{public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 return CCSplitCols::create(9, t); }};//由CCPageTurn3D派生出一个动画演示。class PageTurn3DDemo : public CCPageTurn3D{public: //重载其创建函数。 static CCActionInterval* create(float t) { //调用基类相应函数创建一个具体的动画演示。 CCDirector::sharedDirector()->setDepthTest(true); return CCPageTurn3D::create(ccg(15,10), t); }};#define MAX_LAYER 22//创建相应的效果。CCActionInterval* createEffect(int nIndex, float t){ //设置 CCDirector::sharedDirector()->setDepthTest(false); //根据索引来创建相应的动画实例。 switch(nIndex) { case 0: return Shaky3DDemo::create(t); case 1: return Waves3DDemo::create(t); case 2: return FlipX3DDemo::create(t); case 3: return FlipY3DDemo::create(t); case 4: return Lens3DDemo::create(t); case 5: return Ripple3DDemo::create(t); case 6: return LiquidDemo::create(t); case 7: return WavesDemo::create(t); case 8: return TwirlDemo::create(t); case 9: return ShakyTiles3DDemo::create(t); case 10: return ShatteredTiles3DDemo::create(t); case 11: return ShuffleTilesDemo::create(t); case 12: return FadeOutTRTilesDemo::create(t); case 13: return FadeOutBLTilesDemo::create(t); case 14: return FadeOutUpTilesDemo::create(t); case 15: return FadeOutDownTilesDemo::create(t); case 16: return TurnOffTilesDemo::create(t); case 17: return WavesTiles3DDemo::create(t); case 18: return JumpTiles3DDemo::create(t); case 19: return SplitRowsDemo::create(t); case 20: return SplitColsDemo::create(t); case 21: return PageTurn3DDemo::create(t); } return NULL;}//取得相应的动画。CCActionInterval* getAction(){ CCActionInterval* pEffect = createEffect(actionIdx, 3); return pEffect;} //运行当前的场景。void EffectTestScene::runThisTest(){ //创建一个当前的动画演示层放入场景，并运行这个场景。 addChild(TextLayer::create()); CCDirector::sharedDirector()->replaceScene(this);}#define SID_RESTART 1//构造函数。TextLayer::TextLayer(void){ //调用基类LayerColor的初始化函数，设置当前层的背景色。 initWithColor( ccc4(32,128,32,255) ); // float x,y; //取得屏幕大小。 CCSize s = CCDirector::sharedDirector()->getWinSize(); x = s.width; y = s.height; //创建一个节点。 CCNode* node = CCNode::create(); //创建一个动画。 CCActionInterval* effect = getAction(); //将动画绑定到这个节点上。 node->runAction(effect); //将这个节点再放入到当前层中。 addChild(node, 0, kTagBackground); //创建第一个精灵做为背景。 CCSprite *bg = CCSprite::create(s_back3); node->addChild(bg, 0);// bg->setAnchorPoint( CCPointZero ); bg->setPosition(ccp(s.width/2, s.height/2)); //创建第二个精灵（女一号）。 CCSprite* grossini = CCSprite::create(s_pPathSister2); node->addChild(grossini, 1); grossini->setPosition( CCPointMake(x/3,y/2) ); //创建一个缩放动画及对应的反向动画。 CCActionInterval* sc = CCScaleBy::create(2, 5); CCActionInterval* sc_back = sc->reverse(); //让第二个精灵运行相应的动画序列。 grossini->runAction( CCRepeatForever::create((CCActionInterval*)(CCSequence::create(sc, sc_back, NULL)) ) ); //创建第三个精灵。（女二号） CCSprite* tamara = CCSprite::create(s_pPathSister1); node->addChild(tamara, 1);tamara->setPosition( CCPointMake(2*x/3,y/2) );//创建一个缩放动画及对应的反向动画。 CCActionInterval* sc2 = CCScaleBy::create(2, 5); CCActionInterval* sc2_back = sc2->reverse(); //让第三个精灵运行相应的动画序列。tamara->runAction( CCRepeatForever::create((CCActionInterval*)(CCSequence::create(sc2, sc2_back, NULL))) ); //创建一个文字标签。 CCLabelTTF* label = CCLabelTTF::create((effectsList[actionIdx]).c_str(), "Marker Felt", 32); //设置标签的位置并放入当前层中。 label->setPosition( CCPointMake(x/2,y-80) ); addChild(label); label->setTag( kTagLabel ); //创建三个菜单按钮分别代表运行上一个，重新运行当前动画，运行下一个动画。 CCMenuItemImage *item1 = CCMenuItemImage::create(s_pPathB1, s_pPathB2, this, menu_selector(TextLayer::backCallback) ); CCMenuItemImage *item2 = CCMenuItemImage::create(s_pPathR1, s_pPathR2, this, menu_selector(TextLayer::restartCallback) ); CCMenuItemImage *item3 = CCMenuItemImage::create(s_pPathF1, s_pPathF2, this, menu_selector(TextLayer::nextCallback) ); //由三个菜单按钮创建菜单。 CCMenu *menu = CCMenu::create(item1, item2, item3, NULL); //设置相应菜单按钮的位置。 menu->setPosition(CCPointZero); item1->setPosition(CCPointMake( s.width/2 - item2->getContentSize().width*2, item2->getContentSize().height/2)); item2->setPosition(CCPointMake( s.width/2, item2->getContentSize().height/2)); item3->setPosition(CCPointMake( s.width/2 + item2->getContentSize().width*2, item2->getContentSize().height/2)); //将菜单加入当前层中。 addChild(menu, 1); //对当前层调用一个函数。 schedule( schedule_selector(TextLayer::checkAnim) );}//检查动画。void TextLayer::checkAnim(float dt){ //取得对应结点。CCNode* s2 = getChildByTag(kTagBackground);//判断如果没有正在运行中的动画，并且其有格子数据，则将其格子数据释放并置空。 if ( s2->numberOfRunningActions() == 0 && s2->getGrid() != NULL) s2->setGrid(NULL);;}//析构。TextLayer::~TextLayer(void){}//创建一个当前层的函数。TextLayer* TextLayer::create(){ TextLayer* pLayer = new TextLayer(); pLayer->autorelease(); return pLayer;}//当前层被加载时的处理。void TextLayer::onEnter(){ CCLayer::onEnter();}//创建一个新场景。void TextLayer::newScene(){ CCScene* s = new EffectTestScene(); CCNode* child = TextLayer::create(); s->addChild(child); CCDirector::sharedDirector()->replaceScene(s); s->release();}//重启当前动画演示。void TextLayer::restartCallback(CCObject* pSender){ newScene();}//前进到下一个动画演示。void TextLayer::nextCallback(CCObject* pSender){ // update the action index actionIdx++; actionIdx = actionIdx % MAX_LAYER; newScene();}//回退到上一个动画演示。void TextLayer::backCallback(CCObject* pSender){ // update the action index actionIdx--; int total = MAX_LAYER; if( actionIdx < 0 ) actionIdx += total; newScene();}最后做个总结：
Cocos2d-x提供了屏幕画面上的一些基于网格的动画，首先将要渲染的画面输出到一张纹理上，然后跟据屏幕大小创建相应数量的网格，通过对于网格上的顶点进行改变，形成顶点的运动动画，然后将纹理贴在网格上再绘制出来，就能够出现很多屏幕特效了。
觉得怎么样？是不是恍然大悟呢?如果有这样的感觉，则我的辛苦就没有白费。
最后，祝大家元旦快乐！2013年新的一年有更大的飞跃！
