最近在思考下一个Cocos2d-x游戏做什么期间找到了一款很有意思的软件,这款软件名称叫做Spine,是专门用来制作骨骼动画的软件,该软件通过用人物身体的每一部分作为基本原件组装成一个人物的模型然后把人物的每部分制作成骨骼进而通过控制骨骼来实现人物的各种动作,这款软件还可制作出很多技能特效。
相信做过Cocos2d-x游戏的同学们肯定接触过帧动画吧,帧动画是通过把人物的完整动作分割成一帧一帧的图片然后把这组图片集合成plist文件,在Cocos2d-x中用plist文件来实现图片的一帧一帧输出最后实现人物的动作。骨骼动画是和帧动画一样的效果,但是却用了不同的方式来实现的,相比于帧动画一帧一帧输出图片,骨骼动画用人物骨骼来实现更加节省资源,同一个人物可能要做出很多不同的动作,如果用帧动画的话可能要很多plist文件、很多的动作组图的png文件,相反,用骨骼动画的话我们只需要atlas格式文件、json文件和人物骨骼组图png文件就可以实现人物诸如步行、跑步、跳跃、攻击、被攻击等动作。前言有点唠叨,望见谅~接下来跟大家分享一下如何用Spine来制作骨骼动画。
一 软件破解
这款软件是要收费的,我只找到了Spine比较低版本的破解版,如何破解网上一大片大家花花 时间就可以轻松破解了。
二 导入骨骼、组装骨骼
破解完软件后就打开软件
点击左上角的Spine,选择new project,这样新的工程就建好了,然后我们选择image文件 再在下方选择Browse找到我们骨骼图片所在的文件夹,然后选择确定,这样骨骼就导入到工程里了 ~
看到工程左上角的SETUP了么?这表示我们是在SETUP模式下,在这个模式下我们才可以进行 人物骨骼的组装。人物模型要自己去组装,最后组装效果图如下
刚组装好的可能有很多不合理的地方,比如图层高低的问题,我们可以在Draw Order中去调 节哪个图层高低进而可以产生更好的动作效果。接下来就是绑定骨骼了~
绑定骨骼还是在SETUP模式下,选择左下角两个选项的Create选项,这样 我们就开始创建骨 骼了~,在创建第一个骨骼时我们要选择root节点,就是坐标轴中间的那个十字~,点击Create选项 后我们就点击root节点,当root节点变成绿色就说明我们选中了,接下来按住Shift键不放,移动 鼠标选择骨骼图片点击鼠标左键不放移动,当你觉得合适了就放开鼠标这样一个骨骼就建好了而且 该骨骼已经绑定到了图片上了~~当刚建好的骨骼还是绿色状态时继续按住Shift不放,用鼠标选择 下一个图片再移动到合适距离松开这样我们就建好了一个以上一个骨骼为父骨骼的骨骼(父骨骼是 谁很重要,一定要注意)。以此类推建立骨骼,效果图如下:
三 建立动作
骨骼创建好了我们就开始进入动作模式吧~点击左上角的SETUP我们就进入了ANIMATE模式。
中间Rotate、Translate、Scale是我们用来改变动作的参数,旁边的绿色要是就是来记录动作 的,点击后会变成红色表示已经记录到帧上了,改变参数会变成黄色表示参数改变但是不会记录到帧 上。最后做出步行动作的帧效果图如下:
忘了告诉大家每个新动作都要在左边的Animations文件夹中建立新的动作并命名。
四 导出相应的文件
动作已经做好接下来就要导出我们在Cocos2d-x中要用到的文件了,操作图如下:
选择Texture Packer会有一个弹出框,在Input directory的Browse中选择自己骨骼图片所在 的文件夹,在Output directory的Browse中选择导出文件所在的文件夹。在Atlas name中写上文件 名,然后点击Pack。这样文件就导出来了。
接下来就要导出json文件了,继续选择Export,然后在Browse选择json文件输出路径,再点击 Export。json文件就导出来了。
五 在Cocos2d-x中使用
我们需要的文件都导出来了,接下来就是在Cocos2d-x中使用了。我们先把我们导出的atlas格 式文件、png文件、json文件拷贝到Cocos2d-x项目的资源文件中。
要使用Spine的骨骼动画就要在Cocos2d-x项目中包含相应的头文件(spine/spine.h、 spine/spine-cocos2dx.h),再在下面加上using namespace spine;(使用spine的命名空间),接下 来我们只需要在初始化函数中加入以下代码就可以实现骨骼动画了。
<span style="font-size:14px;"> auto spine = SkeletonAnimation::createWithFile("skeleton.json","bone.atlas",1); spine->setAnimation(0,"walk",true); spine->setTimeScale(1); spine->setPosition(Point(480,320)); spine->setZOrder(100); //spine->setRotationSkewY(180); spine->setTag(11); this->addChild(spine);</span>其中spine->setAnimation函数中walk就是自己在Spine软件中建立的动作名字,想要换其他动作就 把它改成其他动作的名字即可。怎么样?是不是比帧动画用起来方便了很多!