和屌丝一起学cocos2dx-基本动画制作

声 明

本教程仅用于初学cocos2dx同学使用，内容由本人（孤狼）学习过程中笔记编写，本教程使用cocos2dx版本为2.1.4。本教程内容可以自由转载，但必须同时附带本声明，或注明出处。

gl.paea.cn版权所有。

       OK，欢迎回到“和屌丝一起学cocos2dx”系列教程，昨天发布了“Ation动作”教程之后，一个大大和我说，学的太慢了，要加快点，所以感到无地自容啊，以后要加快学习进度了，大家可要跟上哦。好了上节我们我们说的那些action动作你们都试验了没呢？除了最后三个回调函数有点饶人以外其他的都是直接调用的方式实现，还是挺好理解的。另外我给大家的口诀也要知道哦，虽然是我自己瞎诌的，但是对于记住这些action动作还是有一定用处的哦。好了，我们快点进入今天的教程吧，今天我们要说的是-基本动画制作。

【一】：为啥说这个

       说这个的原因很简单，就是要大家了解一下基本动画的制作，我们不用做出效果，只要运行就OK，知道路往哪走就行了。其实这也是个探路课程吧。

【二】：步骤

1.我们需要图片，一个显示走路的图片

2.加载图片并让他动起来。

【三】：函数

       fuck，上面说那么简单，我咋不会捏？没关系，我们一步一步来

       以往我们对精灵Sprite都只是用图片来创建，然后设置位置，加载就结束了。但是今天就到了我们要对精灵重新认识的时候了。

1.创建方式：

[1]:CCSprite::create("文件名");            

       //用一个文件创建精灵

[2]:CCSprite::create("文件名","矩形区域");                        

       //用一个文件的一个区域创建精灵

[3]:CCSprite::createWithSpriteFrameName("缓存中的文件名");

       //利用缓存中的一帧创建精灵

[4]:CCSprite::createWithSpriteFrame("精灵对象");

       //利用另外一帧生成精灵对象

2.函数：

setPosition("CCPoint类型");                //设置精灵坐标

setRotation("角度");                               //设置旋转角度

setScale("缩放大小");                           //设置缩放

setScaleX("缩放大小");                        //设置X轴缩放

setScaleY("缩放大小");                         //设置Y轴缩放

setFlipX("bool");                                    //开启X轴镜像

setFlipY("bool");                                     //开启Y轴镜像

setOpacity("透明度");                            //设置透明度[0,255]

setVisible("bool");                                  //是否可见

setAnchorPoint("CCPoint类型");         //设置锚点

setColor("ccColor3B颜色");                 //设置颜色

setTexture("CCTexture2D类型");        //设置贴图

3.加入缓存帧：

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("plist文件");

【四】：示例

       首先我们要来解决图片问题，我们有过RPG游戏经验的人都知道，人物的动作都是有多张图片轮流切换得来的，下面这张呢我们可以看到，就是一个人物的所有行走图片了。

（妹子有没有很正点）

       这里我们就准备了4张向右走的图片，我们分别保存为r1.png，r2.png，r3.png，r4.png。

       但是如果我们创建一个人物向右走就要4张图，一个人物全部走动就要16张图，再加上他们其他动作，再加上各种妖怪！在加上各种大叔技能。天，我们是不是要准备几千张图啊，到时候怎么找啊。Oh my ladygaga。

       这里能就要和大家说一个新东西-图片打包，我们把所有图片都弄到一张图上，然后让程序一次加载，我们在这张图上找到对应的图不就完了吗，哈哈，图片打包工具很多，这里我给大家推荐的是“红大大”他们开发的“红孩儿工具箱”。具体的介绍你们直接点击链接就能看到，我就不再多说。

       我们用这个工具把我们要的图打包一下，得到2个文件。一个png图片还有一个plist文档，文档里面记录了每个图片的位置和名称，方便我们直接调用。

1.创建新项目Justgame

2.载入rw.png和rw.plist

Justgame.h

1.创建回调函数和一个数字变量

int num;

void myupdate(float tmd);

Justgame.cpp

1.初始化函数

//-new-//

CCSize mysize=CCDirector::sharedDirector()->getWinSize();

//把rw.plist加入缓存帧

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("rw.plist");

//创建4个sprite精灵，分别使用4张图

CCSprite * sp1=CCSprite::createWithSpriteFrameName("r1.png");

CCSprite * sp2=CCSprite::createWithSpriteFrameName("r2.png");

CCSprite * sp3=CCSprite::createWithSpriteFrameName("r3.png");

CCSprite * sp4=CCSprite::createWithSpriteFrameName("r4.png");

CCPoint myccp=ccp(20,mysize.height/2);

sp1->setPosition(myccp);

sp2->setPosition(myccp);

sp3->setPosition(myccp);

sp4->setPosition(myccp);

this->addChild(sp1,1,0);

this->addChild(sp2,1,1);

this->addChild(sp3,1,2);

this->addChild(sp4,1,3);

sp1->setVisible(true);

sp2->setVisible(false);

sp3->setVisible(false);

sp4->setVisible(false);

//设置移动

sp1->runAction(CCMoveTo::create(15.0f,ccp(mysize.width-20,mysize.height/2)));

sp2->runAction(CCMoveTo::create(15.0f,ccp(mysize.width-20,mysize.height/2)));

sp3->runAction(CCMoveTo::create(15.0f,ccp(mysize.width-20,mysize.height/2)));

sp4->runAction(CCMoveTo::create(15.0f,ccp(mysize.width-20,mysize.height/2)));

//启动更新函数

schedule(schedule_selector(Justgame::myupdate),0.2f);

//-new-//

2.更新函数

void Justgame::myupdate(float tmd){

CCSize mysize=CCDirector::sharedDirector()->getWinSize();

CCArray * myarray=this->getChildren();

int j=myarray->count();

for(int i=1;i//这里你知道我为啥从1开始吗？

CCSprite * sp=(CCSprite *)this->getChildByTag(i-1);

sp->setVisible(false);

}

num++;

if(num>=myarray->count()-1){

num=0;

}

CCSprite * spshow=(CCSprite *)this->getChildByTag(num);

spshow->setVisible(true);

}

       好了来看看效果吧。妹子动起来。。。

本节DEMO下载