Spine入门——认识界面

Spine?

Spine 是一款针对游戏的 2D 骨骼动画编辑工具。 Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画。

优势 Benefits

在 Spine 中通过将图片绑定到骨骼上,然后再控制骨骼实现动画。 2D 骨骼动画 相对于传统的逐帧动画有以下优势:

  • 最小的体积: 传统的动画需要提供每一帧图片。而 Spine 动画只保存骨骼的动 画数据,它所占用的空间非常小,并能为你的游戏提供独一无二的动画。
  • 美术需求: Spine 动画需要的美术资源更少,能为您节省出更多的人力物力更 好的投入到游戏开发中去。
  • 流畅性: Spine 动画使用差值算法计算中间帧,这能让你的动画总是保持流畅 的效果。
  • 装备附件: 图片绑定在骨骼上来实现动画。如果你需要可以方便的更换角色的 装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。
  • 混合: 动画之间可以进行混合。比如一个角色可以开枪射击,同时也可以走、 跑、跳或者游泳。
  • 程序动画: 可以通过代码控制骨骼,比如可以实现跟随鼠标的射击,注视敌人, 或者上坡时的身体前倾等效果。

摄影表

在动画制作过程中摄影表是最核心的地方。这里包含了所有重要的细节,通过它可以创建动画以及对时间轴进行微调。

网格

允许你在矩形边界内自定义多边形。这将提高最终纹理贴图集的空间使用率,因为在多边形外的像素将被忽略掉,这种优化对移动设备来说特别重要。网格的另外一个功能就是支持自由变形和蒙皮。

曲线编辑器

在曲线编辑器中可以通过调整贝赛尔曲线来控制两帧之间的差值,以实现栩栩如生的动画效果。

自由变形

自由变形也称为FFD,是Free-Form Deformation的简写,它允许你通过移动网格点来变形图片。FFD 能实现网格的:拉伸、挤压、弯曲、反弹,等一些矩形图片无法实现的功能。

反向动力学工具

姿势工具可以利用反向动力学便捷的调整姿势。

蒙皮

蒙皮允许将网格中指定的点附加给指定骨骼。然后附加点将随着骨骼移动,网格则随之自动发生变形。现在可以用骨骼动作控制角色的图片进行弯曲变形了。

皮肤

皮肤可以为做好的动画切换图片素材。通过改变附加在骨骼上的图片来实现动画的重用。

输出格式

Spine 能将项目中的动画导出为 JSON 或二进制格式文件,它们能在 Spine 运行时库中完美的再现。 Spine 同时还可以导出 GIF 动画, PNG 或 JPG 序列图,还有 AVI或 QuickTime 的视频文件。

边界框

边界框可以附加在骨骼上,并且随着骨骼移动。它主要用于碰撞检测和物理集成。

导入

Spine 通过路径查找并导入由其它工具生成的数据文件,它能够识别符合要求的JSON 或二进制格式数据。也可以从别的 Spine 项目中导入骨架和动画。

纹理打包

Spine 能将图片打包成纹理贴图集,这能提高你在游戏中的渲染效率。Spine 的纹理贴图打包工具拥有很多功能比如剥离空白区域,旋转,自动缩放等等…(主要目的是为了充分利用空间)

运行库 Runtimes

制作出惊艳的动画只是工作的一部分 —— 您还需要在游戏中显示它们。Spine运行库可以让您的游戏引擎播放这些动画,效果就如同在动画编辑器里显示的那样。
Spine运行库提供了一组API,可以直接访问骨骼(bones),附件(attachments),皮肤(skins)和其它动画数据。在程序中可以控制骨骼,混合动画、淡入淡出等等。
官方的运行库放在GitHub上,并授权允许Spine用户在其程序中使用Spine运行库。这里提供了所有源码,它将是你游戏中必不可少的一部分。

