Cocos2Dx之动画-欧阳左至

概述动画实际上是眼睛造成的错觉。一般情况下，如果每秒连续放映24张以上图片，人眼就看不出有停顿。如果帧速达到了60，甚至更高，那么基本上没人可以感觉到停顿了。动画就是利用这一特性，在每个连续的帧里面，让物体做一些小的变化，从而让人感觉物体自己在动一样。 就像下面的马儿，8张图片以1/60秒的速度播放，就是一只奔跑中的马儿。 动画相比与动作，可以完成更加复杂精细的动态效果，这是动作做不到的。动画需要做的

动画实际上是眼睛造成的错觉。一般情况下，如果每秒连续放映24张以上图片，人眼就看不出有停顿。如果帧速达到了60，甚至更高，那么基本上没人可以感觉到停顿了。动画就是利用这一特性，在每个连续的帧里面，让物体做一些小的变化，从而让人感觉物体自己在动一样。

就像下面的马儿，8张图片以1/60秒的速度播放，就是一只奔跑中的马儿。

动画相比与动作，可以完成更加复杂精细的动态效果，这是动作做不到的。动画需要做的就是在渲染每一帧的时候，连续地显示另外一张图片即可。但是图片是以文件形式存在的，我们要显示它，就需要把它读入内存，然后传给显存，最后再在屏幕上显示出来。图片文件一般都很大，特别是没有压缩过的文件。帧的绘制又必须在特定的时间内完成，如果不能完成，会导致显示错误，比如显示不全，抖动等。因此我们需要减少读文件和大量图片数据的传输。可以采取的办法有：

将动画的每帧纹理都放到一个大的文件当中。显示的时候，指定显示的区域即可。把显示的区域称为帧框。由于减少了文件的读取次数。文件一次读入后，就存在于内存，移动帧框比重新读取就要快很多。

将动画需要的纹理预先读入，并且缓存起来。在绘制帧的时候，再去读取文件，可能还是来不及了。因此，我们可以在使用之前就将纹理全部读入。现在的内存/显存容量已经很大，小游戏使用的纹理完全可以在游戏开始之前就全部载入。

这里先澄清下纹理和图片。纹理指的是一张表示物体表面细节的位图。位图是一种图片，但并不是所有的图片都可以作为纹理的，比如矢量图，或者当前平台不支持的图片格式。纹理的制作，一般不是码农可以兼任的。我们关心的是拿到纹理后怎么创建动画效果。

方式一：

?

1 2 3 @H_403_38@ 4 5 6 7 8 9 10 11 12 13

CCAnimation*animation=CCAnimation::create(); for ( int i=1;i<15;i++) { char szname[100]={0}; sprintf (szname, "Images/horse_%02d.png" ,i); animation->addSpriteFrameWithfilename(szname); } //shouldlast1.5seconds.Andthereare8frames. animation->setDelayPerUnit(1.5f/8f); //whetherornotitshallrestoretheoriginalframewhentheanimationfinishes animation->setRestoreOriginalFrame( true ); CCAnimate*action=CCAnimate::create(animation); m_grossini->runAction(CCSequence::create(action,action->reverse(),NulL));

方式二：

12 CCTexture2D*texture=CCTextureCache::sharedTextureCache()->addImage(s_horsePath); float w=texture->getContentSize().wIDth/numOfHorseFrame; h=texture->getContentSize().height; CCAnimation*animation=CCAnimation::create(); //shouldlast1.5seconds.Andthereare8frames. animation->setDelayPerUnit(1.5f/8f); //whetherornotitshallrestoretheoriginalframewhentheanimationfinishes ); i=0;i<numOfHorseFrame;i++) animation->addFrameWithTexture(texture,CCRectMake(i*w,w,h)); CCAnimate*animate=CCAnimate::create(animation); horse->runAction(CCRepeatForever::create(animate));

方式一示例通过没帧一个文件创建一个动画。方式二通过在一个纹理上移动帧框创建一个动画，并且启用了缓存。方式二稍微复杂一点，但是从效率上来讲比方式一要高。我们看看方式二都做了些什么：

第一步，先通过CCTextureCache::addImage载入了一个纹理。

第二步，创建了一个动画CCAnimation。设定了动画的每帧执行时间、是否循环使用，然后通过帧框指定了动画每帧显示的纹理区域。显示顺序跟添加的顺序一致。

第三步，创建一个动画动作CCAnimate，然后在精灵上执行它。

后面的内容会依据这三步为主线，分析动画的整个创建的执行过程。在这之前，再看两个需要使用到的类：

