【COCOSBUILDER 开发系列之一】COCOS2DX使用COCOSBUILDER(官方编辑器)完成基础骨骼动画

  1. 云栖社区>
  2. 博客>
  3. 正文

【COCOSBUILDER 开发系列之一】COCOS2DX使用COCOSBUILDER(官方编辑器)完成基础骨骼动画

ghost丶桃子 2016-05-16 14:24:44 浏览2384
展开阅读全文
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocosbuilder/1061.html

关于CocosBuilder 已经成为cocos2d、cocos2dx的官方编辑器,主要作用是场景编辑器、新版本中还已经支持了骨骼动画。【对于CocosBuilder Himi最新书籍中也有讲述】

对于骨骼动画,其实类似动作编辑器,将图的切片组成一帧,然后设置时间轴事件(序列动画),[动编里则是将每一帧按照一定的时间进行播放],多的不说了,对于动作编辑器、切片等都不太熟悉的童鞋请自行搜索相关文章吧,下面进行本篇的内容。

     首先声明:最新的cocosbuilder 与 coco2d 、cocos2dx联合发布了新版,所以!对于使用最新的cocos2d-2.1beta3-x-2.1.0  的童鞋,请你下载最新的cocosbuilder 3.0 alpha版本!

cocosbuilder 下载地址: http://cocosbuilder.com/?page_id=11

(细心的童鞋应该知道,Himi博客最下方的“友情链接”里很多有用的地址的说)

下载好最新的3.0 cocosbuilder ,那么请打开它,然后我们进行创建一个骨骼动画吧:

     1.  首先创建一个项目,在cocosbuilder中的菜单一栏选择“File”-“New Project”,如下图:

111QQ201212131

 

 

      2. 继续创建一个我们的骨骼动画的子节点“,选择“FIle”-“New File”,如下图:

QQ20121213-2

选中后进入如下页面:

QQ20121213-3

这里,我们选择CCNode 节点,然后将“Full screen”的勾选去掉,我们不需要全屏。

点击“Create”后,会要求你选择存放目录,这里可能会出现如下提示:

QQ20121213-4

如果出现这个提示是要求你设置配置一些路径,解决方案:

1)配置“File”-“Project Settings…”的路径

2)直接将创建的CCNode放在你创建cocosbuilder目录的Resources目录下即可,如下图:

QQ20121213-5

 

以上步骤创建好后则如下图所示:

QQ20121213-6

这里需要注意的是,当你创建一个Project时,这里默认会有cocosbuilder的例子相关文件:

ccbResources 文件夹、clikme-down.png、clime.png、MainScene.ccb、MainScene.js,

我们将这些都删掉,让童鞋们更容易理解。(删除操作去目录下删除吧)

另外,animated-grossini.plist 以及 animated-grossini.png 是打包好的骨骼碎片,如下图

animated-grossini

对于碎图整理打包,Himi推荐使用TexturePackage (TP),博客最下方有其地址(收费)

3. 当一个plist 、png的资源放入cocosbuilder中,默认此plist文件可以点开,并且对其中的每个碎图进行拖拽,如下图所示:

QQ20121213-7

下面我们就将plist下的每个图都拖拽到“骨骼动画视图”中吧,然后拼成一个小人,如下图:

QQ20121213-1

 

4. OK,继续,我们调整时间轴将其调整到1秒的位置,然后我们选中小人的头部!然后在cocosbuilder的菜单项中选择“Animation”-“Insert KeyFrame”,如下图:

QQ20121213-2

然后调整其切片属性的角度为90度,重复上述的步骤,将时间轴调回到0秒初始时,设置其头部角度为0度,完成后如下图:

QQ20121213-3

童鞋们点击下播放试试效果吧,是不是很嗨皮~有意思吧。

当然你也可以在同一时间让当前帧或者其他切片一些操作例如缩放、平移、透明度、颜色等。

5.下面对整个动画进行整体的调整设置吧:

QQ20121214-1

默认创建的动作都是10秒的周期,利用Set TimeLine Duration设置周期即可。

这里我们再简单设置下动作的名字吧:
选择“Edit TimeLines…”,出现如下界面:

QQ20121214-4

 

TimeLine Name :动作列表(默认名字为:Untitled Timeline  ,这里改成wave)

Duration:完成这个动作所需的时间

Autoplay:是否自动播放

 

需要提醒的是,如下图:

111

   上图中的红色标记是表示“选择当前动作播放完成后,继续播放的下一个动作” 用以完成连贯动作。

6. 最后一步是将编辑好的骨骼动作,编译称cbbi文件吧:

选择cocosbilder菜单栏“FIle”-“Publish”   ,如下图:

QQ20121214-2

然后你将在你的项目文件夹中看到编译后的两个文件夹,“Published-iOS”、“Published-HTML5” 如下图所示:

QQ20121214-3

Published-HTML5给HTML项目用的这里我们看 “Published-iOS”这个文件夹,这个文件夹中除了我们自己的plist与png资源文件外,还有一个编辑出来的切片动作信息文件ccbi文件,main.js也不用管,我们直接将如下三个文件拷贝到我们的cocos2dx项目中并且添加到项目中:

animated-grossini.plist、animated-grossini.png、TestAni.ccbi

下面我们来书写使用代码段吧,直接上代码了,比较简单:

先导入头文件:

以上代码注释的比较清楚了,是从ccbi文件中将我们创建的骨骼动画解析读取出来,然后返回一个CCNode对象

下面我们让其进行动画的播放:

以上的ccbReader是我们通过ccbi读取获取到的一个实例对象,这里放置了我们编辑所有动画序列,所有动作,另外当我们ccbi中有N个动作的话,那么这N个动作的下标默认:0,1,2,3,4,5….n-1

因此我们还可以利用动作下标进行播放动作:

这里Himi也顺便将动作的名字、周期时间、下标都打印出来供大家参考:

OK,基本上比较easy,下面是运行效果图与源码和资源下载地址:

资源与项目下载地址:   http://vdisk.weibo.com/s/kCT5z

 

IMG_1847

 

IMG_1848


网友评论

登录后评论
0/500
评论
ghost丶桃子
+ 关注