支持的游戏引擎 (English)

  • cocos2d-iphone – Objective-C
  • cocos2d-x – C++
  • Corona – Lua
  • Flash – ActionScript 3, demo
  • libgdx – Java, HTML5 demo, game demo
  • LÖVE – Lua
  • MonoGame – C#
  • SFML – C++
  • Starling – ActionScript 3, demo
  • Three.js – JavaScript, demo
  • Torque2D – C++ / TorqueScript
  • Turbulenz – JavaScript, demo
  • Unity – C#, demo, documentation
  • Unity 2D Toolkit – C#
  • XNA – C#

更多Spine运行库详细的资料可以去官方网站查看

开发 Development

Spine尚在积极开发中。我们经常一周发部多个新版本。您可以密切关注更新日志了解详情。如果想更详进的了解我们的开发计划和进度,请关注“Spine动画编辑器”和“Spine运行库”的 Trello board(一种管理进度的团队协作工具)。在上面你可以对开发任务进行投票和评论,还可以订阅它,这样当开发完成时,您就会收到电子邮件通知。

下面就先介绍一下界面相关的知识!


原文链接:http://blog.csdn.net/jx520/article/details/39102685

装配模式 Setup Mode

Spine 有装配、动画两种模式,顾名思义装配模式用来设置角色,所有创建删除之类的操作:创建骨骼、创建 IK、加入图片、创建网络,等等都在装配模式完成。创建一个新动 画时,角色的初始状态,就是从装配模式继承而来。你也可以随时返回到装配模式去调整,动画的初始参数,那么已经存在的动画也会相应发生变化。时刻清楚自已处于什么模式,能 排除你大多数的困惑。灵活的运用这一特性,还可以方便的统一调整角色形体。

功能区说明

  1. 主菜单:点击这里会弹出 Spine 的主菜单,按地球文明的习惯,一般:打开、保存、
    新建、导出、导入、系统设置,之类的功能都放在这里。《Spine 实用技巧大全》中
    讲解
  2. 项目名称:当前项目的文件名显示在这。
  3. 当前模式:【ctrl + tab】在 Spine 的装配模式、动画模式间切换。
  4. 层级树窗口按钮:【ctrl + T】点击展开和关闭层级窗口,拖拽调整窗口大小。
  5. 层级树窗口:以树型结构显示的大纲目录,项目中所有的对象都在这里,相当于
    Windows 资源管理器左边的导航窗格。
  6. 功能区:它是层级窗口底部的扩展面板,类似于 PS 上方的选项栏,会根据所选内容变化。节点的:新建、删除、复制、重命名、更改层级、修改属性等大多数操作都在这里。 自已分别选择一下各种节点,看看效果吧。
  7. 试用版:这个只有在试用版显示,意思就是告诉你这是试用版。如果你看到这个就不要再问,为什么我不能导出,为什么我不能保存这一类的问题了。
  8. 当前对象:当前选中对象的名称。如果选中多个对象就只显示数量。
  9. 视图缩放控制:【ctrl + F, ctrl + shift + F, ctrl + shift + alt + F】就是放大缩小场景
    中的对象,以方便显示嘛,那几个图标都点一下,看看效果吧。
  10. 工具:这个面板就叫工具,从上到下分别是IK【B】,权重【G】,创建骨骼【N】。(要 说明的是这个 Pose 和右边层级目录中的 Constraints 别搞混了,其实在别的软件中, 这两个东西是合在一起的叫作 IK,在这给拆成两半了)
  11. 变换工具:这里就是旋转、位移、缩放了,右边的小钥匙就是 K 帧按钮。绿色表示值 无变化,黄色表示改变了值,但未创建关键帧,红色表示已经改变了值并创建了关键帧。
  12. 坐标系:当前,父级,世界。这个就不解释了,不明白的就google吧。
  13. 抵消变换:主要的用途就是旋转、位移、缩放父对象时,保持它的子对象不动。
  14. 选项:这里是分别针对骨骼、图片、边界框的是否可选、是否显示的控制开关。自已 试试吧。

