加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Cocos2Dx之动画-欧阳左至

发布时间：2020-12-14 16:50:08 所属栏目：百科 来源：网络整理
导读：动画实际上是眼睛造成的错觉。一般情况下，如果每秒连续放映24张以上图片，人眼就看不出有停顿。如果帧速达到了60，甚至更高，那么基本上没人可以感觉到停顿了。动画就是利用这一特性，在每个连续的帧里面，让物体做一些小的变化，从而让人感觉物体自己在动

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

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

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

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

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

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

方式一：

?
1
2
3
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是一个纹理缓存。CCTextureCache单例内部用键值对CCDictionary缓存了所有的纹理。CCDictionary的键是纹理的文件地址，指是一个2D纹理对象CCTexture2D。

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

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

13
14
15
16
17
18
19
20
21
22
23
24
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是用来描述动画的。我们看看描述动画需要哪些信息：

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 ;
}
但并不是每次调用都需要做动画的显示更新，也可能一次调用要设置多于一次显示更新，这跟游戏的帧频率和动画的帧频率相关。如下图所示，如果动画帧比游戏帧要快，那么有可能一个游戏帧会覆盖多个动画帧；如果动画帧比游戏帧要慢，那么可能并不是每个游戏帧都需要去处理动画帧。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同