前言

去年10月本人因为星铁连吃4次大保底而和米家游戏断绝关系，望周知

在彻底退坑了所有米家游戏之后，感觉一身轻松，但又觉得有些闲。
之前除了玩玩星铁，也就是在电脑上和朋友打打瓦了。手机上已经没有游戏了。
这时想起之前在tg看到过的一个日本小黄油（好像是因为男娘出了圈），来了兴趣，便去下载了一个

这是我第一次接触到DMM里区游戏，对我来说就像是打开了新世界的大门。玩了半年之后，已经大概摸清了
游戏一点也不好玩，但是人物立绘啥的是真好看，感觉霓虹的不少美术资源都集中在这里了

也有不少我喜欢的画师，宫濑、夸父等

动机

于是我自然而然地萌生了解包游戏资源来拿到人物立绘放到桌面观赏的想法。
研究了一些日子之后发现，不少游戏的立绘都是用的Spine，第一次接触到这玩意儿，不知道是什么东西
上网查了下好像和Live2D有相似之处？看起来似乎是做骨骼动画的

Spine的导出文件一般有3个：
一个骨架（.json或者是.skel文件）
一个纹理图集（.atlas或者是.atlas.txt）
还有一个png格式的贴图

其中skel文件是二进制格式，体积更小，但不可直接阅读

第一次拿到这些文件，不知道该怎么查看，上网查了下又询问了一番群友，总结大概有如下方法：
1.Spine官方的Viewer
2.第三方查看器
3.Live2DViewerEX
4.Spine运行时结合相应的软件
5.Spine软件

有个需要注意的问题就是Spine的版本问题，目前常见的Spine版本大概有3.5，3.6，3.7，3.8，4.0和4.1几个大版本
不同版本的Spine导出文件格式可能会有很大差异，因此不兼容，Spine官方的Viewer也提供了各个版本的查看器，
具体见https://en.esotericsoftware.com/spine-skeleton-viewer
3.8的查看器只能看3.8xxx版本，其他的均不行，向下也不行

当初第一个想到的是用Spine软件，但是正版似乎贵得要命，网上能找到的学习版也只有一个版本，于是放弃
理论上Spine官方给的Viewer完全够用，但是版本还得换来换去，后面想导出图片或者动画之类的也没法做到（毕竟是Spine专业版才提供的功能）
Live2DViewerEX有个Spine的DLC，10块钱，支持Spine动画，还提供了一个Spine的编辑器（不是真的编辑Spine）
具体见https://live2d.pavostudio.com/doc/zh-cn/exstudio/spine-editor/
也能当作一个Spine查看器，使用的是Unity的Spine运行时，而且似乎直接集成了很多版本
但是当作一个Spine查看器来用的话还是比较麻烦，每次都得新建配置文件，也不提供导出图片/动画的功能

转而看向第三方查看器，上github找了一圈，体验下来发现有几个能用的，但真没几个好用的，尤其是不同版本的支持

过了一段时间接触到了Electron，便打算利用官网提供的运行时自己写一个简单的查看器
顺带一提Spine官方给出的运行时中，比较好用且完善的应该算是Unity和Web的有一些如Python基本上都是几年没更新或者没人维护了的，也有不少第三方的运行时，参考https://en.esotericsoftware.com/spine-runtimes
不过最近Spine发布了4.2，也添加和更新了一些运行时

最初的想法是把所有常用版本的Web运行时都集成起来，然后用的时候根据文件切换，因为用的canvas所以也能自己实现导出图片或者动画的功能
后来听群友提起，发现了pixi.js有个Spine的插件pixi-spine，去看了一下竟然直接支持了3.6-4.1，实际上手用了一下发现体验也要比官方那个运行时好不少，于是果断放弃官方转而使用pixi-spine

边学边写奋斗了几天，用纯js写了一个初始版本：https://github.com/anosu/Spine-Viewer
现在看来似乎挺烂的，后来又花了一些时间拿Vue重写了一下，就有了现在这个：https://github.com/anosu/Spine-Viewer-Vue

教程

废话了这么多，现在进入正题

使用方法：
直接将骨架文件拖入窗口

软件设计成容器的模式，每个容器就是右侧菜单中的一层

每个容器中可以放多个spine对象，比如你可以一次拖动多个文件到窗口，那么就会在当前容器中创建多个sgonpine对象层叠起来显示，每个容器的状态显示在左侧菜单栏，并且这些是容器中所有spine对象的共有状态，共享同一个缩放、速度和mix等，左侧列出来的动画和皮肤也是容器中所有spine对象共有的（以名字为标识符），但是插槽是所有spine对象的插槽之和
同一个容器中多个spine对象的层级顺序阐述起来比较麻烦，因为和资源管理器中文件的排序有关，也和拖动的文件有关，见https://github.com/anosu/Spine-Viewer部分的readme
默认情况下在选中的容器中一次性拖入一个新的骨架时会先清空当前容器，也可以手动选择叠加来取消清空

右侧菜单可以新增和删除容器，容器间也有层级关系，可以通过上移和下移来调整，重置可以初始化软件的状态

整体上右侧菜单是控制所有容器和软件，左侧菜单是针对单个容器的设置，且使用上和Skeleton Viewer大同小异

关于左侧菜单的使用：

动画栏点击可以播放单个动画，点击+可以添加到动画队列（播放连续多个动画和导出用），不同层级的动画可以叠加
插槽的透明度可以通过滑块来调整，可以通过关键字筛选插槽
队列中存储着一系列动画的信息，播放队列时会按顺序播放队列中的动画，左侧的播放是针对单个容器，右侧的播放会同时播放所有容器，导出动画时会播放所有容器的队列，并且分辨率为展示区分辨率（所见即所得）
可以添加背景，每个容器的背景独立

展示区：

右键可以复制图片
左键按住拖动spine对象，右键按住拖动背景（如有）
左上角显示分辨率，右上角显示容器的位置

大概就这么多，还有一些小的方面自己摸索

一般来说正常使用的话绝大部分功能是用不到的，背景，多容器还有动画队列之类的

摸了~

为什么一张图片都没有，因为懒