技巧

  1. 平移视图:右键按下平移视图。
  2. 缩放视图:1、滚轮缩放, 2、热键缩放【ctrl + F, ctrl + shift + F, ctrl + shift + alt
  • F】
  1. 旋转位移缩放:选中骨骼后,左键在空白区拖动就可以了,这样能避免误选的尴尬。
  2. 中键框选:上面的功能确实不错,不过通常习惯用左键框选,但当选中骨骼时,框选就 坑爹了。这时可以用中键,一样实现框选效果。
  3. 取消选择:双击左键,空白处单击中键,ESC 键,空格键(我习惯用空格播放,所以这 个热键我没用官方的设置)
  4. 只移动父级:请看功能区抵消变换
  5. PS 到 Spine:原画在 PS 中画好,切片分层,然后用脚本导到 Spine 中,动画师只要
    加上骨骼就可以做动画了。
  6. 创建骨骼:创建骨骼时,按住 Shift,能直接将高亮的图片纳为子物体。并且骨骼会以图 片的名字命名,方便吧。
  7. 重画骨骼:已创建的骨骼想调整怎么?直接按住 Alt,重画一次就行了。层级什么的,完 全不会变。(重画的时候也可以配合 Shift 哦。)
  8. 骨骼长度:在旋转、位移、缩放的状态下,将鼠标靠近骨骼末端,当出现小红圈时,就 可以直接拖动调整骨骼长度了。

动画模式 Animate Mode

Spine 有装配、动画两种模式,动画模式只为那些已经存在的对象创建动画,不会增删 任何现有对象,只是改变已有对象的属性参数。创建一个新动画时,角色的初始状态,就是从装配模式继承而来。你也可以随时返回到装配模式去调整,动画的初始参数,那么已经存在的动画也会相应发生变化。时刻清楚自已处于什么模式,能排除你大多数的困惑。灵活的运用这一特性,还可以方便的统一调整角色形体。

功能区说明

  1. 摄影表(时间轴):【ctrl + D】按住 Dopesheet 按钮拖拽可以调整窗口大小。这里就是 动画师的主要战场了。所有关键帧数据都显示在这里。摄影表的数据也是按层级显示的。 未选中任何对象时,摄影表默认显示整个角色的关键帧数据,第一行是当前动作名称,
    等同于:层级树(Tree) > 动画节点(Animations)下当前显示的那个动作。(小眼睛那一
    列是显示开关)
  2. 当前帧:可以输入数字,实现跳转。
  3. 循环起始点:点击设置当前帧为起始点,再次点击消除。开启循环,并设置了结束点时, 才有用。
  4. 循环结束点:点击设置当前帧为结束点,再次点击消除。开启循环,并设置了起始点时, 才有用。
  5. 自动关键帧:这个就不解释了吧。
  6. 幻影:(其实就是 FLASH 里的洋葱皮,没有用过 FLASH 也没关系,GOOGLE 一下,就
    知道了)它只是用于辅助调动画的预览效果,不能输出。
  7. 播放控制
  8. 折叠展开:折叠和展开摄影表中的层级对象。
  9. 锁定显示:锁定摄影中显示的对象,当你改选别的对象时,摄影表里不变。
  10. 刷新摄影表:锁定摄影表的情况下,通过它来更新摄影表以显示当前选中的对象。
  11. 选择摄影表中对象:锁定摄影表的情况下,通过它可以快捷的选中摄影表中显示的对象。
  12. 复制剪切删除粘贴:这几个东西就不说了吧。
  13. 整体平移关键帧:就是按住Alt移动关键帧的功能。
  14. 同时在多帧上修改对象:比如把角色,在所有帧统一向前移动N个单位。
  15. 翻转动画:框选关键帧缩放时,如果越过另一边界,能实现翻转效果。(好像默认就是 如此,开不开这个都一样)
  16. 播放按钮:地球通用,不多说了。
  17. 循环开关:【Ctrl + R】开启和关闭循环播放。
  18. 曲线编辑器:本来这里才应该是动画师的主战场。不过 Spine 中,曲线编辑器只算是 个配角了。只能显示两帧之间的过度。
  19. 过度方式:支持线性,贝塞尔,步进式三种。
  20. 匹配曲线:Match 可以实现复制曲线的效果。先选中你要复制的帧,然后选择一个或
    多个目标帧。源帧的曲线是亮的,目标的曲线是灰的。点一下贝塞尔手柄,目标就自动 匹配了。(鼠标靠近塞尔手柄会有反应。)换句话说,其实就是不开这个功能,你调曲 线就只影响第一个选择的帧,如果开了,就同时影响所有选择的帧。

