骨骼动画编辑器——Spine

骨骼动画编辑器——Spine,第1张

这笔记是来自cocos2d-x官网,各位不要喷!我只是给我自己使用的,未来一系列的游戏文章都是这样。因本人平时使用手机较多,故写在上方便本人使用而已。

Spine是一款针对游戏的2D骨骼动画编辑工具,它具有良好的UI设计和完整的功能,是一个比较成熟的骨骼动画编辑器。Spine旨在提供更高效和简洁的工作流程,以创建游戏所需的动画。

非常棒的教程: http://zh.esotericsoftware.com/spine-quickstart#Character-Images

1)在SETUP模式下,选中Images属性,导入所需图片资源所在文件夹,其中路径名和资源名中茄启租不能出现中文,否则解析不了;

2)拖动Images下的图片到场景,对角色进行组装(把旁梁各个身颤兆体部位拼在一起),可通过Draw Order属性调整图片所在层的顺序;

3)创建骨骼,并绑定图片到骨骼上,要注意各骨骼的父子关系。

4)切换到ANIMATE模式,选中要“动”的骨骼,对其进行旋转、移动、缩放等 *** 作,每次改动后要记得打关键帧。

5)在菜单栏找到Texture Packer项,对角色纹理进行打包,资源文件后缀为atlas(而非Cocos2d-x常用的plist)。打包后将生成两个文件,即:png 和 atlas。

6)导出动画文件Json。

Cocos2d-x程序中,使用Spine动画首先需要包含spine的相关头文件。

其常用方法如下:

创建一个Spine动画对象,将动画文件和资源文件导入。

例如:当人物需要行走时,就设置播放动画为行走;当要发动攻击时,就设置播放动画为攻击。下面方法可以设置当前播放动画,其中参数false表示不循环播放,true表示循环播放。

setAnimation方法只能播放一种动画,所以当要连续播放不同的动画时,需要使用addAnimation方法来实现,它可以一条一条的播放不同的动画。

设置动画的播放快慢可通过设置它的timeScale值来实现。

设置是否显示骨骼通过设置debugBones,true表示显示,false表示隐藏。

效果图:

视图

    用来调整各个窗口位置

打开

    在右上角,视图,点击就可以打开

    已经打开的窗口是灰色的,不能再点了

选项卡

    每个窗口都有一个标题、可以换位置(不重要)

调整大小 (嗯)

最小化

    这里最小化之后是放在顶部栏 视图旁边、点开就放大了、重新点菜单也可以

关闭(嗯)

多显示器

    不支持浮动窗口、

    别开这么多窗口

动画视图

    3.8版本没有从视图打开的(穷)

动画列表

    点击动作对应的白点、亮的就是激活的

    双击动作、改名字

    点动画、属性下边有个新建、能新建新的动作

摄影表视图

    3.8没有从视图列表点开的、点下边这个一样

传输控制

    功能依次是:开始帧、上一帧、反着播(暂停)、播放(暂停)、下一帧、最后一帧、循环播放

时间轴

    每秒30帧、

    橙色菱形图标表示这一帧有关键帧

    橙色的线表示最后一帧(不是竖的长方形)

    时间轴刻度可以缩放、鼠标放时间轴上、滚动滚轮就可以、或者右下角有个滑轨、滑动是一样的功能

    在时间轴上鼠标右键按住还能左右拖动

时间轴位置

    哪有绿色的线啊、我没有看到啊、设置不出来啊

    往下看后

    点击跳转点击的那一帧、也可以拖动、按住shift 更精确会有小数点

    开启循环后、拖过最后一帧、会直接跳到第一帧、循环去掉就不会了

    当前帧按钮如果是激活状态播放帧太后面的话,会自厅兆扮动移动时间轴刻度,让竖线在中间

    输入指定帧回车后可以跳转到指定帧、指定帧可以是小数

关键帧

    就是那些有颜色的长方形、

    白色、多个关键帧

    颜色和属性用的颜色是一样的、旋转是绿色的、点出来的关键字也是绿色的、移动是蓝色的

    第一行:表示整个动画、显示动画名、点击动画名会跳转

    第二行:是骨骼、+点击展开 -点击收起、收起会是一个汇总信息、将帧信息合并、按住ctrl点击会列出所有有动作的骨骼

    第三行:具体信息变更、直线是线性过渡、有弯曲是贝塞尔曲线过渡(怎么设置还不懂)、没有线前后帧数据没变化

内容

    好多东西啊(已心烦)

    1.鼠标点击一下编辑区、按Esc、会列出所有的动画

    2.选中有帧动画的物体、就只显示这个物体的帧信息

    有个锁、这个锁会锁住当前展示的内容、会导致以上两条不生效

    锁起来了、旁边有个刷新按钮、点了会根据1、2刷新当前应该是怎么显示

    骨骼选择也会亮起、点了会把树相关的骨骼选中

    如果有多个骨架、情况我也不知道(应该用不上、用上了看是啥样就啥样吧)

其他行

    事件、绘制顺序放最底层

选中

    点击关键帧、会选中关键帧、同时把播放轴指向当前帧、按住ctrl,就不会把播放轴移过来了、按住ctrl、还有多选的功能、

    在骨骼那一栏选中会把那一帧的所有关键帧都选中

    按住鼠标、拖动可以框选关键帧

    “如果单击关键帧时摄影表被锁定,那么会在编辑器区域中选择该关键帧的对应项目。这样就很容易跳到时间轴位置并修改时间轴。”

        能跳吗?都锁住了怎么跳?(暴躁)

*** 作关键帧

    拖动帧我猜橡能理解、按住shift拖动是啥

    按住shift 会更精细、可以是小数(好像也没啥毛病、收起你的怒气)

复制、剪切、删除、粘贴

    就是复制粘贴、还可以对不同的骨骼进行复制粘贴

缩放

    框选可以整体拖动选中的内容、按住shift 能够更精细

    框的左右两边、鼠标放上去会变成 左右箭头、按住可以左右拖动

    从右边拖到左边,序列帧就是逆向了

关键帧移位

    激活位移、移动某一帧、之后的帧也会跟着移动

    快捷键那个说明 *** 作不来——咱不学

关键帧调整

    激活调整、选择多个关键帧、修改位置或旋转或缩放会在原来的基础上做修改、相对在不改变原有节奏的情况下、整体调整

    但是用这个功能的时候把自动关键帧去扮灶掉、不然会让你摸不着头脑

关键帧偏移

    针对循环动作、第一帧和最后一帧的参数一样

    在不改变节奏的情况下,让循环起始位置在循环周期的任意一刻

    比如循环是 1 2 3 4 5 4 3 2 1   可以改成 2 3 4 5 4 3 2 1 2 或者 5 4 3 2 1 2 3 4 5(这波理解给自己满分、顶级理解)

循环

    激活循环、播放就会循环、也可以设置指定帧循环

自动关键帧

    有改动就会生成关键帧、默认是打开的、后期修改的时候不要选上

幻影

    设置影子的位置、前是可以拖尾的、后这个不知道在什么情况下会用到

    前帧数:在这帧数内会产生幻影、

    帧步幅:可以调整残影的数量、用前帧数除以帧步幅可以得到影子的数量、生成影子后会间隔该值生成残影

关键帧

    这个和上边一样、不过这个是对关键帧、到关键帧才会生成残影

显示

    给残影上色、左边是给拖尾

    残影可以是图片、也可以是纯色、或者不显示

    残影轮廓有X射线、剪影(用起来、一样的)

        设置轮廓、纯色残影、会消耗大量 GPU 资源、能不用就不用

选项

    勾选顶部、残影的层级会在原图像的上边

    勾选循环、残影一直存在(在第一帧就会根据最后一帧计算出来)、去掉开始不会有残影

偏移

    偏移能让角色跑步的时候脚的落地位置一样

锚点

    取消锚点、影子会动

    选中锚点、影子是生成

选中

    选需要有残影的骨骼、( *** 作没试、试完再来改)

图表

    可以设置关键帧过渡的急缓、

    速度变化有

        匀速

        贝塞尔曲线控制

        突变试(没有过渡)

    点开始要设置关键帧、有曲线就能设置

    X轴是时间

    Y轴是变化的值(基于选中的帧、前后值作为百分比)

    曲线开始的点是选中的关键帧位置,结束的点是下个关键帧的位置

    曲线是蓝色的,多选的时候,当前选中的是蓝色、其他是灰色。起到一个对比的作用

曲线类型

    线性

        匀速变化

    贝塞尔

        由控制点调节、速度变化

    阶梯

        无变化、知道下一帧

拆分

    在已经设置曲线变化的帧之间加入新的关键帧、会自动匹配曲线、保证加入新关键帧之后曲线过渡不流畅

多选

    多选的时候,当前选中的是蓝色、其他是灰色

匹配

    选中匹配后,调整一个句柄、其他都会跟着调、(和上边的拆分不一样)

网格工具视图

    单击多个网格顶点,进行缩放、移动、选择调整

