Genshin Impact web event, getting spine json/skel and atlas

[RingOfFury]

Found that the spritesheet for dehya in the homescreen of the current web event gets loaded in directly as a png. However, there is no associated json, atlas, or assetbundle to go with it, at least not directly in the console network tab. A peek into the javascript confirms that it's using spine, and that there is a spine file and an atlas, but I'm not sure where to find them. Any ideas?

[RiffOsci]

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.

[RingOfFury]

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.

Thanks for the info. Couple of questions, I'm not well versed in this js pilfering stuff so bear with me

What program are you using to view the js? I'm just viewing it in browser, and the Chinese characters aren't encoded properly.

How did you identify the start/end of the corresponding json for the spine animation data? Since it's loading in a whole bunch of them. The formatting for this part also seems intact, if I'm looking at it correctly?

And the formatting for the atlas is primarily just adding linebreaks where denoted? 

And uh, I don't suppose it'd be too much to ask for the files? Planning to do it on my own for the learning, but a working reference would be great lol

[RiffOsci]

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.

Thanks for the info. Couple of questions, I'm not well versed in this js pilfering stuff so bear with me

What program are you using to view the js? I'm just viewing it in browser, and the Chinese characters aren't encoded properly.

How did you identify the start/end of the corresponding json for the spine animation data? Since it's loading in a whole bunch of them. The formatting for this part also seems intact, if I'm looking at it correctly?

And the formatting for the atlas is primarily just adding linebreaks where denoted? 

And uh, I don't suppose it'd be too much to ask for the files? Planning to do it on my own for the learning, but a working reference would be great lol

1. The inspect tool in Vivaldi. That could be because you didn't turn on Unicode support for programs. If you are on Windows, go here.

2. Any lines that starts with "{"skeleton":" is a .json file.

3. Yeah, you need Visual Studio Code, in order to replace the "\n" with newlines. Go to Visual Studio Code, create a new text file (New -> New Text File), search "\nsize", double-click on the line that contains the "nsize" property, copy and paste to VSCode, and then remove any unneccesary Javascript code bits. Press Control+H, click on the little star button on the top right corner, and enter this:

Press on enter until there's no more \n's. Save the file as a .atlas file, are you're done!

4. Sure! You need Spine 4.1.19 in order to properly load the files. I'll send it to you via private message.

[RingOfFury]

How? Going to "vendors_0d58d93961ffe11e6f83.js", we can see that the .json and .atlas files are loaded like this:

1. The inspect tool in Vivaldi. That could be because you didn't turn on Unicode support for programs. If you are on Windows, go here.

2. Any lines that starts with "{"skeleton":" is a .json file.

3. Yeah, you need Visual Studio Code, in order to replace the "\n" with newlines. Go to Visual Studio Code, create a new text file (New -> New Text File), search "\nsize", double-click on the line that contains the "nsize" property, copy and paste to VSCode, and then remove any unneccesary Javascript code bits. Press Control+H, click on the little star button on the top right corner, and enter this:

Press on enter until there's no more \n's. Save the file as a .atlas file, are you're done!

4. Sure! You need Spine 4.1.19 in order to properly load the files. I'll send it to you via private message.

Yep, makes sense, thanks. Pertaining to the json again, I've figured out how to identify which part is the .json, but due to having multiple animated components being loaded in, how did you figure out which json matched up with the image in question? Unlike the atlas, I don't think there's a file name unless the bones are named something that gives it away

[RiffOsci]

How? Going to "vendors_0d58d93961ffe11e6f83.js", we can see that the .json and .atlas files are loaded like this:

1. The inspect tool in Vivaldi. That could be because you didn't turn on Unicode support for programs. If you are on Windows, go here.

2. Any lines that starts with "{"skeleton":" is a .json file.

3. Yeah, you need Visual Studio Code, in order to replace the "\n" with newlines. Go to Visual Studio Code, create a new text file (New -> New Text File), search "\nsize", double-click on the line that contains the "nsize" property, copy and paste to VSCode, and then remove any unneccesary Javascript code bits. Press Control+H, click on the little star button on the top right corner, and enter this:

Press on enter until there's no more \n's. Save the file as a .atlas file, are you're done!

4. Sure! You need Spine 4.1.19 in order to properly load the files. I'll send it to you via private message.

Yep, makes sense, thanks. Pertaining to the json again, I've figured out how to identify which part is the .json, but due to having multiple animated components being loaded in, how did you figure out which json matched up with the image in question? Unlike the atlas, I don't think there's a file name unless the bones are named something that gives it away

Dunno how to describe it in words, but I'll try.

After separating the spritesheet with the .atlas file via Spine, I copy-pasted one of the separated images' names into the Inspect search bar, and then it will redirect you to the .json with the same image name.

Example: Searching the name "szy" will bring up Dehya's title screen .json file.

[sydantes]

kind hard for me who just want get that animation then import to after effect to create simple wallpaper animation, but i try learn a bit about atlas and spine

update : i try search a bit and get this git about extractor but idk how to get since character animation is from front page genshin

Code:

https://github.com/YuehaiTeam/webstatic-extractor

[arabella]

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.

Hi, I know this thread is old as hell and it's very possible you may not even have these files anymore, but if you still do, could I ask you for the .atlas and .json file for reference? To be honest, it doesn't have to be this file specifically, I just really wanna know how they're supposed to look like (I'm new to spine).
Also, I have Spine 3.8.75 Pro, you said you need 4.1.19 to properly load them, would I still be able to at least view them in my version? Because I really don't know how to upgrade it lol
Sorry for being almost a year late lmao and happy new years

[jomin398]

I already maked DB long ago.
here is github Repo link
So, there is just female characters.

I need for paimon standing...

[Kirito145]

Hi there. Randomly stumbled upon this thread, and spent like 5 hours trying to automate the process of retrieving and generating .atlas and .json files.
It kind of worked, but when I tried to upload and test it here (https://jomin398.github.io/webSpineViewer/) it kind of didn't load (dunno why, but the exception was like this "Couldn't load the texture alias Unknown texture filter 0.125"). I assume this means I'm either missed something during formatting, or some other random error which I'm not quite competent to comprehend.
Either way, that's only part of the issue. The issue at hand is I have no idea how to associate blob guid names with the generated file names, but doing it by opeing and checking each blob, I managed to manually match some of the images and it worked (kind of). The hair and accessories animations were a mess, as RiffOsci wrote, but apart from that, everthing seemed fine.
Anyway, point being, if anyone ever stumbles upon this post, let me know if you know something about it or just drop a message so we can discuss.
Cheers
P.S.
The programmatic way of creating these is just plain old reading and formatting the vendors.js file with regexp, if anyone is curious. I was thinking about uploading it to github later, but there're aforementioned issues that needs a solution before this.