技巧

  1. 单帧全选(关键帧):点击第一行(动作名称这行)上的关键帧图标,就能选择此帧上的所 有的关键帧。同理选中任何一个父级,它下面的属性的关键帧就会被选中。比如骨骼。
  2. 多帧框选(关键帧):当然也可以框选这一行,那么场景中所有的关键帧就都选中了。
  3. 关键帧的颜色:关键帧标记的颜色与其相关的属性对应,白色表示此父级下多个属性都
    创建了关键帧。
  4. 框选关键帧:按住 Ctrl 的同时拖拽,可以框选关键帧。这个主要是方便在鼠标所在处
    有关键帧的时候,如果直接按下就变成点选了。比如从第0帧开始向右框选,这种情况
    相信很多朋友都纠结过吧。
  5. 移动非整数帧:按住 Shift 的同时拖关键帧,就可以移动半帧了。(少用为妙)
  6. 整体平移(关键帧):按住 Alt 的同时拖关键帧,就可以整体平移右侧所有的关键帧。
  7. 复制关键帧:在要复制的关键帧上,按住【 Ctrl + Shift + 鼠标左键】。松开【Ctr +
    Shift】,鼠标左键不放,移动到你想要的位置。
  8. 复制曲线:查看功能区说明匹配曲线。
  9. 开启循环播放:【Ctrl + R】,开关切换。

层级树窗口 Tree

层级树窗口相对来说内容较多,所以单独讲解。【ctrl + T】展开和关闭,层级窗口。
层级树窗口,是一个树型结构显示的大纲目录,项目中所有的对象都在这里,相当于 Windows 资源管理器左边的导航窗格。对节点的创建、删除、改名、属性调整等基本操作 都在层级树窗口下方的扩展栏进行。它会根据所选对象不同而显示相应的选项。

