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.