阅读：24348次
任珊原创，首发于泰然，转载请注明出处
/chukong/cocos-docs/blob/master/manual/framework/native/v3/spine/zh.md
欢迎大家斧正错误，提交PR。
游戏中人物的走动，跑动，攻击等动作是必不可少，实现它们的方法一般采用帧动画或者骨骼动画。帧动画与骨骼动画的区别在于：帧动画的每一帧都是角色特定姿势的一个快照，动画的流畅性和平滑效果都取决于帧数的多少。而骨骼动画则是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨头”上，通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。它们需要的图片资源各不相同，如下分别是帧动画和骨骼动画所需的资源图：骨骼动画比传统的逐帧动画要求更高的处理器性能，但同时它也具有更多的优势，比如：
更少的美术资源： 骨骼动画的资源是一块块小的角色部件（比如：头、手、胳膊、腰等等），美术再也不用提供每一帧完整的图片了，这无疑节省了资源大小，能为您节省出更多的人力物力更好的投入到游戏开发中去。
更小的体积： 帧动画需要提供每一帧图片。而骨骼动画只需要少量的图片资源，并把骨骼的动画数据保存在一个 json 文件里面（后文会提到），它所占用的空间非常小，并能为你的游戏提供独一无二的动画。
更好的流畅性： 骨骼动画使用差值算法计算中间帧，这能让你的动画总是保持流畅的效果。
装备附件： 图片绑定在骨骼上来实现动画。如果你需要可以方便的更换角色的装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。
不同动画可混合使用： 不同的骨骼动画可以被结合到一起。比如一个角色可以转动头部、射击并且同时也在走路。
程序动画： 可以通过代码控制骨骼，比如可以实现跟随鼠标的射击，注视敌人，或者上坡时的身体前倾等效果。
骨骼动画编辑器——SpineSpine是一款针对游戏的2D骨骼动画编辑工具,它具有良好的UI设计和完整的功能，是一个比较成熟的骨骼动画编辑器。Spine旨在提供更高效和简洁的工作流程，以创建游戏所需的动画。使用Spine创建骨骼动画分两大步骤：
在SETUP模式下，组装角色部件，为其绑定骨骼；
在ANIMATE模式下，基于绑定好的骨骼创建动画。
下面简单介绍下具体步骤，更多详细内容请查看官方网站教程：Spine。1）在SETUP模式下，选中Images属性，导入所需图片资源所在文件夹，其中路径名和资源名中不能出现中文，否则解析不了；2）拖动Images下的图片到场景，对角色进行组装（把各个身体部位拼在一起），可通过Draw Order属性调整图片所在层的顺序；3）创建骨骼，并绑定图片到骨骼上，要注意各骨骼的父子关系。4）切换到ANIMATE模式，选中要“动”的骨骼，对其进行旋转、移动、缩放等操作，每次改动后要记得打关键帧。5）在菜单栏找到Texture Packer项，对角色纹理进行打包，资源文件后缀为atlas（而非Cocos2d-x常用的plist）。打包后将生成两个文件，即：png 和 atlas。6）导出动画文件Json。Spine动画的使用Cocos2d-x程序中，使用Spine动画首先需要包含spine的相关头文件。
include "spine/spine.h"
其常用方法如下：创建一个Spine动画对象，将动画文件和资源文件导入。auto skeletonNode = new SkeletonAnimation("enemy.json", "enemy.atlas");骨骼动画往往是不止一个动画的，例如：当人物需要行走时，就设置播放动画为行走；当要发动攻击时，就设置播放动画为攻击。下面方法可以设置当前播放动画，其中参数false表示不循环播放，true表示循环播放。skeletonNode->setAnimation(0, "walk", true);setAnimation方法只能播放一种动画，所以当要连续播放不同的动画时，需要使用addAnimation方法来实现，它可以一条一条的播放不同的动画。skeletonNode->addAnimation(0, "walk", true);
skeletonNode->addAnimation(0, "attack", false);对于一般情况下，动画的切换要求两个动画完全能衔接上，不然会出现跳跃感，这个对于美术来说要求很高，而Spine加了个动画混合的功能来解决这个问题。使得不要求两个动画能完全的衔接上，比如上面的walk和attack动画, 就是衔接不上的，直接按上面的办法播放，会出现跳跃，但是加了混合后，看起来就很自然了。哪怕放慢10倍速度观察，也完美无缺。这个功能在序列帧动画时是无法实现的，也是最体现Spine价值的一个功能。skeletonNode->setMix("walk", "attack", 0.2f);
skeletonNode->setMix("attack", "walk", 0.4f);设置动画的播放快慢可通过设置它的timeScale值来实现。skeletonNode->timeScale = 0.6f;设置是否显示骨骼通过设置debugBones，true表示显示，false表示隐藏。skeletonNode->debugBones =例子：创建一个player行走和攻击的动画, 并且循环播放。
auto skeletonNode = new SkeletonAnimation("enemy.json", "enemy.atlas");
skeletonNode->setMix("walk", "attack", 0.2f);
skeletonNode->setMix("attack", "walk", 0.4f);
skeletonNode->setAnimation(0, "walk", false);
skeletonNode->setAnimation(0, "attact", false);
skeletonNode->addAnimation(0, "walk", false);
skeletonNode->addAnimation(0, "attact", true);
skeletonNode->debugBones =
Size windowSize = Director::getInstance()->getWinSize();
skeletonNode->setPosition(Point(windowSize.width / 2, windowSize.height / 2));
addChild(skeletonNode);
相关文章推荐-------------
新增文件夹...
新增文件夹
(多个标签用逗号分隔)
Spine2D 骨骼动画教程.pdf
当然手动创建一个2D骨骼动画系统，是项疯狂的工作。幸福的是Esoteric
Software 已经为我们创建了这样伟大的工具 Spine。
Spine的图形界面能让你以交互的方式，为每一个精灵创建骨骼，然后用骨
骼创建你要在游戏中使用的动画。
当然手动创建一个2D骨骼动画系统，是项疯狂的工作。幸福的是Esoteric
Software 已经为我们创建了这样伟大的工具 Spine。
Spine的图形界面能让你以交互的方式，为每一个精灵创建骨骼，然后用骨
骼创建你要在游戏中使用的动画。&&
加载中...!如果长时间没有加载，请刷新页面
下载本文档需要登录，并付出相应积分（）。
文件大小:1.98 MB
所需积分:& 6
相关资讯 　—　
相关讨论话题 　—　
浏览：17110次&& 下载：0次
上传时间： 08:29:47
同类热门文档
0次浏览 &23次下载
23635次浏览 &12次下载
13796次浏览 &4次下载
9370次浏览 &2次下载
0次浏览 &37次下载
5228次浏览 &2次下载
相关经验 -
& 1人评&12页
& 0人评&0页
& 6人评&14页
& 30人评&15页
& 2人评&2页
OPEN-OPEN, all rights reserved.欢迎来到我的空间
看下下面两个文件
&spine/SkeletonRenderer.h&&spine/SkeletonAnimation.h&
1.lua中创建方法：
sp.SkeletonAnimation:create(&xxx.json&,'xxx.atlas', 1) &
实际上绑定过来的create 是createwithfile,可以参考 lua_cocos2dx_spine_manual.cpp
static void extendCCSkeletonAnimation(lua_State* L)
lua_pushstring(L, "sp.SkeletonAnimation");
lua_rawget(L, LUA_REGISTRYINDEX);
if (lua_istable(L,-1))
tolua_function(L, "create", lua_cocos2dx_CCSkeletonAnimation_createWithFile);
tolua_function(L, "registerSpineEventHandler", tolua_Cocos2d_CCSkeletonAnimation_registerSpineEventHandler00);
tolua_function(L, "unregisterSpineEventHandler", tolua_Cocos2d_CCSkeletonAnimation_unregisterSpineEventHandler00);
tolua_function(L, "setBlendFunc", tolua_spine_SkeletoneAnimation_setBlendFunc);
tolua_function(L, "addAnimation", lua_cocos2dx_spine_SkeletonAnimation_addAnimation);
tolua_function(L, "setAnimation", lua_cocos2dx_spine_SkeletonAnimation_setAnimation);
tolua_function(L, "replaceImage", lua_cocos2dx_spine_SkeletonAnimation_replaceImage);
tolua_function(L, "getCustomBounds", lua_cocos2dx_spine_SkeletonAnimation_getCustomBounds);
lua_pop(L, 1);
/*Because sp.SkeletonAnimation:create creat a LuaSkeletonAnimation object,so we need use LuaSkeletonAnimation typename for g_luaType*/
std::string typeName = typeid(LuaSkeletonAnimation).name();
g_luaType[typeName] = "sp.SkeletonAnimation";
g_typeCast["SkeletonAnimation"] = "sp.SkeletonAnimation";
２.registerSpineEventHandler注册事件
SP_ANIMATION_START = 0SP_ANIMATION_END = 1SP_ANIMATION_COMPLETE = 2SP_ANIMATION_EVENT = 3
3.setDebugBonesEnabled(true) &&spine在调试模式，可以看到骨头的长度，骨点的位置
4.setDebugSlotsEnabled(true);设置查看每个骨头绑定的图片的大小，会用矩形框显示出来
5.setMix 让两个动作之间更加；流畅。单向的，所以我们要相互设置。最后一个是过渡时间
self.aniNode2:setMix("move","idle",0.2)
self.aniNode2:setMix("idle","move",0.2)
6.setTimeScale(0.1)
　　默认是1.0 ,然后咱们可以设置动画播放的速度。比如人物的行走，美工做的时候，可以统一按照一个速度走。然后在程序里设置不同的速度。
7.换装（需要去学习）
（1）全部换装SetSkin
（2）局部换装
:http://blog.csdn.net/chenhaobright/article/details/
阅读(...) 评论()使用Spine软件制作骨骼动画供Cocos2d-x使用
& & & & & & & & & & & & & &
& 最近在思考下一个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:14&& 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软件中建立的动作名字，想要换其他动作就 & & & &把它改成其他动作的名字即可。怎么样？是不是比帧动画用起来方便了很多！
& & & & & & & & & & & & &下一篇博客我会跟大家分享如何用Spine软件实现人物技能特效~~ &谢谢大家阅读！
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
Spine_2D骨骼动画教程_
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口}