软选择

    会在直接变形和使用权重工具设置权重时影响网格顶点的选择。

    把大小调大之后、就知道是怎么用的了、顶点太多可以不用一个个点

大小

    选择区域的大小

羽化

    影响的程度

外壳顶点

    是否包含网格外边界

指标视图

    骨架在运行时的情况、看看数据是否异常

骨骼

    bones:骨骼数

    对于移动设备 1000 ~ 2000 就会出问题(所有骨架加起来的骨骼)

约束

    constraints:骨架中约束总数

插槽

    slots:骨架中插糟的总数

    数量无所谓,几乎不影响性能

时间轴

    动画是由数个“时间轴”组成

总计

    total:附件总数、不影响渲染性能、只会影响加载速度(一点点)

可见

    visible:附件可见总数

    边界框不影响渲染性能

顶点

    vertices:所有可见区域和网格附件的顶点数,顶点数表示有多少几何形状发送给 GPU

顶点变换

    变化顶点数

三角形

    triangle:表示有多少顶点索引发给GPU

区域

    Area:图片像素数

选中

    选中附件、会显示对应信息、

    选中多个附件、出现斜杆、斜杆前是当前的信息、斜杆后是总信息

性能

    过度关注性能只会浪费时间、先把东西做出来、在优化

    确定最大的瓶颈、解决收到的效果才显著

CPU 使用率

    CPU 使用率最重要的指标是骨骼、时间轴、顶点变换和约束。过多使用其中任何一项都会造成问题。

    优化方向

        多个骨架,可以每帧只更新一部分,使用轮转的方式。

        仅让少数骨架实现动画效果,并使用这些姿势来渲染大量骨架。(没懂)

填充率

    试图绘制的像素高于 GPU 可接受的帧速率

    每次绘制像素时都会计算填充率

    解决方案只有一个:减少绘制的像素。

    用网格来避免绘制透明像素

    应该隐藏附件,不是设置阿尔法值为零

    例如:用单个较大的图片替代两个或多个重叠图片

绘制调用

    让 GPU 进行绘制是一项耗费资源的 *** 作。

    如果要绘制多次,GPU 可能无法以可接受的帧速率完成绘制。

    大多数游戏工具包会将尽可能多的几何形状批处理打包,从而减少 GPU 绘制次数。

    当 GPU 需要从不同纹理绘制时才会刷新批处理包,因此使用 纹理图集 来减少纹理切换。

    对于不使用 预乘阿尔法 渲染的游戏工具包,对插槽使用累加混合也可能造成批处理包更新。

轮廓视图

    用于查看整体骨架

显示

    右键拖动可以平移、滚轮放大缩小

移动编辑区

    点击任意位置、编辑区将该位置置于中心

    橙色的框是编辑区显示的区域

    提供另一种快速调整细节的方式

播放视图

    动画模式下,可以点开播放视图

    每秒30帧、可以在这里改成其他的

速度

    速度可以任意调、要看整个动画是否有问题可以把速度调的很慢。

    这里改变的速度、不会导出

    不过程序可以自己在播动画的时候调速度

步进式

    只会播关键帧、

插值式

    禁用会让动画看起来不流畅、

预览

    预览最终做出的动画效果、修改参数会实时同步

    点击(右上角 三条竖的滑条)、

    隐藏控件、勾选只显示预览的窗口、隐藏调整参数窗口

    播放当前动画、当前选哪个就播哪个

显示

    左右点击都可以拖动、滚轮放大缩小

动画列表

    列出了所有的动画

    点哪个播哪个动画

速度

    调整播放速度检查动画是否有问题、

    黄色箭头是重置的意思

混合

    切到下一个动画的时间

    循环就是循环动画的意思

轨道

    0  1   2  3  4   是轨道名字  不是数量

    同时播几个动画的功能、

Alpha

    不是简单的动画覆盖、

    Up动画设置为轨道0,Down动画设置为轨道1

    具体作用未知

Skins view

    皮肤视图、对于管理皮肤、或者查看很有用

Skin list

    皮肤列表

    列出了所有皮肤

    双击重命名

Pins

    针脚 固定皮肤展示

Pinned skins

    固定的皮肤会集中在下边窗口中

    顺序可以拖动

插槽颜色视图

    需要修改插槽的颜色的时候、打开这个窗口可以、慢慢调

尺寸

    这个窗口可以拖大拖小

Timeline view

    时间轴:和动画下边的一样

层级树

    这个视图是固定打开的、

展开与收起

    小三角、可以展示和收起

快捷键

    双击有些可以改名字

    或者双击是新建