功能区说明

  1. 显示过滤开关:骨骼、资源夹(Slot)、附件(attachments)。打开的就显示,关掉就不 显示了。
  2. 聚焦到选择:在场景中选择了对象,层级树中自动跳转以显示它。
  3. 文本替换:在《Spine 图片显示出错的处理方法》中有讲解。
  4. 层级树主体:分三列,第一列:显示开关,第二列:关键帧按钮(只有动画模式才显 示),第三列:层级节点。
  5. 节点介绍:
    • 角色骨架:顶级小人图标。一个项目中可以创建多个角色骨架。骨架下是一些主要 的类型子节点。与其它节点的创建方式稍有不同,角色骨架的创建按钮,在主菜单 里。
    • 骨骼:角色的骨骼层级关系都记录在这里。
    • 显示层级:显示层和骨骼层级是两个概念。图片前后遮挡关系,在这里调整。
    • 图片路径:这里显示硬盘上的图片资源。Spine 只是从路径引用图片,并没有把文
      件导进项目。只是原封不动的显示硬盘上文件夹的内容。
    • 皮肤:这个是换皮功能,是改变角色外观用的,比如官方例子的哥布林,男女切换。 它和蒙皮是两个东西。可以为角色创建多套皮肤方案,它们都将存放在此节点下。
    • 动画:一个角色可以创建多个动作,都存放在此节点下。
    • 事件:这个主要是在运行时,给程序发送参数用的。创建一个事件对象节点,然后
      按程序需求在指定帧上 K 上指定的参数。其实不要看到事件,就觉得高深艰涩。 在编辑器中,你就把它看成是一个骨骼,Interger,Float,String 三个属性其实和旋 转位置缩放本质上一样,你只要像平时那样,按需求在相应的时间 K 帧,就行了。
    • 约束:用于锁定 IK,实现踩踏关键帧效果,也就是角色动画中常说的“定脚”。
  6. 节点名称:节点的名称。右边三个按钮是复制,改名,删除。
  7. 骨骼长度:骨骼长度为0时,会显示成十字图标。只是看上去不一样,与其它骨骼没有
    什么不同。
  8. 继承变换:默认子物体会继承父级的变换属性。缩放、旋转,按需求勾选或取消吧。
  9. 骨骼颜色:加上颜色好辨认嘛。
  10. 创建:可以在骨骼下创建骨骼、资源夹(Slot)、皮肤占位符(Skin Placeholder)、边界
    框(Bounding Box)。不要问为什么不能创建图片这么2的问题了吧。都说了图片是从图
    片(Images)拖到进来的。
  11. 设置父级:【P】,选中对象,按 P,再点选父级。选中的对象就飞过去给人家当儿子
    了。其实直接在层级树里用鼠标拖拽也很方便。

  1. 激活边界:点上它就相当于一个边界框了,可以用来做碰撞了。

  1. 图片的路径:前面说了 Spine 的图片只是引用自硬盘上的。那它是怎么来确认图片路
    径的呢?项目所在路径 + Images 的 Path 属性 + 图片的路径。这就是一个最终用于 显示的图片路径。如果图片显示有问题,那你把这三段,拼起来看看,所指向的位置是 否是正确的。这方面的问题,可以看看《Spine 图片显示出错的处理方法》。
  2. 激活网格:勾上它图片就变成网格对象了。
  3. 参考背影:勾上它图片就变成参考图了,在场景中不可选,只在编辑动画时显示,不会
    输出到最终的动画数据里。
  4. 颜色叠加:叠加颜色,调整透明度什么的。(这个只能在装配模式设置,动画中不能更
    改)。要做颜色和透明度的动画,请操作资源夹(Slot)上的相应属性。

  1. 显示层级:图片的前后显示关系在这里调整,可以直接鼠标拖动,也可以选中后,用小
    键盘的【+ -】号调整(可以配合 Shfit)。不一定要在层级树中选,直接在场景中选中
    图片也可以按小键盘的【+ -】号调整。(补充说明动画模式下不能选图片,因为图片 上没有可动画属性,但是图片找到网格就可以选了,因为网络有动画可以做)

  1. 图片文件夹:将硬盘内容显示在这里。硬盘路径就是,项目文件所在目录 + Path 值。 改动了 Path 没有反应可以按 Refresh 刷新。
  2. 皮肤:只有一个创建按钮,就不多说了。
  3. 动画:这里也只有一个创建。
  4. 事件:这个也只有一个创建。
  5. 约束:这个也只有一个创建。

技巧

  1. 层级关系:通常是这样骨骼下可以放: 骨骼 > Slot > (图片、网络、皮肤占位符、边 界框),皮肤占位符下可以放图片、网络。
  2. 显示隐藏子物体:同学们都知道层级目标第一列就是显示开关,点一下就可以切换隐现 了,但是我要说用右键点击,可以把子物体一起隐藏,你知道了么?(不过并不完美, 因为它并不是用层级关系来实现的,只是批量帮你打开和关闭子物体的显示罢了)。
  3. 创建节点:快捷方法在类型节点上双击就可以直接创建此类型节点了。常规方法,选中 类型节点,在层级树窗口下方的扩展面板中点击相应的创建按钮。
  4. 展开和折叠节点:右键点击节点名称,就可以展开和折叠。
  5. 调整显示层级:请查看 功能区 17 显示层级

如果有任何疑问请在下方留言。

标签: spine

?>