Files

Consists of 3 files: .png, .atlas and .skel.

• .png: the image of the costume separated by its parts.
• .atlas: configures the movements and position of separated costume parts. Can be opened via notepad.
• .skel: spine-exclusive file. Cannot be opened neither via notepad nor binary viewer.

Paths

\data\com.danmemo\files\contents\4\files\spine

The 4\files\spine folder contains these subfolders:

characterSpine

Contains battle animation files for all controllable characters. The filename structure is the same as 3\files\character's.

enemySpine

Contains basic battle animation files from enemies.

Filename Scheme

• red: no meaning
• blue: enemy type
  • 1 = monsters
  • 2 = enemies in character shape. note that this costume is exclusive when this character is an enemy, you can't get this through the gacha section
  • 3 = enemies in character shape and this skin also exists in 3/character
• green: enemy number (different from the character number)
• yellow: which species or outfit of the enemy

realCharacterSpine

Contains 2D animation files used in INTERACT section and the profile.

Filename Scheme

• red: no meaning
• blue: character number, same as 3\files\character
• green: the number of the costume of the character
• yellow: extended image files for this costume, ends with 2 or 3

Unfortunately, however, these files are not applicable to this tutorial.(See ⚠️Note below)

\data\com.danmemo\files\contents\5\files\spine\enemySpine

Contains extended battle animation files from enemies. (Notice that the number after contents is 5 instead of 4) (yes, this one is in enemySpine folder)

Filename scheme is the same as 4\files\spine\enemySpine's.

Exporting animation as image files

Exporting image with transparent background

Requirements

• GIMP

So first extract .png, .atlas and .skel files with the same filename anywhere.(I'm using 【Song of Awakening】Lefiya Viridis for example)

Then head to https://naganeko.pages.dev/spine-gif/ , scroll down and change the size of the workspace(it caps at 2000x2000) and hit Regen workspace. When the website asks to change the workspace or not, click Confirm.

Import these 3 files either via the Add Skeleton button or drag & drop into the gray area, then you'll see the character(Lefiya) in it. (If you wanna reopen the file just refresh the website and re-import the files. don't click the Reload button, it just duplicates the character)

The selectable menu next to the Play button is the motion menu, you can preview and see the animations you want. Click the Add Motion button to add the desired animation into the motion list if you want to export this motion into the image file. (the order matters!)

Once the motions you want are decided, adjust the image scale(the blue rectangle) and the GIF bound to a reasonable size(the red rectangle). Slide the bar above the motion list to check if the sprite/animation fits the GIF bound.

Once done, select the split method as Delay Per Frame and adjust the delay(in milliseconds) between frames(I usually use 30ms) then hit Generate Frame(in this tutorial I add variable_chant then attack so it looks like do buff motion first and then attack). The website shows all images frame-by-frame.

Then click Save as a ZIP(you can check all the images again if some of them over the bound and you didn't notice). Once done, extract all frame-by-frame images anywhere.

Run GIMP, choose File -> Open As Layers, select all extracted files and hit Open(it takes time to read all of them if the amount of images is massive). Once all the images are imported, the GIMP window would look like this:

Then choose File -> Export As... and select the file type to GIF then hit Export. You will see the window below:

Leave As Animation checked, change delay to 30ms(the number you decided from the spine to gif conversion website just now) and select frame disposal method to One frame per layer(replace) then hit Export.

The final output would look like this:

And nice! You've got the transparent animation GIF files!

Exporting image with white background(non-transparent)

Once finished configuring the scale and GIF bound, adjust the frame delay to the value you chose and hit Generate(it also takes time to process). You will see the preview image with white background.

Once done, hit Save.

The final output would look like this:

And that's pretty much it.

⚠️Note

• Both transparent and non-transparent images may look buggy at some subtle places, such as character's shoes gets reversed.
• Non-transparent image may lose sprite(s) if it's/they're white(which can be seen on the output with the white background in this tutorial, you can see Lefiya attacks without any motion sprites).
• If you import files from spine\realCharacterSpine, you will lose all facial details like this: