起因就是昨天(2024.4.12)原神4.6前瞻出了,前瞻页也来了。我啪的一下,很快啊,直接点进去了。
前瞻页链接:https://act.mihoyo.com/ys/event/e20240413preview-pvtga2
我直接MY WAIFU(胡桃芙芙也是waifu(喜))
然后直接webstatic-extractor,启动!
webstatic-extractor:https://webstatic.cocogoat.work/
以前用这个网页直接薄纱了,一键提取各种图片和spine文件。不过这次好像啥都没提取出来,就提取到一个bgm(悲)
可恶!为了遵循我作为【记忆】令使的职责,我用Resources Saver这个插件把前瞻页的资源都存了下来。
网页的各种json和png都存下来了,其中包含了所有打包好的纹理图。
Resourse Saver提取出来的各种图片:
然后去睡午觉了。
但是,躺着的时候越想越气,MY WAIFU!
为了MY WAIFU,我决定成为学院偶像自己手动提取spine要的两个文件:.json和.atlas文件!
经过一番紧张刺激的google,我找到了这个:https://www.vg-resource.com/thread-41520.html
————<引用>————
This took me a while, but I managed to find Dehya’s .json and .atlas files.
How? Going to “vendors_0d58d93961ffe11e6f83.js”, we can see that the .json and .atlas files are loaded like this:
And so, I had to find her title files by copying the lines, remove the unnecessary bits, format them and imported them to Spine.
Dehya’s hair flowing animation? That’s not included in the .json, it may be procedurally animated.
Sadly, I’m not motivated enough to give you a full tutorial, but hopefully, this should help you out.
————</引用>————
呜哇,不认识的网友,你是我的神!
虽然从这个帖里我获得的信息只有从vendors_xxx.js这个脚本里面找,但是足够了!
用vs code打开vendors.js,然后我就搜skeleton(骨架),翻来翻去一个一个看,然后找到了:
然后仔细定睛一看,这个Mr类好像包含了一堆带了atlas和json的对象,这不就是我要的吗(喜)。
然后……看了一眼对象名字才意识到,为什么我要搜skeleton然后翻了100多条,而不是直接搜下载下来的贴图的名字……
Flash Back:
恼
Anyway,直接新建两个文本文档,把这两东西(json和atlas)直接扔进去就好啦。
理论上是这样,但是,实际上也是这样要稍微美化一下。
比如这个json,属性没用双引号括起来
幸好把大括号搞对,IDE可以直接美化好,不然自己加几千个双引号真的会死人的。
然后就是atlas了,一堆\n,只要用替换功能把“\n”换成换行符就行了。(温馨提示:Visual Studio Code里面输入换行符要按shift+enter)
至此,要的两个文件就提取完啦!
接下来就是在spine里面看MY WAIFU了,下面的内容随便找找spine的教程应该很容易学
但是,我懂,大家都喜欢傻瓜式教学,我也喜欢~
去spine官网下最新版的spine,trial版就ok(因为破解版版本太低了打不开,所以直接最新版)
准备工作:把xxx.json,xxx.atlas和对应的打包过的纹理图xxx.png放在同一目录下。
接下来,我们开始把打包好的纹理图用.atlas文件拆开。
打开spine之后直接新建一个项目,左上角的spine图标点一下,在目录里面选纹理解包器:
然后直接按着提示把.atlas和解压到的地方选好就ok,这个解压到的地方可以是任何地方,就叫A吧,不过为了方便可以直接解压到原来.json,.atlas在的那个文件夹里。
接下来就是导入骨架了。还是按左上角的spine图标打开菜单栏,这次选导入数据:
导入完.json之后就是这个样子,一个没纹理的骨架(这里用的是网页里的boss_puren)
看到MY WAIFU前的最后一步了:告诉骨架纹理图在哪里。
右边的层级树里,选择图片,在右下角可以看到一个路径:
这个路径就选你纹理图解包到的地方(也就是A)
(所以要是你直接在准备工作那一步里,在.json在的位置建一个子文件夹images,然后把纹理图解包到那里。导入骨架的时候就直接能看到MY WAIFU了。不过我感觉没必要,而且直接在准备步骤说这个好像有点不太合逻辑)(其实就是我懒)
然后,Tada!MY WAIFU!
当然,有些人可能看静图就满足了,不过不是我,
笔者:我要看动的,就像前瞻页里面一样动的!
还是笔者:很好,很有精神!
直接看向左上角的小人图标,旁边还有设置两个字的,点一下:
Tada!动画模式!
左下角的播放控制,相信大家都会用了(不会有人不会用视频播放器吧……)
然后有些模型不止有一个动画,看其他动画,就在右边层级树里面的那个动画选项里面找就行啦!
把资源搞下来自己在spine里面看的好处就是可以直接放大放大再放大,每一个像素都看的清清楚楚!还能自己控制一些关节(挺难的)
最后,附上动画的视频:
教程就到这里,我回去继续看MY WAIFU了~
恼,昨天已经不是4.12了,凌晨写东西的坏处
你的WAIFU疑似有点太多了
喜
可恶,太强了吧