Spine 2D骨骼动画教程(适合新手的完整实例入门教程)

Spine 2D骨骼动画教程


大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢!
欢迎加入专业Spine技术交流群 Spine2D骨骼动画 7708065
转载请保留原始链接:https://blog.csdn.net/jx520/article/details/83057477

如果你曾经开发过2D游戏并需要使用精灵动画,你可能要求美术人员创建逐帧动画,例如这个教程中的iOS Games by Tutorials:
在这里插入图片描述
然后你可能会写一些代码来快速播放这个图片序列,以模拟出动画效果,就像这样:
在这里插入图片描述
这个方法实现起来很简单,但有几个严重的缺陷:

  • 内存和闪存占用率高。
    要因为你要为动画的每一帧生成一张精灵图片,它们会占用大量存储空间。你要动态处理一个不小的精灵,而在你的动画中有大量的精灵要处理,这会带来一个坑爹的问题。这个问题在移动设备上尤为严重,因为内存容量和闪存容量都很有限。
  • 制作动画的成本高昂。
    绘制完整的一帧需要花费美术人员很多时间。如果在动画完成后,要进行调整将会更耗时。
  • 能自已做动画的码农毕竟不多。
    因为要手绘每一帧,如果你是个码农那就得跪求美术人士来做动画,如果随后要加特效你还得去跪求人家。
    在您的游戏中使用2D骨骼动画系统,就能解决这些麻烦。 它并不会把动画中的每一帧存储下来,取而代之的是存储像下面这样身体的各个部分:
    在这里插入图片描述
    然后你可以创建一个很小的动画文件,它定义了如何移动身体各个部分,使其按照你想要的效果表演动画,如走、跑或跳。然后你可以在游戏中用代码读取动画文件,自动为身体的每个部分创建精灵,然后按照文件中描述的数据动画它们。
    当然手动创建一个2D骨骼动画系统,是项疯狂的工作。幸福的是Esoteric Software 已经为我们创建了这样伟大的工具Spine。
    Spine的图形界面能让你以交互的方式,为每一个精灵创建骨骼,然后用骨骼创建你要在游戏中使用的动画。
    在这里插入图片描述
    Spine还自带了庞大的预制运行库Spine runtimes,这是一个奇妙的方式“在你的游戏中添加读取Spine文件的代码,然后它为创建动画。”Spine的运行库,支持目前所有主流的游戏引擎Unity, Sprite Kit, cocos2d 等等。
    在这里插入图片描述

在本教程中,你将用Spine制作一个笨拙的小精灵行走和跌倒的动画。这个过程中你将学会:

  • 导入图片到Spine中
  • 为精灵构建一套骨架
  • 创建两个不同的动画
  • 保存和导出你的成果
    要注意的是本教程不包括将动画结果导入到游戏中;那将是一个独立的教程。本教程的重点是如何使用Spine本身,而不理会你将选择哪种游戏引擎。
    如果你已准备好迈出Spine的第一步,那就让我们开始吧!

开始(Getting Started)

