Spine2D 骨骼动画教程


欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 1 页 共 54 页 Spine 2D 骨骼动画教程 如果你曾经开发过2D 游戏并需要使用精灵动画,你可能要求美术人员创建 逐帧动画,例如这个教程中的 iOS Games by Tutorials: 然后你可能会写一些代码来快速播放这个图片序列,以模拟出动画效果,就 像这样: 这个方法实现起来很简单,但有几个严重的缺陷:  内存和闪存占用率高。 要因为你要为动画的每一帧生成一张精灵图片,它们会占用大量存储空间。 你要动态处理一个不小的精灵,而在你的动画中有大量的精灵要处理,这会带来 一个坑爹的问题。这个问题在移动设备上尤为严重,因为内存容量和闪存容量都 很有限。  制作动画的成本高昂。 绘制完整的一帧需要花费美术人员很多时间。如果在动画完成后,要进行调 整将会更耗时。  能自已做动画的码农毕竟不多。 因为要手绘每一帧,如果你是个码农那就得跪求美术人士来做动画,如果随 后要加特效你还得去跪求人家。 在您的游戏中使用2D 骨骼动画系统,就能解决这些麻烦。 它并不会把动 画中的每一帧存储下来,取而代之的是存储像下面这样身体的各个部分: 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 2 页 共 54 页 然后你可以创建一个很小的动画文件,它定义了如何移动身体各个部分,使 其按照你想要的效果表演动画,如走、跑或跳。然后你可以在游戏中用代码读取 动画文件,自动为身体的每个部分创建精灵,然后按照文件中描述的数据动画它 们。 当然手动创建一个2D 骨骼动画系统,是项疯狂的工作。幸福的是 Esoteric Software 已经为我们创建了这样伟大的工具 Spine。 Spine 的图形界面能让你以交互的方式,为每一个精灵创建骨骼,然后用骨 骼创建你要在游戏中使用的动画。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 3 页 共 54 页 Spine 还自带了庞大的预制运行库 Spine runtimes,这是一个奇妙的方式 “在你的游戏中添加读取 Spine 文件的代码,然后它为创建动画。”Spine 的运 行库,支持目前所有主流的游戏引擎 Unity, Sprite Kit, cocos2d 等等。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 4 页 共 54 页 在本教程中,你将用 Spine 制作一个笨拙的小精灵行走和跌倒的动画。这 个过程中你将学会:  导入图片到 Spine 中  为精灵构建一套骨架  创建两个不同的动画  保存和导出你的成果 要注意的是本教程不包括将动画结果导入到游戏中;那将是一个独立的教 程。本教程的重点是如何使用 Spine 本身,而不理会你将选择哪种游戏引擎。 如果你已准备好迈出 Spine 的第一步,那就让我们开始吧! 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 5 页 共 54 页 开始(Getting Started) 首先第一件事:你要先下载并安装 Spine. Spine 支持 Windows, Mac 和 Linux. 有三个版本,五种授权方式供你选 择。详情看下面红色说明。 (教程原文中关于购买 Spine 这一块的资料年代过于久远,下面提供个链接,里面有 2014-04-06翻译的 Spine 购买页面。 到 http://pan.baidu.com/s/1ntiBY2X 找 “Spine 购买页_Spine_Purchase_Page_20140406.zip” 能显示动态信息 或 “Spine 购买页_Spine_Purchase_Page_20140406.png” 静态图片 别外这是官方的购买页面: http://esotericsoftware.com/spine-purchase ) 对于本教程的内容,你在试用版中都可以做到。然而在教程最后,你会发现 试用版无法导出你的动画。如果你完成了教程的其它本分,并且渴望在你的应用 中看到自已制作的动画,那你应该考虑购买基本版或专业版 Spine 许可,这样 你就可以保存和导出你的成果了。 那么选择一个版本下载吧,安装并运行它。如果你用的是 Mac,当你试图 运行 Spine 时你可能会看到下面的提示信息: 点击继续你将打开 Apple 的支持页面。在页面中的第一段里点击 http://xquartz.macosforge.org 链接。跳到 X Quartz 下载页面。下载并安装 X11,然后再次运行 Spine,现在它能正常启动了。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 6 页 共 54 页 一旦你顺序打开 Spine,欢迎你的将是一个示例项目。 当你准备开始学习如何创建自已的动画时,如果你有兴趣,可以随意研究示 例项目。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 7 页 共 54 页 Spine 导入图片 为了让你专心学习 Spine,我为你准备好了小精灵的切片素材,接下来你将 用它创建制作动作。 点击这里下载素材,把文件夹解压到桌面,这样便于在 Spine 中找到它。 点击左上角的 Spine 标志,选择新建项目 New Project. 在右边的层级树面板中选择图像节点 Images,然后点击下面的浏览 Browse. 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 8 页 共 54 页 在你的桌面上找到 SpineElf_START 文件夹,选中后确定。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 9 页 共 54 页 现在文件夹中所有的图片显示在了 Images 节点下。 现在按正常情况来说你应该保存项目了,第一条准则“在整个过程中,随时 保存!”。 遗憾的是如果你用的是试用版,就木有保存功能。当然拉,如果你升级到基 础版或专业版,你就可以按 Ctrl+S 或 Cmd+S 保存项目了,把它保存在 SpineElf_START 文件夹中。 如要你使用的是试用版,也别烦恼。你在使用 Spine 制作动画的过程,也 就是体验一场刺激的冒险游戏的过程。到于 Ctrl+S 是胆小鬼才干的事,对于威 武雄壮的你自然是不屑一顾的。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 10 页 共 54 页 装配角色 要创建你的角色,你需要去当地的大学里,报名参加点解剖学和美术学方面 的课程。呵呵!骗你的!其实本教程为你提供了美术素材,你只要拖放切片素材 到场景中就行了。 在 Images 节点中选中 body 然后拖放到场景中。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 11 页 共 54 页 一开始我不知道怎么平移动画布,所以我用一个超搓的办法来改变画布位 置。用鼠标滑轮先缩放,然后光标放到另一个位置放大,这样来移动画面。后来 Update:@mig_akira 告诉我,可以按住右键移动鼠标来移动画布!非常感谢他。 现在再把 head 拖到场景中。 拖动 lArm, lLeg, rArm 和 rLeg 到场景中,但是 head2和 head3不动。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 12 页 共 54 页 如果你手抖把它们拖进场景了,别担心。Ctrl+Z 或 Cmd+Z 撤销刚才的错 误操作。尽管你有胆在制作中不保存,但再倔强的人也不会拒绝 Ctrl+Z 的。 现在要装配精灵了,我看好你哦。在变换栏 Transform 中,找到位移工具 Translate tool ,然后选中精灵的头部。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 13 页 共 54 页 把精灵的头放到他的身体上边。如果场景不够宽,你可以用鼠标滚轮缩放视 口,也可以用 Spine 左下角的缩放工具来操作。 还是使用位移工具 Translate tool 移动精灵的手臂和腿放到适当的位置。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 14 页 共 54 页 改变显示顺序 等等!....为毛左臂和左腿在身体的上面?而不是在身体背后。看起来你得调 整一下各部分的顺序。 在 Images 上方你会看到绘制顺序 Draw Order 列表。如果你熟悉 Adobe Photoshop 或 Sketchbook Pro,可以想象绘制顺序 Draw Order 就类似于 层。列表中显示在上方的切片,在场景中也相应的显示在上方。 要调整绘制顺序只需简单的在列表中上下拖动。调整顺序从上向下像这 样:rArm, rLeg, head, body, lLeg 和 lArm. 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 15 页 共 54 页 现在你的精灵看起来应该是这个样子了: 现是一个漂亮的小精灵了。最后一步,让小精灵的脚对齐地平线。你可以一 个一个的手动调整,也可以全选后一下搞定,很简单吧。 在绘制顺序 Draw Order 节点下通过 Shift+点击来选择所有部件。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 16 页 共 54 页 然后仍然使用 Translate tool 工具,拖动小精灵让它的脚正好落在地平线 上。 你可能会问,另外两个头的图片应该怎么办?总之 head2 和 head3 先放 在哪别管,我们接下来会讲到。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 17 页 共 54 页 肢体使用多张图片 在 Draw Order 节点上方有一个 root 节点,点击 root 边上的下拉箭头。 你会看到所有肢体部件被列出来。 点击 head 边上的下拉箭头,你将会看到附加在身体上的头部。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 18 页 共 54 页 你可以为每一肢体添加多张图片,并切换它们进行动画。从 Images 节点 中把 head2 拖放到 root 下的 head 节点中。 另外当你把 head2 拖到画布上时,他可能默认位于原点位置,只要把它移 动到正确的位置就行了。head3也同样的操作。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 19 页 共 54 页 如果你想切换精灵不同的表情,在树状态层级中点击眼睛图标这一列的点。 现在所有的图片都摆好了,你可以开始为小精灵创建骨骼了。 添加骨骼 是时候给你的精灵创建骨骼了,否则他怎么动呢。 在树形层级中,选中 root 列表。 然后在 Spine 下方的 Tools 面板中选中 Create 工具。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 20 页 共 54 页 在小精灵的胸部中点,点击,这将创建一个骨点叫作 bone1(也可能就叫 bone). 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 21 页 共 54 页 现在从小精灵的头部的下边沿拖拽到帽子(从1点下,拖到2,放开)。这将 会在他的脖子处创建一个新的骨骼。 附加的骨点自动命名为 bone2,出现在 bone1的层级下面。因为 bone2 是 bone1的子节点。这意味着,你只要移动 bone1,那么 bone2和 bone1的 其它所有子节点都会随着移动。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 22 页 共 54 页 在层级窗口中选择 bone1,这将使新创建的骨骼成为 bone1的子节点。 在手臂与身体相接的位置击并向下拖拽至肘部创建出 bone3。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 23 页 共 54 页 对右臂、双腿重复上面的步骤,首先在层级窗口中点选 bone1。 然后在右臂与身体相交的位置点击拖拽到肘部。 再回到层级窗口选中 bone1。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 24 页 共 54 页 接着,在左腿与身体相接的位置点击拖拽到膝部。 在右腿上重复同样的操作。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 25 页 共 54 页 现在小精灵的骨架架设完成了。头部、手臂、双腿的骨点都连在身体的骨点 下! 注意:如果有需要的话,你可以给角色创建更复杂的骨架。可以有肩、肘、 腕、脚踝、尾巴甚至可以有服饰。如果你要添加上臂和前臂,那你需要把前臂作 为上臂的子物体,而上臂作为身体的子物体。这样手臂的所有切片素材就连成了 一个整体。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 26 页 共 54 页 装配骨骼到身体上 现在看上去小精灵的身体的骨架都有了,但它们之间还没建立联系。你不相 信?激活旋转工具 Rotate 然后选择任意骨骼。 在场景上任意空白区域,按下左键拖拽。骨骼在转,但是小精灵的身体没动。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 27 页 共 54 页 Ctrl+Z 撤销刚才的旋转。现在来看层级树。你会看到骨骼和肢体图片并没 有相互匹配,而是分开的放着。 如何装配它们呢?你必须...... 你猜对了:直接拖放!点中 body 拖到 bone1。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 28 页 共 54 页 注意!现在 body 到了 bone1下面。他们已经装配成功了,就像合体了一 样。 把 head 拖到 bone2装配好精灵头部的骨骼。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 29 页 共 54 页 如果你还是对层级关系感到迷惑。判断身体各部分是否匹配正确的最好办法 就是像你前面做过的那样,用旋转工具转一下骨头,如果图片也随着骨头相应的 在动,那就正明 OK 了。你随时可以 Ctrl+Z 撤销刚才错误的操作。 拖放顺序如下:(这里要说明一下,这个教程有点坑,骨骼还是应该创建同时就命 名好。)  lArm 到 bone3  rArm 到 bone4  lLeg 到 bone5  rLeg 到 bone6 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 30 页 共 54 页 你现在有了一套功能完整的骨骼系统。但有没有发觉?目前为止你所做的就 不过只是拖放、拖放、拖放。接下来给你的小精灵添加动画吧。要做的仍然还是 拖放、拖放、拖放,你猜到了吗? 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 31 页 共 54 页 一个站立动画 你要做的第一个动画就是让小精灵站着。你可能会问“他不是已经站着了 吗?这不用做了啊!” 是的,圣诞老人的小助手已经站好了,但是他干站着多无聊的说。你将给他 添加一些微妙的变化,这会很有意思的。 点击Spine左上角的SETUP切换动画模式,在屏幕下方可以看到时间线了。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 32 页 共 54 页 选中层级树中的动画节点,然后按底部的新建动画按钮 New Animation。 命名就叫“standing”(站立)吧。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 33 页 共 54 页 使用摄影表 Dopesheet 和自动关键帧 Auto Keying 假设你在用的是调用版或专业,高级功能是可以访问的。但如果你用的是基 础版像自动关键帧这类功能就木有了。 想象摄影表就是有更多高级设置的时间线。自动关键帧:当你为你的角色调 整动作时,Spine 会自动为你创建关键帧。也许你会问“嘛是关键帧”? 顾名思义就是最关键的帧。比如你要做一个小球从左边滚到右边的动画。你 需要创建两个关键帧,一个小球在最左边时,别一个是小球在最右边时。中间的 帧是自动计算出来的叫“中间帧”,也叫“补间”。 在 Spine 下方的面板中,点击摄影表 Dopesheet 和自动关键帧 Auto Key。 按住 Ctrl 键选择 left arm, right arm 和 head 骨骼 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 34 页 共 54 页 在 Transform 面板中有三个绿色的钥匙图标。点击它们,让其变成红色。 很简单,你已经为它设置了初始关键帧。在摄影表中可以看到它们。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 35 页 共 54 页 在这个动画里,不用设置腿,因为他是站着不动的。此外一但你启动了自动 关键帧 Auto Key,那之后就不用再手动去点小钥匙图标了。你只管调动作, Spine 会自动为你创建关键帧。 先择旋转 Rotate 工具,然后选中精灵的头部骨骼。 在摄影表的时间线上点击第5帧,把时间线移到这里。为了简单点,你后面 就都用5帧为间隔好了。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 36 页 共 54 页 现在在场景中点击拖拽精灵的头部,让他有一点微妙的前倾。这里的关键点 是微妙的前倾,除非你想要一个非常卡通的效果,那就猛拖吧。因为你打开了自 动关键帧功能,所以 Spine 为你在第5帧自动创建了关键帧。 你还能改变他的面部表情。在层级树中找到 bone2,点击边上的小三角图 标,展开层级,下面有一张 head 图片。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 37 页 共 54 页 点击显示列(眼睛图标的那一列)的控制点,把精灵的微笑表情 head 显示 出来。 如果你看到(钥匙图标)这一列的显示红色的点,表显示 OK 了。如果你看 到的一个黄色的点,它表显示你进行了操作,但还没有创建关键帧。点一下黄色 的点,把它变成红色,这就成功的设置了一个图片切换关键帧。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 38 页 共 54 页 在摄影表的时间线上,点击第10帧的位置。在场景中旋转精灵的头部,使其 微微前倾。 为了提高动画制作效率,你可以复制粘贴关键帧。确保选中头部的骨骼(1), 在时间线的第5帧,standing 这行,在选中白色的关键帧图标,然后点击复制 按钮(2)。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 39 页 共 54 页 点一下时间线,切到第15帧(1),然后按下粘贴按钮(2)。 现在选择第0帧,然后点复制,选中第20帧,再点粘贴。 在播放控制区,激活“循环播放”按钮,然后播放。你的精灵现在前后点头。 注意:如果你想进一步试验,可以在其它帧上改变精灵的头部图片。选中你要操作的帧, 在层级树中选中别的头部图片,然后把黄色的点切成红色,设置一个图片切换帧。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 40 页 共 54 页 完成动画 现在制作手臂动画。切到第0帧,然后选中右臂的骨骼。接下来是和前面头 部动画一样的步骤。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 41 页 共 54 页 切到第5帧,并把他的右臂略向外转。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 42 页 共 54 页 第10帧,再向外略转一点。 在第5帧 standing 行,选中白色条形图标,然后复制,粘贴到第15帧。 在第0帧 standing 行,选中白色条形图标,然后复制,粘贴到第20帧。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 43 页 共 54 页 重复同样的制作,为左臂设置动画。然后播放查看效果。现在小精灵有一套 完整的动作了。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 44 页 共 54 页 行走并被绊倒的动画 如果你是个动画新人,刚才看上去好像做了很多工作。事实上,刚才所做的 全部内容只不过是:选择关键帧,移动精灵的肢体,复制粘贴关键帧。在传统动 画的年代,你刚刚做的这些起码要花一整天才能完成。 现在你会创建一个新动画,小精灵走两步,然后被绊倒。既然你已经用自已 的方式成为了一名专业的动画师,那下面这些步骤看上去会非常熟悉和快捷。 在树层级窗口中选中 Animations,然后点 New Animation 创建一个名 叫 walking 的动画。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 45 页 共 54 页 你已经创建了一个创新的动画,所以 Spine 把小精灵重置为了默认的绑定 POST。(绑定 POST 是指在绑定模式下,装配角色的最终效果。在未添加任务 动画时,这就是角色默认的姿势。)来到第0帧,按住 Shift 键,在层级树中选中 所有骨骼。 在变换面板 Transform 中把所有绿色的钥匙图标点成红色。这一步是为它 们设置初始关键帧。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 46 页 共 54 页 首先走两步 来到第5帧,选中精灵的左腿骨骼向前微微旋转,然后选中右臂骨骼向前微 微旋转。当人类(包括精灵)行走时,手脚是左右交替运动的。所以别让你的角 色甩“同边手”哦。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 47 页 共 54 页 到时间轴第10帧,把左腿和右臂向前多转一点。把右腿和左臂向后多转一点, 把头也向转一点 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 48 页 共 54 页 在第15帧做相反的动作,把左腿转向后,右腿转向前,等等。 如果你为精灵的脚不踏地而烦恼,可以选中 body 的骨骼,然后用 Translate 移动工具,移动躯干来使精灵的脚合适的踩踏在地平线上。这就是前面的教程中, 为什么要把 body 的骨骼作为其它骨骼父级的原因。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 49 页 共 54 页 然后摔倒 摔倒动作从第20帧开始。当一个人被绊倒时,他的脚停滞在身后,两臂挥 向前,并且头向后仰。现在开始在小精灵身上模拟出这一瞬间的状态。 还有,现在是把头部的图片切换成 head2 的时候了。记住要显示 head2, 就得在层级树窗口中找到它,把眼睛图标那一列的显示点选上。然后单击 head 节点(slot 类型的那个)前面钥匙图标那一列的小黄点,让它变成红色。 在第25帧,使用移动工具 Translate 把 body 骨骼向上提起,让精灵离开 地面。然后用旋转工具 Rotate 旋转精灵让他表现出向前摔倒的动作。然后继续 旋转手、脚、脖子等等。 如果你发现有些肢体脱离了躯干,用移动工具 Translate 把它们移回去。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 50 页 共 54 页 到第30帧,可以让你的精灵像超人一样在空中心飞翔了。 在第35帧,小精灵开始落回地面。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 51 页 共 54 页 第40帧,精灵开始接触地面。 在第45帧,切换精灵头部图片为 head3。以表现出地面的冲击给精灵造成 的影响。(脸着地很疼的说) 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 52 页 共 54 页 的第50帧,让你的精灵脸部着陆。现在你可以选择添加一下细节来提高动 画的效果。当一个脸着陆时,它的头会略有反弹,我们在第51帧把 head 骨骼 向上旋转一点,然后再第53帧,再转回来。 现在你已经制作了一个小精灵站立和一个用脸着陆的动画。任何时候只要你 想切换两个动画,只要点它前眼睛图标那一列的点就行。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 53 页 共 54 页 导出你的成果 如果你把 Spine 从试用版升级成基础或专业版,那就可以使用导出功能 了。 首先点击左上角的 Spine 标志,然后在弹出菜单中选导出(Export)。 JSON 导出,大概就是你要的。它以简洁的方式记录了 Spine 运行库能识 别的动画数据。将 elf.json 保存在桌面的 SpineElf_START 文件夹。 如果你还不知道如何将动画应用到你的 APP 中,你可以看下 Spine 运行库 相关的资料。 欢迎入群 Spine2D 骨骼动画 7708065 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 第 54 页 共 54 页 接下来何去何从? 这是篇非常基础实例教程,向您演示了 Spine 能做些什么。你可以试着继 续添加过度帧来调整时间节奏(Timing),添加不同的图片素材,创建更复杂的 骨骼,或是其它你能想到的任何东西。 我创建了一个更加复杂点的精灵摔倒动画。你可以下载它。你如你没有基础 版或专业版的 Spine,那么你没法打开工程文件。但是你可以将我提供的 JSON 文件,导入到你的游戏中。 如果你对动画有兴趣,那《动画师生存手册》这本书绝对值得拜读的。据我 所知,每个动画师的工作室里都会有一本,它就如同一位动画的导师一样。如果 你不喜欢普通的纸制书,它也有 iPad 版。 最后,如果你喜欢我们的教程,敬请期待即我们即将推出的“如何将你的动 画整合到 Sprite Kit 引擎” 如果你有任何问题、评论或建议,请在下面随意留言。 附上相关链接: 附上原教程地址 一不做二不休,再来个广告吧 教程中的素材,以防万一打包一份到百度盘 pan.baidu.com/s/1ntiBY2X
还剩53页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

missforest

贡献于2014-08-13

下载需要 6 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf