前言:


这次的东西,事实上是在做完2048后,我有个Flash想用。

就像,天天系列。开头会有 ”提米“ 的叫声+动画, 是不是感觉非常带感。

之前。做第一个游戏的时候,有做一套78帧的Flash,

可是当时不会用,如今正好拿过来用了。嘿嘿~


正文:


这次样例,就拿我这几天想做的 FlappyBird 的小鸟为例吧:

1.首先,我们先来做须要的资源。

这个有三个层次(眼下我知道的)

① 载入每一个图片

② 把全部图片压缩到一张图片中。然后切割取出。

③借助于plist文件与png共同取出图片。


前两种,比較简单。并且效率不是非常高,我就直接用这三者最好的,plist+png

事实上,plist通常是用在mac上的,

在windows制作plist能够用 TexturePacker,

很方便的一个工具。

安装完成,打开,须要选择你的引擎,当然我们选择的是cocos2d的:

Cocos2d-x 3.x  plist+png 做动画_获取图片


打开以后,会出现例如以下界面:

Cocos2d-x 3.x  plist+png 做动画_plist文件_02


这个工具的使用细节,我不是非常懂= =。

具体的能够问问度娘。

我仅仅知道,点上面那个button,加入,你所须要压缩在PNG里的图片:

Cocos2d-x 3.x  plist+png 做动画_获取图片_03


这个技巧不须要我多说了吧:

按住Ctrl 能够单个多选,

按住Shift能够连续多选。


选出图片。并把他们增加进来。

假设没有图片,拿以下的凑合一下吧:

Cocos2d-x 3.x  plist+png 做动画_2d_04Cocos2d-x 3.x  plist+png 做动画_javascript_05Cocos2d-x 3.x  plist+png 做动画_函数定义_06


然后点击 左上角 的Filebutton:

Cocos2d-x 3.x  plist+png 做动画_plist文件_07


然后,在下拉的菜单中,选  Public sprite sheet 。然后就选择存放 PNG和PLIST的文件夹:

Cocos2d-x 3.x  plist+png 做动画_函数定义_08


先是plist文件夹,然后是PNG文件夹。最好两个文件名称是一样的。

接着,就会给你输出出来了:

Cocos2d-x 3.x  plist+png 做动画_plist文件_09


OK,你就能够到存放的地方看你所生成的两个文件了。



2.接下来就是Cocos2d-x  中调用部分了。


把两个文件(plist和png) 拷贝到Resource 里面。

在VS2012 中 右键点击Resource 目录。加入->现有项,将两者加入进来。

Cocos2d-x 3.x  plist+png 做动画_函数定义_10


这里。我就直接在HelloWorld界面,放小鸟飞行动画了。


在HelloWorldScene.cpp的Init函数中增加,例如以下代码:

// ①创建缓存,将图片读取进来
CCSpriteFrameCache * cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache -> addSpriteFramesWithFile("hero_bird.plist");

// ②创建第一帧,设置位置,增加到当前场景
CCSprite *sp = CCSprite::createWithSpriteFrameName("bird_hero_01.png");
sp -> setPosition(Point(visibleSize.width/3,visibleSize.height/2));
this -> addChild( sp );

// ③创建集合,存每一张图片
Vector< SpriteFrame* > sfme = Vector< SpriteFrame* >::Vector();
char str[20] = {0};
for( int i = 1 ; i < 4 ; ++i )
{
// ④ 获取图片名字,增加到集合中
sprintf(str,"bird_hero_%02d.png",i);
SpriteFrame *fname = cache -> spriteFrameByName( str );
sfme.pushBack( fname );
}
// ⑤ 创建动画,设置播放速度
CCAnimation *animation = CCAnimation::createWithSpriteFrames( sfme , 0.1f );
sp -> runAction ( CCRepeatForever::create(CCAnimate::create(animation )));


来解释一下:

前面①、② 无需多说,

③,这个曾经用CCArray或者Array,

如今不行了,反正我是3.0和3.2都不能用Array。会在⑤

createWithSpriteFrames出问题,

由于追到这个函数定义。能够发现:

Animation* Animation::createWithSpriteFrames(const Vector<SpriteFrame*>& frames, float delay/* = 0.0f*/, unsigned int loops/* = 1*/)
{
Animation *animation = new Animation();
animation->initWithSpriteFrames(frames, delay, loops);
animation->autorelease();

return animation;
}


它的第一个參数必须为:

const Vector<SpriteFrame*>& frames


这点就要和  之前版本号不同,要注意一下。


然后是 ④

这个获取图片名字。为什么是:

sprintf(str,"bird_hero_%02d.png",i);呢?


由于%02d,能够保证,取i后,不够的用0补足。

比方,假设是%d,

当i等于1, 获取的名字是: bird_hero_1

而%02d。获取名字是: bird_hero_01


Ok,执行一下,就能够发现小鸟在飞翔啦~Cocos2d-x 3.x  plist+png 做动画_plist文件_11


PS:怎样作为一个开场动画呢?

我的方法就是在上述代码后,加一句计划任务。

多长时间后的跳转:

this->scheduleOnce(schedule_selector(InkmooFlash::jumpToMain), 4);


这样,算好播放一帧多久。总共多少帧,就能够做成开场动画啦~。~