• Editor

  • Animation from

    англійська

Hello everyone!
I am trying to setup a pipeline for a top-down pixela art game - starting from animations captured frame-by-frame from a 3D model (kinda like Diablo did back in the day, and Dead Cells recently).
The solution I found is to output the animation as single images and then import them into Spine and put them into a slot.
Right now I am also using 2 slots, one for albedo images and one for normals.

1) I did not find an easy way (I am a beginner!) to eventually use an imported atlas into Spine and cut the mesh in a pixel perfect way. So I chose single images for this.
2) If this is the correct way, is there any scriptable way of importing and avoid this process ?
I am trying to setup a pipeline and this seems a little...long to do!

Thank you very much!

Related Discussions
...

  • Erika

  • Допис #3
  • Цей допис на англійська

Hello JorenJoestar,
so if I understood correctly you're importing a sequence of 3D images to use as a reference in Spine? What do you need albedo images and normals for? Or are you simply importing and using the 3D sprite sheet? Are you going to use Spine for animation or only to import sequences of images (perhaps to add procedural animations at runtime later?)?
I didn't fully understand your workflow, but I'll try to answer your questions:

  1. What do you mean by an imported atlas? is it an imported sequence of images? You can't import atlases in Spine to use, so you'd go with the single images and change the visible one to create a sequence manually during the animation.
  2. If you want to speed up the import of images into a sequence, this topic may help: Quick method of creating animation from frame images

We also have improvements planned: Frame-by-frame animation support · #9 · EsotericSoftware/spine-editor but they are not available yet.

Regarding pixel art, as of 3.7 we support pixel grid rendering, as well as snapping to preview your animations correctly:
Blog: Spine 3.7 released: Pixel grid rendering

Hello Erikari!
Thank you for the quick reply 🙂
So to explain better, I am using Spine (I know, under his potential) to create flipbook animations and have parameters used in game.
Basically is the same as Dead Cells :
https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php

The process is the following:

1) Using a 3D model, make screenshots of different angles for each frame of the animation, and save it to a file
2) Import all this single file frame captures and put them into a slot
3) Keyframe animations by choosing a different file every frame

Exactly like the first article you posted (Quick method...).

My questions are:
1) I am using single file images because it is easier to handle those instead of putting them already into a texture atlas.
2) Is there a shortcut to simply move to the next image in the current slot ? That would save a TON of time. I read your post, but still seems like I have to click for each image!
3) Is there any better/faster way you recommend ?

Thank you a lot!

  • Nate

  • Допис #5
  • Цей допис на англійська

You can try:
1) Enable auto key.
2) Select an attachment under a slot in the tree.
3) H for Visibility, to show the attachment. A key will be set because auto key is enabled.
4) R for Next Frame, to move the timeline position to the next frame.
5) ctrl+shift+right arrow for Next Sibling, to select the next sibling tree node (ie the next attachment under the slot).
6) Repeat steps 3 to 5 for each attachment.

You could use automation software (like AutoHotkey on Windows) so you press a single key and it presses H, R, and ctrl+shift+right arrow for you. Please let us know if you'd like help with setting that up.

For a long time we have had plans to make it easier to use frame-by-frame images, but other things always seem to take priority. We'll get to it though! The issue tracking the task is here:
Frame-by-frame animation support · #9 · EsotericSoftware/spine-editor

Thank you both.
Ctrl+shift+right arrow already helps!
But yes, a frame-by-frame would be amazing!
I know that you have a lot of requests so it is normal that some stuff slips under other.
Also, the usage I am doing almost defeats the purpose of Spine itself - so I understand if it is a lower priority 🙂

Another question: in the case of having hundreds of images (think 50 images x 8 directions for each animation) do you suggest is better to have multiple slots per animation and direction, or... ?
I am doing a test to setup this pipeline but still unsure how to properly organize.
At the end when I am drawing I need the current texture region/area in the exported atlas, so I dont' think it makes a huge difference if I split in more slots or one...right ?

  • Nate

  • Допис #7
  • Цей допис на англійська

It would be better to use skeletal animation and reuse parts so you don't have 50 * 8 images. 😃 Otherwise it doesn't matter if you use multiple slots. You could do so just to make organization easier.

There's really no problem using Spine for frame-by-frame animation, though ideally you mix in some of the power of skeletal animation, eg a bit of translation, scale, rotation, or shear. You can also bend your images with weights (or deform keys, but weights are better). Check out this tip:
Spine: Tips: 59 flame frame bones

2 місяці пізніше

Thank you Nate, thank you Erikari for your responses!

I am still wondering if there is a more automatic way to speed up the process.
If I manually generate a json file with the animations, could it be imported and used ?