本文在上节的基础上,在地图加上可以行走的勇士 。
勇士可以被视为一个精灵(CCSprite),它包含上、下、左、右4个方向的行走动作,如下图
将上图保存为hero.png,放到Resource目录下。我们首先来做人物向下移动一格的动画,也就是第一行的4幅图。代码如下:
//将图片生成纹理,保存到全局的纹理缓存取 CCTexture2D *heroTexture=CCTextureCache::sharedTextureCache()->addImage("hero.png"); //用纹理创建4幅帧动画 CCSpriteFrame *frame0,*frame1,*frame2,*frame3; //第二个参数表示显示区域的x,y,width,height frame0=CCSpriteFrame::createWithTexture(heroTexture, cocos2d::CCRectMake(32*0,32*1,32,32)); frame1=CCSpriteFrame::createWithTexture(heroTexture, cocos2d::CCRectMake(32*1,32*1,32,32)); frame2=CCSpriteFrame::createWithTexture(heroTexture, cocos2d::CCRectMake(32*2,32*1,32,32)); frame3=CCSpriteFrame::createWithTexture(heroTexture, cocos2d::CCRectMake(32*3,32*1,32,32)); //CCMutableArray<CCSpriteFrame*> *animFramess=new CCMutableArray<CCSpriteFrame*>(4); CCArray *animFrames=CCArray::create(); animFrames->addObject(frame0); animFrames->addObject(frame1); animFrames->addObject(frame2); animFrames->addObject(frame3); //根据4幅帧生成CCAnimation对象 CCAnimation *animation=CCAnimation::createWithSpriteFrames(animFrames); //创建一个CCSprite用来显示勇士,可以使用Animation中的一帧来作为勇士静止时的画面 CCSprite *heroSprite=CCSprite::createWithSpriteFrame(frame0); //暂时将勇士显示在(100,100)处 heroSprite->setPosition(ccp(100, 100)); addChild(heroSprite); //根据动画模板创建动画 animation->setDelayPerUnit(0.2f); CCAnimate *animate=CCAnimate::create(animation); //创建不断重复的动画,并让heroSprite播放 heroSprite->runAction(CCRepeatForever::create(animate)); //c animFrames->release();
运行项目,查看项目运行效果,画面左下角出现了一个勇士在不停地走动,如下图:
下面我们来创建其他3个方向的动画,并把它们保存到相应的全局变量中。由于创建的步骤重复且复杂,我们将通用的代码提取成一个方法createAnimationByDirection(HeroDirection direction).
1、在HelloWorldScene.h中添加
typedef enum { kDown=0, kLeft=1, kRight=2, kUp=3 } HeroDirection; //根据方向创建动画 cocos2d::CCAnimation *createAnimationByDirection(HeroDirection direction);