选中

    点哪个选哪个

    按住ctrl可以多选

    按住shift 可以选之间

属性

    属性顶部有三个按钮

    (两页纸)复制、(R)重置、(X)删除

拖放

    节点可以拖动

自动滚动

    想 ‘回 ’ 的那个图标、

    在编辑区选择后在层级树中会自动展开选中、默认激活、不激活就不会自动展开了

筛选

    漏斗

    显示想看的

查找与替换

    放大镜和笔、一次性修改名字

    查找出来之后 绿色箭头表示可以修改、红色是不能改(不能重名)

正则表达式

    正则表达式提供强大的查找方式

    可以模糊查找

    ^ 匹配开头:

    查找: ^something

$ 匹配结尾:

    查找: something$

    . 匹配任何单个字符:

        查找: s.mething

    .* 匹配全部:

        查找: some.* 括号用于对匹配进行分组,可在替换中使用:

        查找: `some(th.)

        替换:other$1

        结果:something->otherthing`

图片预览

    先按一次ESC 然后鼠标放图片上、停住、或者按F1可以查看图片

权重

    将网格顶点绑定到一个骨骼上、也可以多个骨骼

    绑定之后做动画只需要改骨骼 不用慢慢调网格顶点

    复杂动作、简化

绑定

    打开权重窗口

    选择网格、点击绑定、选择骨骼、选择骨骼、ok 

    退出按ESC 或者再点绑定

    解除绑定、选择网格节点后、在权重窗口删除要解除的骨骼

权重工具

    一般自动就可以

    非要设置这么做

        1.选中网格

        2.网格顶点放大来看、如果权重不一样就会看到饼状图、去掉勾选可以不显示饼图

        3.先按Esc 点编辑区拖动、框选网格顶点

        4.按住ctrl 一个个点也可以选择

        5.模式选择的是直接、点顶点往上拖增加权重、往下拖减少权重,或者拖动权重滑块也是一样

平滑

    点击平滑按钮会和附近的点平均分配权重

    没有选顶点点了平滑、会对所有顶点 *** 作平滑

    点一次分配一次

叠加

    勾选叠加:用颜色表示骨骼影响的权重

    勾选所选:选择当前的、如果叠加也选了、就只显示所选骨骼影响的权重颜色分布

动画模式

    动画关键帧不能设置权重变化,改了和非动画模式是一样的

欢迎屏幕

    spine启动的界面

项目

    可以新建、可以打开

    可以打开最近 *** 作的

    也可以查看例子

消息

    新的博客文章

提示

    提示界面

学习

    学习资料

变更日志

    版本修改日志

导出

    可以导出图片、序列图片、视频、json、二进制数据

    导出快捷键 ctrl + E

JSON

    1.导出json目前项目使用的格式

    2.容易阅读

    3.数据大、解析慢

    4.还有更多细讲在后面

    导出界面说明

        输出文件夹:选择导出位置、文件名字是骨架的名字

        扩展名:.json

        格式:json、js、Minimal(导出内容和json差不多、需要单独的解析器-比如libgdx)

        非必要的数据:使文件变大、渲染骨架不需要的内容也包含含码绝进去了(比如、想重导回spine就需要这些数据)

        优质打印:方便阅读的输出打印

        创建图集:用到的图片打成一张图集、但很死板

        纹理打包器:后面讲、希望能看到想要的

二进制

    1.更小(多小)

    2.不能阅读

    3.会使之前导出的无效是什么鬼、改动了不是都要重新导出吗、

    4.还有更多细讲在后面

    导出界面说明

        输出文件夹:选择导出位置、文件名字是骨架的名字

        扩展名:.json   (还是json)

        非必要的数据:使文件变大、渲染骨架不需要的内容也包含进去了(比如、想重导回spine就需要这些数据)

        创建图集:用到的图片打成一张图集、但很死板

        纹理打包器:后面讲、希望能看到想要的

GIF

    动态图、这种格式只支持谈姿256中颜色、不支持半透明

JPEG

    导出的是序列帧

PNG

    导出的是序列帧

AVI

    导出视频

QuickTime

    MOV 视频文件

命令行

    使用脚本导出、或者打包图集

前提条件

    版本2.1以上

     OS 视窗系统及 OpenGL

用法

    导出: Spine [-i <project.spine>] [-o <path>] -e <path>

    打包: Spine -i <path>-o <path>-p <name>

Windows

    Windows 版 Spine 有两个可执行文件: Spine.exe 和 Spine.com(用这个) 

     Spine - e C :\ path \ to \ export . json