框帧（CCSpriteFrame）：包含纹理与纹理中的一个矩形区域，表示纹理的一部分。一个精灵显示的内容就可以用框帧表示，同时框帧还是帧动画的基本元素。

动画帧（CCAnimationFrame）：由框帧与单位延时组成，可以表示变速动画中的一帧。通常，匀速动画的单位延时为1。

载入并缓存纹理

CCTextureCache是一个纹理缓存。CCTextureCache单例内部用键值对CCDictionary缓存了所有的纹理。CCDictionary的键是纹理的文件地址，指是一个2D纹理对象CCTexture2D。

CCTextureCache::addImage添加一个文件到纹理缓存当中。如果该文件已经添加过，直接返回一个CCTexture2D引用。如果没有添加过，就利用文件名作为键，新建一个键值对。addImage支持的文件格式包括：.png，.bmp， .tiff， .jpeg， .pvr， .gif。图片跟平台的支持有关，有些图片格式可能是平台独有的。不同平台对图片的解码的支持也不均，因此Cocos2Dx为了跨平台图片的处理使用了第三方库。我们现在不必关心图片读取处理的细节，我们关心纹理如何产生的即可。addImage读取文件，生成一个CCImage对象，他是Cocos2Dx里面图片的统一表示。CCImage的图片属性包括：

m_nWIDth，图片宽度

m_nHeight，图片高度

m_nBitsPerComponent，像素使用的比特数

m_pData，存储图片数据

m_bHasAlpha，支持α通道

m_bPreMulti，支持预乘α通道

得到CCImage对象后，利用它创建一个2D纹理对象CCTexture2D。在老版本的OpenGL中，有个限制条件：纹理的大小必须是2的幂，比如268、512、1024。Cocos2Dx的CCTexture2D也有这样的限制条件。但是我们的文件经常不会匹配这样的纹理大小要求，因此纹理大小可能比图片的大小要大一些。

