# 前言

  • 上一篇文章记录了 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

image

  • 还好某游的模型文件都是有命名规律的,这里看到 *.atlas , *.skel , *.png 文件都是以 Figure 开头命名的,和上一篇文章一样,将这些文件全部按照路径分组全部导出

image

  • 将自己喜欢的模型所需要的文件单独复制在一个文件里

image

# 制作 Spine 模型

  • 启动 Live2DViewerEx,选择 Ex工作室 --> Spine编辑器 --> 选择模型文件夹 ,点击右下角的 创建配置文件 ,添加上相应的文件

image

image

  • 确定以后就能看到效果了,如果没有找到模型的话可以调整一下左上角缩放大小

image

  • 接着和上一篇文章一样添加待机动画

image

  • 接着添加触摸动画

image

image

image

  • 接着绑定动作,和 live2d 一样也是可以添加语音和台词的

image

  • 确定以后就可以测试触摸效果了,点一下左边的 显示可触摸区域 可以查看点击范围

image

  • 点一下旁边的预览按钮就可以加载到桌面上了,前提是需要先启动 Live2DViewerEX 然后再启动 EX工作室 才行

image

# 在网页上加载 Spine

  • 上面提到想要加载 Spine 模型,就必须用到对应版本的运行时

  • 在 Live2DViewerEX 中刚好可以显示模型的版本,可以看到这个模型的对应的 Spine 版本是 3.6.53

image

  • 然而遗憾的是上面也提到了 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

image

  • 用这种方法转换出来的文件会不会丢掉什么东西?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
更新于 阅读次数