首先第一件事:你要先下载并安装Spine.
Spine支持 Windows, Mac 和 Linux. 有三个版本,五种授权方式供你选择。详情看下面说明。
( 教程原文中关于购买Spine这一块的资料年代过于久远,这里直接看官方的购买页面吧: http://esotericsoftware.com/spine-purchase )

对于本教程的内容,你在试用版中都可以做到。然而在教程最后,你会发现试用版无法导出你的动画。如果你完成了教程的其它本分,并且渴望在你的应用中看到自已制作的动画,那你应该考虑购买基本版或专业版Spine许可,这样你就可以保存和导出你的成果了。
那么选择一个版本下载吧,安装并运行它。如果你用的是Mac,当你试图运行Spine时你可能会看到下面的提示信息:
在这里插入图片描述
点击继续你将打开Apple的支持页面。在页面中的第一段里点击http://xquartz.macosforge.org链接。跳到X Quartz下载页面。下载并安装X11,然后再次运行Spine,现在它能正常启动了。

一旦你顺序打开Spine,欢迎你的将是一个示例项目。
在这里插入图片描述
当你准备开始学习如何创建自已的动画时,如果你有兴趣,可以随意研究示例项目。

Spine导入图片

导图的工作已经有导图脚本可以实现了,但你还是应该明白它都自动帮你做了些什么
为了让你专心学习Spine,我为你准备好了小精灵的切片素材,接下来你将用它创建制作动作。
点击这里下载素材,把文件夹解压到桌面,这样便于在Spine中找到它。
点击左上角的Spine标志,选择新建项目New Project.
在这里插入图片描述
在右边的层级树面板中选择图像节点Images,然后点击下面的浏览Browse.
在这里插入图片描述
在你的桌面上找到 SpineElf_START 文件夹,选中后确定。
在这里插入图片描述
现在文件夹中所有的图片显示在了Images节点下。
在这里插入图片描述
现在按正常情况来说你应该保存项目了,第一条准则“在整个过程中,随时保存!”。
遗憾的是如果你用的是试用版,就木有保存功能。当然拉,如果你升级到基础版或专业版,你就可以按Ctrl+SCmd+S 保存项目了,把它保存在SpineElf_START 文件夹中。
如要你使用的是试用版,也别烦恼。你在使用Spine制作动画的过程,也就是体验一场刺激的冒险游戏的过程。到于Ctrl+S是胆小鬼才干的事,对于威武雄壮的你自然是不屑一顾的。
在这里插入图片描述

装配角色

要创建你的角色,你需要去当地的大学里,报名参加点解剖学和美术学方面的课程。呵呵!骗你的!其实本教程为你提供了美术素材,你只要拖放切片素材到场景中就行了。
Images节点中选中body 然后拖放到场景中。
在这里插入图片描述
在这里插入图片描述
一开始我不知道怎么平移动画布,所以我用一个超搓的办法来改变画布位置。用鼠标滑轮先缩放,然后光标放到另一个位置放大,这样来移动画面。后来Update:@mig_akira告诉我,可以按住右键移动鼠标来移动画布!非常感谢他。
现在再把head拖到场景中。
在这里插入图片描述
拖动lArm, lLeg, rArmrLeg到场景中,但是head2head3不动。
在这里插入图片描述
如果你手抖把它们拖进场景了,别担心。Ctrl+ZCmd+Z撤销刚才的错误操作。尽管你有胆在制作中不保存,但再倔强的人也不会拒绝Ctrl+Z的。
现在要装配精灵了,我看好你哦。在变换栏Transform中,找到位移工具Translate tool ,然后选中精灵的头部。
在这里插入图片描述
把精灵的头放到他的身体上边。如果场景不够宽,你可以用鼠标滚轮缩放视口,也可以用Spine左下角的缩放工具来操作。
在这里插入图片描述
还是使用位移工具Translate tool 移动精灵的手臂和腿放到适当的位置。
在这里插入图片描述

改变显示顺序

等等!…为毛左臂和左腿在身体的上面?而不是在身体背后。看起来你得调整一下各部分的顺序。
Images上方你会看到绘制顺序Draw Order列表。如果你熟悉Adobe PhotoshopSketchbook Pro,可以想象绘制顺序Draw Order就类似于层。列表中显示在上方的切片,在场景中也相应的显示在上方。
在这里插入图片描述
要调整绘制顺序只需简单的在列表中上下拖动。调整顺序从上向下像这样**:rArm, rLeg, head, body, lLeg** 和lArm.
在这里插入图片描述
现在你的精灵看起来应该是这个样子了:
在这里插入图片描述
现是一个漂亮的小精灵了。最后一步,让小精灵的脚对齐地平线。你可以一个一个的手动调整,也可以全选后一下搞定,很简单吧。
在绘制顺序Draw Order节点下通过Shift+点击来选择所有部件。
在这里插入图片描述
然后仍然使用Translate tool工具,拖动小精灵让它的脚正好落在地平线上。
在这里插入图片描述
你可能会问,另外两个头的图片应该怎么办?总之head2 和head3 先放在哪别管,我们接下来会讲到。

肢体使用多张图片

Draw Order节点上方有一个root节点,点击root 边上的下拉箭头。你会看到所有肢体部件被列出来。
在这里插入图片描述
点击head 边上的下拉箭头,你将会看到附加在身体上的头部。
在这里插入图片描述
你可以为每一肢体添加多张图片,并切换它们进行动画。从Images节点中把head2 拖放到root下的head节点中。
在这里插入图片描述
另外当你把head2 拖到画布上时,他可能默认位于原点位置,只要把它移动到正确的位置就行了。head3也同样的操作。
在这里插入图片描述
如果你想切换精灵不同的表情,在树状态层级中点击眼睛图标这一列的点。
在这里插入图片描述
现在所有的图片都摆好了,你可以开始为小精灵创建骨骼了。

添加骨骼

是时候给你的精灵创建骨骼了,否则他怎么动呢。
在树形层级中,选中root 列表。
在这里插入图片描述
然后在Spine下方的Tools面板中选中Create 工具。
在这里插入图片描述
在小精灵的胸部中点,点击,这将创建一个骨点叫作bone1(也可能就叫bone).
在这里插入图片描述
现在从小精灵的头部的下边沿拖拽到帽子(从1点下,拖到2,放开)。这将会在他的脖子处创建一个新的骨骼。
在这里插入图片描述
附加的骨点自动命名为bone2,出现在bone1的层级下面。因为bone2bone1的子节点。这意味着,你只要移动bone1,那么bone2bone1的其它所有子节点都会随着移动。
在这里插入图片描述
在层级窗口中选择bone1,这将使新创建的骨骼成为bone1的子节点。
在这里插入图片描述
在手臂与身体相接的位置击并向下拖拽至肘部创建出bone3
在这里插入图片描述
对右臂、双腿重复上面的步骤,首先在层级窗口中点选bone1
在这里插入图片描述
然后在右臂与身体相交的位置点击拖拽到肘部。
在这里插入图片描述
再回到层级窗口选中bone1
在这里插入图片描述
接着,在左腿与身体相接的位置点击拖拽到膝部。
在这里插入图片描述
在右腿上重复同样的操作。
在这里插入图片描述
在这里插入图片描述
现在小精灵的骨架架设完成了。头部、手臂、双腿的骨点都连在身体的骨点下!
注意:如果有需要的话,你可以给角色创建更复杂的骨架。可以有肩、肘、腕、脚踝、尾巴甚至可以有服饰。如果你要添加上臂和前臂,那你需要把前臂作为上臂的子物体,而上臂作为身体的子物体。这样手臂的所有切片素材就连成了一个整体。

装配骨骼到身体上

现在看上去小精灵的身体的骨架都有了,但它们之间还没建立联系。你不相信?激活旋转工具Rotate然后选择任意骨骼。
在这里插入图片描述
在场景上任意空白区域,按下左键拖拽。骨骼在转,但是小精灵的身体没动。
在这里插入图片描述
Ctrl+Z 撤销刚才的旋转。现在来看层级树。你会看到骨骼和肢体图片并没有相互匹配,而是分开的放着。
在这里插入图片描述
如何装配它们呢?你必须…
你猜对了:直接拖放!点中body拖到bone1
在这里插入图片描述
注意!现在body到了bone1下面。他们已经装配成功了,就像合体了一样。
在这里插入图片描述
head拖到bone2装配好精灵头部的骨骼。
在这里插入图片描述
如果你还是对层级关系感到迷惑。判断身体各部分是否匹配正确的最好办法就是像你前面做过的那样,用旋转工具转一下骨头,如果图片也随着骨头相应的在动,那就正明OK了。你随时可以Ctrl+Z 撤销刚才错误的操作。
在这里插入图片描述
拖放顺序如下:(这里要说明一下,这个教程有点坑,骨骼还是应该创建同时就命名好。其实有技巧的《Spine入门之认识界面》装配模式》技巧8

  • lArm 到bone3
  • rArm 到bone4
  • lLeg 到bone5
  • rLeg 到bone6
    在这里插入图片描述
    你现在有了一套功能完整的骨骼系统。但有没有发觉?目前为止你所做的就不过只是拖放、拖放、拖放。接下来给你的小精灵添加动画吧。要做的仍然还是拖放、拖放、拖放,你猜到了吗?

一个站立动画

你要做的第一个动画就是让小精灵站着。你可能会问“他不是已经站着了吗?这不用做了啊!”
是的,圣诞老人的小助手已经站好了,但是他干站着多无聊的说。你将给他添加一些微妙的变化,这会很有意思的。
点击Spine左上角的SETUP切换动画模式,在屏幕下方可以看到时间线了。
在这里插入图片描述
在这里插入图片描述
选中层级树中的动画节点,然后按底部的新建动画按钮New Animation
在这里插入图片描述
命名就叫“standing”(站立)吧。
在这里插入图片描述
在这里插入图片描述

使用摄影表Dopesheet和自动关键帧 Auto Keying

假设你在用的是调用版或专业,高级功能是可以访问的。但如果你用的是基础版像自动关键帧这类功能就木有了。
想象摄影表就是有更多高级设置的时间线。自动关键帧:当你为你的角色调整动作时,Spine会自动为你创建关键帧。也许你会问“嘛是关键帧”?
顾名思义就是最关键的帧。比如你要做一个小球从左边滚到右边的动画。你需要创建两个关键帧,一个小球在最左边时,别一个是小球在最右边时。中间的帧是自动计算出来的叫“中间帧”,也叫“补间”。
在Spine下方的面板中,点击摄影表Dopesheet 和自动关键帧Auto Key
在这里插入图片描述
按住Ctrl键选择left arm, right armhead骨骼
在这里插入图片描述
Transform面板中有三个绿色的钥匙图标。点击它们,让其变成红色。
在这里插入图片描述
在这里插入图片描述
很简单,你已经为它设置了初始关键帧。在摄影表中可以看到它们。
在这里插入图片描述
在这个动画里,不用设置腿,因为他是站着不动的。此外一但你启动了自动关键帧Auto Key,那之后就不用再手动去点小钥匙图标了。你只管调动作,Spine会自动为你创建关键帧。
先择旋转Rotate 工具,然后选中精灵的头部骨骼。
在这里插入图片描述
在摄影表的时间线上点击第5帧,把时间线移到这里。为了简单点,你后面就都用5帧为间隔好了。
在这里插入图片描述
现在在场景中点击拖拽精灵的头部,让他有一点微妙的前倾。这里的关键点是微妙的前倾,除非你想要一个非常卡通的效果,那就猛拖吧。因为你打开了自动关键帧功能,所以Spine为你在第5帧自动创建了关键帧。
在这里插入图片描述
在这里插入图片描述
你还能改变他的面部表情。在层级树中找到bone2,点击边上的小三角图标,展开层级,下面有一张head图片。
在这里插入图片描述
点击显示列(眼睛图标的那一列)的控制点,把精灵的微笑表情head显示出来。
在这里插入图片描述
如果你看到(钥匙图标)这一列的显示红色的点,表显示OK了。如果你看到的一个黄色的点,它表显示你进行了操作,但还没有创建关键帧。点一下黄色的点,把它变成红色,这就成功的设置了一个图片切换关键帧。
在这里插入图片描述
在这里插入图片描述
在摄影表的时间线上,点击第10帧的位置。在场景中旋转精灵的头部,使其微微前倾。
在这里插入图片描述
为了提高动画制作效率,你可以复制粘贴关键帧。确保选中头部的骨骼(1),在时间线的第5帧standing这行,在选中白色的关键帧图标,然后点击复制按钮(2)。
在这里插入图片描述
点一下时间线,切到第15帧(1),然后按下粘贴按钮(2)。
在这里插入图片描述
现在选择第0帧,然后点复制,选中第20帧,再点粘贴
在这里插入图片描述
在播放控制区,激活“循环播放”按钮,然后播放。你的精灵现在前后点头。
在这里插入图片描述
注意:如果你想进一步试验,可以在其它帧上改变精灵的头部图片。选中你要操作的帧,在层级树中选中别的头部图片,然后把黄色的点切成红色,设置一个图片切换帧。

完成动画

现在制作手臂动画。切到第0帧,然后选中右臂的骨骼。接下来是和前面头部动画一样的步骤。
在这里插入图片描述
切到第5帧,并把他的右臂略向外转。
在这里插入图片描述
第10帧,再向外略转一点。
在这里插入图片描述
第5帧standing行,选中白色条形图标,然后复制粘贴第15帧
在这里插入图片描述
第0帧standing行,选中白色条形图标,然后复制粘贴第20帧
在这里插入图片描述
重复同样的制作,为左臂设置动画。然后播放查看效果。现在小精灵有一套完整的动作了。
在这里插入图片描述

行走并被绊倒的动画

如果你是个动画新人,刚才看上去好像做了很多工作。事实上,刚才所做的全部内容只不过是:选择关键帧,移动精灵的肢体,复制粘贴关键帧。在传统动画的年代,你刚刚做的这些起码要花一整天才能完成。
现在你会创建一个新动画,小精灵走两步,然后被绊倒。既然你已经用自已的方式成为了一名专业的动画师,那下面这些步骤看上去会非常熟悉和快捷。
在树层级窗口中选中Animations,然后点New Animation创建一个名叫walking的动画。
在这里插入图片描述
你已经创建了一个创新的动画,所以Spine把小精灵重置为了默认的绑定POST。** (绑定POST是指在绑定模式下,装配角色的最终效果。在未添加任务动画时,这就是角色默认的姿势。) 来到第0帧**,按住Shift键,在层级树中选中所有骨骼
在这里插入图片描述
在变换面板Transform中把所有绿色的钥匙图标点成红色。这一步是为它们设置初始关键帧。
在这里插入图片描述

首先走两步

来到第5帧,选中精灵的左腿骨骼向前微微旋转,然后选中右臂骨骼向前微微旋转。当人类(包括精灵)行走时,手脚是左右交替运动的。所以别让你的角色甩“同边手”哦。
在这里插入图片描述
到时间轴第10帧,把左腿右臂向前多转一点。把右腿左臂向后多转一点,把也向转一点
在这里插入图片描述
第15帧做相反的动作,把左腿向后右腿向前,等等。
如果你为精灵的脚不踏地而烦恼,可以选中body的骨骼,然后用Translate移动工具,移动躯干来使精灵的脚合适的踩踏在地平线上。这就是前面的教程中,为什么要把body的骨骼作为其它骨骼父级的原因。
在这里插入图片描述

然后摔倒

摔倒动作从第20帧开始。当一个人被绊倒时,他的脚停滞在身后,两臂挥向前,并且头向后仰。现在开始在小精灵身上模拟出这一瞬间的状态。
还有,现在是把头部的图片切换成head2 的时候了。记住要显示head2,就得在层级树窗口中找到它,把眼睛图标那一列的显示点选上。然后单击head节点(slot类型的那个)前面钥匙图标那一列的小黄点,让它变成红色。
在这里插入图片描述
第25帧,使用移动工具Translatebody 骨骼向上提起,让精灵离开地面。然后用旋转工具Rotate 旋转精灵让他表现出向前摔倒的动作。然后继续旋转手、脚、脖子等等。
如果你发现有些肢体脱离了躯干,用移动工具Translate 把它们移回去。
在这里插入图片描述
第30帧,可以让你的精灵像超人一样在空中心飞翔了。
在这里插入图片描述
第35帧,小精灵开始落回地面。
在这里插入图片描述
第40帧,精灵开始接触地面。
在这里插入图片描述
第45帧,切换精灵头部图片为head3。以表现出地面的冲击给精灵造成的影响。(脸着地很疼的说)
在这里插入图片描述
第50帧,让你的精灵脸部着陆。现在你可以选择添加一下细节来提高动画的效果。当一个脸着陆时,它的头会略有反弹,我们在第51帧head骨骼向上旋转一点,然后再第53帧,再转回来。
在这里插入图片描述
现在你已经制作了一个小精灵站立和一个用脸着陆的动画。任何时候只要你想切换两个动画,只要点它前眼睛图标那一列的点就行。
在这里插入图片描述

导出你的成果

如果你把Spine从试用版升级成基础或专业版,那就可以使用导出功能 了。首先点击左上角的Spine标志,然后在弹出菜单中选导出(Export)
在这里插入图片描述
JSON导出,大概就是你要的。它以简洁的方式记录了Spine运行库能识别的动画数据。将elf.json保存在桌面的SpineElf_START文件夹。
如果你还不知道如何将动画应用到你的APP中,你可以看下Spine运行库相关的资料。
在这里插入图片描述

接下来何去何从?

这是篇非常基础实例教程,向您演示了Spine能做些什么。你可以试着继续添加过度帧来调整时间节奏(Timing),添加不同的图片素材,创建更复杂的骨骼,或是其它你能想到的任何东西。
我创建了一个更加复杂点的精灵摔倒动画。你可以下载它。你如你没有基础版或专业版的Spine,那么你没法打开工程文件。但是你可以将我提供的JSON文件,导入到你的游戏中。
如果你对动画有兴趣,那《动画师生存手册》这本书绝对值得拜读的。据我所知,每个动画师的工作室里都会有一本,它就如同一位动画的导师一样。如果你不喜欢普通的纸制书,它也有iPad版。
最后,如果你喜欢我们的教程,敬请期待即我们即将推出的“如何将你的动画整合到Sprite Kit引擎”
如果你有任何问题、评论或建议,请在下面随意留言。

附上原教程地址

一不做二不休,再来个广告吧
教程PDF版+素材,以防万一打包了一份到 https://download.csdn.net/download/jx520/10719966

没有更多推荐了,返回首页