Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》

创建项目

本节课视频地址:http://edu.csdn.net/course/detail/1342/20996?auto_start=1

新建一个项目

(具体怎么创建,请参阅我们之前的课程),点击完成之后会自动打开CocosStudio。


使用CocosStudio创建帧动画

导入资源:

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第1张图片

右键单击CocosStudio的工程文件,选择“导入资源”,然后找到资源存放的文件夹,选择图片,进行导入。


添加一个Sprite

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第2张图片

选择“精灵”的选项卡,把它拖入到场景中。


设置记录帧

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第3张图片

选中“自动记录帧”选项,只有这样才能记录到我们对帧动画每一帧的操作。

选中使用那一帧

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第4张图片

首先选中第0帧,点击竖条即可选择帧。


选择Sprite

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第5张图片

找到刚才创建的spite,单击一次

把图片拖动到sprite的图片资源选项

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第6张图片

把刚才导入的图片资源拖动到图片资源的选项卡,当在你拖动的图片上有个绿色加号的提示的时候,松开鼠标指针即可。

重复以上操作,每次选择不同的帧,然后拖动不同的图片到图片资源。执行完你的操作后在动画做操作区域会出现如下:

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第7张图片

这样通过CocosStudio编辑动画的操作就结束了。

运行帧动画

Cocos2d-x从入门到精通第18节课《 Cocos Studio编辑序列帧及序列帧的使用 》_第8张图片

点击CocosStudio上方的“三角”按钮,Cocos模拟器就可以运行我们编辑的帧动画了。

在程序里加载帧动画

OK,上面通过操作CocosStudio完成了对帧动画的编辑,下面我们就来看看如何通过代码加载帧动画。

//获得动画帧
    auto _rootNodeAni = CSLoader::createTimeline("MainScene.csb");
    //设置速度为60*0.3/s
    _rootNodeAni->setTimeSpeed(0.3);
    //播放动画,参数1,从第几帧开始播放,参数2,是否重复播放
    _rootNodeAni->gotoFrameAndPlay(0,true);
    //播放动画
    rootNode->runAction(_rootNodeAni);

播放的代码是不是SO EASY啊,根据注释,相信大家应该很容易就能读懂吧。

OK,今天关于CocosStudio编辑帧动画的课程就讲解完毕了,再见。


你可能感兴趣的:(cocos2d-x从入门到精通)