[置顶] cocos2dX 之CCAnimation/CCAnimate

我们今天来学习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);

好了  看效果:

额, 这个, 我没有把图片的位置计算对, 所以

今天还是就到此为止吧