纹理打包

    可以打包成图集或者网格

    有很多高级打包算法

    用不同尺寸的图进行打包测试、选效果最好的

打包

    纹理打包器两种运行方法:

    1) 导出 JSON 或二进制时,勾选 创建图集 :

        只打包各个骨架引用的图片,会忽略文件夹结构以及 JSON 文件。

    2) 从主菜单选择 纹理打包器 :

        然后指定用于打包的图片路径:

设置

    最重要的设置包括:

    1) 最大宽度/高度, (2048 * 2048)

    2) 是否使用预乘 alpha (颜色值乘以透明度)

    3) 是否执行去除空白。 使用网格了,就不能选去除空白。

区域

    去除 X/Y 轴空白区       删除空白像素、使用网格的时候不能选这一选项    

    旋转                             图片旋转90,可以最小的打出图集

    别名                             允许相同的图片有不同的名字

    忽略空白图片               整个只有透明像素的图片 不打包(这就没必要、用透明图片肯定有理由、这项不要选)

    Alpha 阈值                   去除空白区时,透明度低于该数值将直接改成0

区域填充

    填充 X/Y        图片之间填充像素保持间隔 默认2

    边缘填充        大图的边缘也有间隔

    复制填充        不用空白填充、用靠近的小图的像素填充

页面

    最小宽度/高度         图集最小尺寸(不管)

    最大宽度/高度         图集最大尺寸(2048 * 2048)模神

    2的幂数                   长宽尺寸设为2的幂数,一些游戏工具包需要。

    正方形                     设置宽度和高度。一些纹理压缩算法需要(如 PVRT )。

输出

    格式                      PNG 或 JPG (选png)

    JPG 品质              导出选jpg有这个选项 压缩JPG输出

    打包                      矩形、网格、多边形  (除了矩形另外两个打出来会是什么?)

    预乘 alpha            像素 RGB值 * alpha值, 推荐在适当混合时使用。

    溢出                      先把透明像素变成别的颜色,然后过滤透明颜色(用了这个就不能用预乘alpha、所以也不需要知道这是啥)

    缩放                      缩小图集(省资源)

    后缀                      这个试一下吧

选项

    图集扩展名        .atlas 和 .plist  目前只认识这两(不过应该是不支持.plist的吧两个结构都不一样,这里后缀还可以任意填)

    合并子目录        当前文件夹和所有子文件夹将打包到相同页面。子文件夹中的所有 JSON 设置文件均被忽略。

    去除路径            图片文件名不得重复

    使用索引            小图的名字可以有多个

    快速                    打包可能慢点,程序用的快啊

    调试                    打包出来的图片上边有线,显示打包图片边界

运行时

    略(今天看官方文档,怎么和昨天不一样了 今天:2021-12-1)

文件夹结构

    spine 支持按文件夹打图集

    文件夹归类、同一批次渲染应该放在同一个文件夹

    不同皮肤不会同时出现放在不同的文件夹中

JSON 配置

    spine打包图集设置可以保存成一个json,下次可以直接加载这个json来配置

    可以配置多个json配置、在打图集的时候按类加载这些配置

    具体字段用的时候在看官网文件(来不及了)

Ninepatch

    NinePatch 是可伸缩的位图

    在原图片(.png)上添加了1px的边框

    可以自动调整图形大小以适应视图内容

    NinePatch图像保存的后缀名为.9.png

    spine 中不用这种图

    可以手动或使用此工具创建Ninepatch图片。

    图片必须有1px的透明边框。

    上边缘和左边缘可以选择有一条连续的黑色像素行,表示分割信息,即Ninepatch的哪一部分将拉伸。

    下边缘和右边缘可选有一条连续的黑色像素行,表示填充信息,即应该如何插入Ninepatch上方的内容。

    打包此图片时,1px边框将被去除,分割和填充信息将存储在图集数据文件中。    

    这东西是九宫格吧

图片索引

    名_01  、名_1

    序列帧

    纹理解包器——图集拆分、还原成散图

导入

    导出的json和二进制都可以用来导入

项目

    支持多人处理同一个骨架

    导入骨架、动画

骨架

    选择导入的骨架名

动画

    选择导入的骨架、和动画名

    两个骨架树要一致、否则数据会丢失

数据

    导出的json和二进制数据 可以用来导入 菜单Impor Data

比例

新建项目

创建新骨架

导入到现有骨架

现有附件

非必要数据


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/12522145.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2025-08-26
下一篇2025-08-26

发表评论

登录后才能评论

评论列表(0条)

    保存