十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
cocos2d中的动画在每一个游戏当中,都有很多各种各样的动画效果,比如街头霸王中的旋风腿,植物大战僵尸中豌豆的扭动、僵尸的走路、***动作等,虽然简单的移动动作也可以实现这些功能,但是这样看上去非常的笨拙和不真实。那么这些效果到底是如何实现的呢?其实很简单,我们只需要将一系列图片按照特定的顺序排列,然后在精灵对象上执行特定的动画动作就可以了。
1 cocos2d中动画相关的类
在cocos2d中实现动画,需要了解以下几个类。 q CCAnimate:该类为一种特殊的动作,也称为动画动作。 q CCAnimation:该类封装了一个精灵帧序列和各个精灵帧之间的延迟时间,作为精灵播放动画的参数。 q CCAnimationCache:该类是一个单例,作为一个缓存池来缓存CCAnimation动画。
2 简单动画效果
接下来我们通过示例演示在cocos2d中实现动画效果。在Xcdoe中使用cocos2d模板创建一个项目,命名为“AnimationTest”,加入准备好的图片资源,本例为8张植物大战僵尸中的僵尸图片,利用这些单独的图片创建动画,完成一个僵尸走路的动画效果。实现代码如下。
创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务鄂伦春,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
程序清单:codes/13/13.11/AnimationTest/AnimationTest/HelloWorldLayer.m
-(id) init
{
if( (self=[super init]) ) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
CCSprite* bgSprite = [CCSprite spriteWithFile:@"gamebg.png"];
bgSprite.position = ccp(winSize.width/2,winSize.height/2);
[self addChild:bgSprite];
// 创建僵尸精灵,并设置坐标位置在屏幕之外
CCSprite* zSprite = [CCSprite spriteWithFile:@"z_00_01.png"];
zSprite.position = ccp(winSize.width+zSprite.contentSize.width/2,winSize.height/2);
[self addChild:zSprite];
// 创建CCAnimation动画,指定动画帧的内容
CCAnimation* anim = [CCAnimation animation];
[anim addSpriteFrameWithFilename:@"z_00_01.png"];
[anim addSpriteFrameWithFilename:@"z_00_02.png"];
[anim addSpriteFrameWithFilename:@"z_00_03.png"];
[anim addSpriteFrameWithFilename:@"z_00_04.png"];
[anim addSpriteFrameWithFilename:@"z_00_05.png"];
[anim addSpriteFrameWithFilename:@"z_00_06.png"];
[anim addSpriteFrameWithFilename:@"z_00_07.png"];
[anim addSpriteFrameWithFilename:@"z_00_08.png"];
// 创建animAction动画,restoreOriginalFrame:YES
// 可以让精灵对象在动画执行完后恢复到最初状态
id animAction = [CCAnimate actionWithDuration:1.5f animation:anim
restoreOriginalFrame:YES];
// 定义一个动作,重复执行CCAnimate动画
id repeatanimAction = [CCRepeatForever actionWithAction:animAction];
// 定义一个动作,让精灵对象移动到特定的位置
id moveTo = [CCMoveTo actionWithDuration:10.0f
position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];
// 僵尸精灵重复执行动画动作和移动动作
[zSprite runAction:repeatanimAction];
[zSprite runAction:moveTo];
}
return self;
}
-(id) init
{
if( (self=[super init]) ) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
// ①读取plist文件将精灵帧纹理添加到精灵帧缓存当中
[[CCSpriteFrameCache sharedSpriteFrameCache]
addSpriteFramesWithFile:@"animation.plist"];
// ②创建一个精灵表单
CCSpriteBatchNode* batchNode = [CCSpriteBatchNode
batchNodeWithFile:@"animation.png"];
// ③将精灵表单作为层的子节点添加到层当中
[self addChild:batchNode];
// ④创建背景精灵添加到精灵表单中
CCSprite* bgSprite = [CCSprite spriteWithSpriteFrameName:@"gamebg.png"];
bgSprite.position = ccp(winSize.width/2,winSize.height/2);
[batchNode addChild:bgSprite];
// ⑤创建僵尸精灵,设置坐标位置在屏幕之外
CCSprite* zSprite = [CCSprite spriteWithSpriteFrameName:@"z_00_01.png"];
zSprite.position = ccp(winSize.width+zSprite.contentSize.width,winSize.height/2);
// ⑥创建一个数组用来保存动画
NSMutableArray* array = [NSMutableArray array];
// 遍历所有图片,然后从精灵帧缓存中获取与图片名称相对应的精灵帧保存到数组当中
for(int i = 1;i<=8;i++){
NSString* fileName = [NSString stringWithFormat:@"z_00_0%i.png",i];
CCSpriteFrame* frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:fileName];
[array addObject:frame];
}
// ⑦创建一个动画并设计成重复动作
id animation = [CCAnimation animationWithSpriteFrames:array delay:0.1f];
id animate = [CCAnimate actionWithAnimation:animation];
id repeate = [CCRepeatForever actionWithAction:animate];
// ⑧创建一个CCMoveTo让精灵移动到特定的位置
id moveTo = [CCMoveTo actionWithDuration:10.0f
position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];
// ⑨让僵尸精灵运行动画和移动动作
[zSprite runAction:repeate];
[zSprite runAction:moveTo];
// ⑩将僵尸精灵添加到精灵表单中
[bgSprite addChild:zSprite];
}
return self;
}
编号⑨代码让僵尸精灵执行动画和移动的动作。编号⑩代码将僵尸精灵添加到精灵表单中。
通过以上步骤,我们就完成了通过精灵表单创建cocos2d动画效果的过程。单击“Run”按钮执行AnimationCacheTest项目,模拟器显示和直接使用图片帧创建动画的效果一样。使用精灵表单可以大大提升游戏的性能,在实际的项目开发当中应该更多地采用精灵表单的方式加载所有的精灵对象。