# 前言
- 上一篇文章记录了 Live2d 模型的提取方法,接下来记录 Spine 模型的提取方法
# 对 Spine 的一些个人理解
Spine 其实是一款 2D 动画软件,通过将贴图绑定到骨骼文件中,然后再控制骨骼就可以实现不同的动作效果,相对于 live2d 有着更小的内存开支,通常 Spine 模型都需要以下几种文件
*.skel
:骨骼的二进制文件,也有*.josn
形式的文件,后者体积比较大,但是前者在 web 上的兼容性不好,Spine 官方的运行时也是到 3.8 以后才开始支持读取二进制文件*.png
: 喜闻乐见的分尸图,为什么是 Png 格式就不用多说了*.atlas
:存放贴图文件的信息,通常第一行记录贴图文件的路径,其余的是各个部件以及其对应的坐标信息,通过 Spine 编辑器可以使用该文件对贴图文件再次拆解值得一提的是,加载 skel 文件必须使用其对应编辑器版本的运行时才行,也就是说如果一个 skel 文件是使用 3.6 版本的 Spine 编辑器创建的,那么就必须使用 3.6 版本的运行时才能成功加载这个模型,官方自己的 Spine 编辑器也不例外
# 提取游戏资源
- 和上一篇文章的流程一样,用 AssetStudio 直接读取 Mumu 模拟器中复制出来的游戏资源,加载后搜索一下
atlas
或者skel
- 还好某游的模型文件都是有命名规律的,这里看到
*.atlas
,*.skel
,*.png
文件都是以 Figure 开头命名的,和上一篇文章一样,将这些文件全部按照路径分组全部导出
- 将自己喜欢的模型所需要的文件单独复制在一个文件里
# 制作 Spine 模型
- 启动 Live2DViewerEx,选择
Ex工作室
-->Spine编辑器
-->选择模型文件夹
,点击右下角的创建配置文件
,添加上相应的文件
- 确定以后就能看到效果了,如果没有找到模型的话可以调整一下左上角缩放大小
- 接着和上一篇文章一样添加待机动画
- 接着添加触摸动画
- 接着绑定动作,和 live2d 一样也是可以添加语音和台词的
- 确定以后就可以测试触摸效果了,点一下左边的
显示可触摸区域
可以查看点击范围
- 点一下旁边的预览按钮就可以加载到桌面上了,前提是需要先启动
Live2DViewerEX
然后再启动EX工作室
才行
# 在网页上加载 Spine
上面提到想要加载 Spine 模型,就必须用到对应版本的运行时
在 Live2DViewerEX 中刚好可以显示模型的版本,可以看到这个模型的对应的 Spine 版本是 3.6.53
然而遗憾的是上面也提到了 Spine 官方的 web 运行时到 3.8 版本后才开始支持读取二进制文件
.skel
详细的官方运行时 demo 可以在 github 上找到,左上角的分支
3.8
对应的是运行时https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-ts
如果我想将这个模型加载到 web 上,就只能想办法修改 skel 文件的版本或者转 json 格式了
或许可以早 Spine 编辑器中重新加载 Skel 然后再重新导出想要的版本?理论上可行但是网上的 Spine 破解版我也只找到 3.8 版本的。对于 3.6 的模型它完全加载不出来,切换版本还莫名报错了。正式版的 Spine 还死贵后来放弃了后来在各种搜索引擎上搜了一通后总算找到了一个可以将低版本 skel 文件转成 3.8 版本 json 文件网站
https://naganeko.pages.dev/chibi-gif
用这种方法转换出来的文件会不会丢掉什么东西?emmmmm 不好说,但是在一部分 sdk 中加载后某些部件显示是不正常的,不过这个也有可能是运行时本身的原因如果各位大佬有更好的解决办法请在篇文章下留言
# 参考链接
# Spine 模型提取
- https://www.bilibili.com/read/cv18073492
# Spine 文档
- http://zh.esotericsoftware.com/spine-runtimes
# Spine Demo
- https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-ts
# Skel 版本转换
- https://blog.csdn.net/Z478942073/article/details/128981520
- https://naganeko.pages.dev/chibi-gif/
# 网页上加载 Skel
- https://pelom.cn/archives/106
- https://www.cnblogs.com/c10udlnk/p/15846185.html