13 14 15 16 17 18 19 20 21 22 23 24 @H_204_301@ 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 CCTexture2D*CCTextureCache::addImage( const *path) { CCTexture2D*texture=NulL; CCImage*pImage=NulL; std::stringpathKey=path; pathKey=CCfileUtils::sharedfileUtils()->fullPathForfilename(pathKey.c_str()); if (pathKey.size()==0) { return NulL; } texture=(CCTexture2D*)m_pTextures->objectForKey(pathKey.c_str()); std::stringfullpath=pathKey; //(CCfileUtils::sharedfileUtils()->fullPathFromrelativePath(path)); (!texture) { std::stringlowerCase(pathKey); (unsigned i=0;i<lowerCase.length();++i) { lowerCase[i]= tolower (lowerCase[i]); } do { (std::string::npos!=lowerCase.find( ".pvr" )) { texture= this ->addPVRImage(fullpath.c_str()); } else ".pkm" )) { ->addETCImage(fullpath.c_str()); } else { CCImage::EImageFormateImageFormat=CCImage::kFmtUnKNown; ".png" )) { eImageFormat=CCImage::kFmtPng; } ".jpg" )||std::string::npos!=lowerCase.find( ".jpeg" )) { eImageFormat=CCImage::kFmtJpg; } ".tif" ".tiff" )) { eImageFormat=CCImage::kFmtTiff; } ".webp" )) { eImageFormat=CCImage::kFmtWebp; } pImage= new CCImage(); bool bRet=pImage->initWithImagefile(fullpath.c_str(),eImageFormat); CCTexture2D(); (texture&& texture->initWithImage(pImage)) { m_pTextures->setobject(texture,pathKey.c_str()); texture->release(); } else { cclOG( "cocos2d:Couldn'tcreatetextureforfile:%sinCCTextureCache" } } } while (0); } CC_SAFE_RELEASE(pImage); texture; }

将纹理缓存起来后，虽然CCTextureCache::addImage当即返回了纹理对象，但我们后面再使用怎么办呢？CCTextureCache::textureForKey直接根据文件，从缓存从找出并返回缓存的纹理对象。

动画CCAnimation

CCAnimation是用来描述动画的。我们看看描述动画需要哪些信息：

m_fTotalDelayUnits，总共有多少个动画帧

m_fDelayPerUnit，每个动画帧持续的时间

m_fDuration，是m_fTotalDelayUnits与m_fDelayPerUnit之积，整个动画持续的时间

m_pFrames，一个CCAnimationFrame数组，表示动画的一帧

m_bRestoreOriginalFrame，是否在动画结束是回到第一帧

m_uloops，动画执行次数

voID CCAnimation::addSpriteFrameWithTexture(CCTexture2D*pobTexture, const CCRect&rect) CCSpriteFrame*pFrame=CCSpriteFrame::createWithTexture(pobTexture,rect); addSpriteFrame(pFrame); } CCAnimation::addSpriteFrame(CCSpriteFrame*pFrame) { CCAnimationFrame*animFrame= CCAnimationFrame(); animFrame->initWithSpriteFrame(pFrame,1.0f,NulL); m_pFrames->addobject(animFrame); animFrame->release(); m_fTotalDelayUnits++; CCAnimation::addSpriteFrameWithTexture为每一个帧框创建了一个CCSpriteFrame对象，然后用CCSpriteFrame构造一个CCAnimationFrame添加到CCAnimation的m_pFrames数组当中。

动画动作CCAnimate

有了动画需要使用的数据CCAnimation，后CCAnimate就可以执行动画动作了。

CCAnimate继承自CCActionInterval，是一个持续性动作。持续性动作需要指定动作执行的时间，CCAnimate的执行时间不仅仅是CCAnimation的m_fDuration执行时间，还需要乘上动画循环的次数。上一篇中，我们提到过CCActionInterval的update函数的参数t是一个[0-1]的浮点数，表示归一化的进度。CCAnimate的浮点数组m_pSplitTimes存储了归一化的动画没帧开始时间的进度，这是一种时间换空间的做法。

26 CCAnimate::initWithAnimation(CCAnimation*pAnimation) singleDuration=pAnimation->getDuration(); (CCActionInterval::initWithDuration(singleDuration*pAnimation->getLoops())) { m_nNextFrame=0; setAnimation(pAnimation); m_pOrigFrame=NulL; m_uExecutedLoops=0; m_pSplitTimes->reserve(pAnimation->getFrames()->count()); accumunitsOfTime=0; newUnitOfTimeValue=singleDuration/pAnimation->getTotalDelayUnits(); CCArray*pFrames=pAnimation->getFrames(); CCARRAY_VERIFY_TYPE(pFrames,CCAnimationFrame*); CCObject*pObj=NulL; CCARRAY_FOREACH(pFrames,pObj) CCAnimationFrame*frame=(CCAnimationFrame*)pObj; value=(accumunitsOfTime*newUnitOfTimeValue)/singleDuration; accumunitsOfTime+=frame->getDelayUnits(); m_pSplitTimes->push_back(value); } return ; } false ; 动作的实际执行是调用CCAnimate::update。在游戏的每一帧渲染过程中，都会调用CCAnimate::update。由于需要考虑循环，稍微增加了一些实现的复杂度。update的参数t是整个动画按循环次数完成的百分比，因此t先乘以循环次数得到已经循环的次数（取整）。t乘过后，还需要修正回来，因此随后去1.0f进行了浮点数余数计算，得到当前循环完成的进度t。然后再拿这个进度t，去m_pSplitTimes找数值比起小的动画帧，然后将动画帧对应的纹理应用到目标精灵上。

27 CCAnimate::update( t) (t<1.0f){ t*=m_pAnimation->getLoops(); unsigned loopNumber=(unsigned )t; (loopNumber>m_uExecutedLoops){ m_nNextFrame=0; m_uExecutedLoops++; } t=fmodf(t,1.0f); } CCArray*frames=m_pAnimation->getFrames(); numberOfFrames=frames->count(); CCSpriteFrame*frametodisplay=NulL; i=m_nNextFrame;i<numberOfFrames;i++){ splitTime=m_pSplitTimes->at(i); (splitTime<=t){ CCAnimationFrame*frame=(CCAnimationFrame*)frames->objectAtIndex(i); frametodisplay=frame->getSpriteFrame(); ((CCSprite*)m_pTarget)->setdisplayFrame(frametodisplay); m_nNextFrame=i+1; else break ; } 但并不是每次调用都需要做动画的显示更新，也可能一次调用要设置多于一次显示更新，这跟游戏的帧频率和动画的帧频率相关。如下图所示，如果动画帧比游戏帧要快，那么有可能一个游戏帧会覆盖多个动画帧；如果动画帧比游戏帧要慢，那么可能并不是每个游戏帧都需要去处理动画帧。

总结

以上是内存溢出为你收集整理的Cocos2Dx之动画-欧阳左至全部内容，希望文章能够帮你解决Cocos2Dx之动画-欧阳左至所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1076342.html