• Editor
  • transition from spriter to spine

Hello, I was working in spriter for some time and I was wondering if you have any advice on how to make the switch less painful. Spriter had a laundry list of bugs and flaws, but it was really easy to setup bones and animating was very quick and simple. Now I'm trying to figure out Spine and it feels like at every step I have to check or uncheck something before I can do anything. The first thing I did was to setup hotkeys but they don't really help much. It's like the whole workflow is rigged with roadblocks.

I struggle to figure out how the dopesheet works and why is it organised this way. I don't understand why does it have separate timelines for translate, rotation, etc, instead having just a single animaton line, like spriter or flash. Is there any benefit to it? I cannot for the life of me imagine a scenario where splitting the timeline like this would help in any way. It feels like a massive distraction and a waste of time. And it cloggs the dopesheet with dozens of timelines as if there weren't enough of them already.

I also have a hard time with the keyframes when I want to make a looping animation. In Spriter, I could just click anywhere in the timeline and just move stuff around and it would all be automatically keyed and animated and properly looped. Here, I have to go out of my way to ensure that it has keyframes at the start and at the end.... but I cannot key the last frames until I make a change to it. And once I make a change it will not loop properly, so I have to copy the content from first frame and paste to the last... After working with spriter it all seems like such an unnecessary busywork, since I'm used to it being so simple and automatic. And since I know from experience, that it can be simple and automatic, I have to ask, why is it so convoluted here?

Then there are seperate buttons for moving stuff around, rotating, resizing... Okay, In theory it seems like a good idea to separate those actions so you don't accidentally rotate, when you want to move, but in practice it's even worse, because I have to keep switching between those tools every second and I constantly push the wrong hotkeys, because there are so much of them I have to keep track of... And as a result almost every time I want to move stuff, I rotate it, and when I want to rotate it, I move it around... The interface is so counter intuitive. The rectangle eight point style transform tool would be much better here. Most people are familiar with it because many other programs use something like it. And there is a good reason why so many programs use it. Because it's the simpliest, most intuitive and efficient tool for moving stuff around, rotating, resizing, deforming and on top of that - it's the best tool that allows you to seamlessly switch between all of those actions in no time. Why in the name of everything that is good in the world, would you go out of your way to fix one thing that was never broken and replace it with something inferior?

Those are my problems regarding coming to Spine from spriter. I'm sure many of those problems would be resolved If only I could understand what made them to be this way and how it will benefit my work in the long run. But since I could not find proper justification for those design decisions, I am left dazed and confused. I really want to like this software, but I could really use some help.

Related Discussions
...

I'm more of a runtime type of guy, but let me try to answer your questions. I'll have Shiu fill in the details. Every tool has a learning curve and it's quite natural to need some time to adjust to it. While many tools make it easy to start out, moving into more advanced concepts and workflows is then often impossible. We try to strike a balance with Spine. Nothing is perfect of course.

Timelines: often, you want to separate translation, scale/shear and rotation separately from each other. E.g. you put a translation key on frames 1 and 30, a scale/shear key on 5 and 10 and so on. This allows you to define separate interpolation curves for each of these transforms of your bone which allows for much more natural animations.

Keyframes: you can enable autokeying while in animate mode. Any change you make to your skeleton, slots and draworder will then be automatically keyed at the position of the cursor in the dope sheet. You can copy and paste key frames in the dopesheet. You can also rectangularly select a range of keyframes and then stretch or squish them and even revert them.

Transform tools: pretty much all professional animation software you'll find out there (Blender, Max, Maya, XSI) and even game engines (Unity, Unreal) use the same transform tools design we have in Spine: select the type of transform by hotkey, then use the mouse without having to target anything specifically to quickly change that transform component. While it is less "visual" in nature, it is a LOT faster to work with once you memorized the hotkeys. For this reason, the hotkeys are in a row. The general workflow is to leave 3 fingers on the hotkeys while quickly switching between transform types and manipulating your bones.

I would highly recommend to check out all the Spine Runtime Documentation including the videos to get a better feel for the workflow: Spine User Guide

Hello, I was working in spriter for some time and I was wondering if you have any advice on how to make the switch less painful. Spriter had a laundry list of bugs and flaws, but it was really easy to setup bones and animating was very quick and simple. Now I'm trying to figure out Spine and it feels like at every step I have to check or uncheck something before I can do anything. The first thing I did was to setup hotkeys but they don't really help much. It's like the whole workflow is rigged with roadblocks.

Like badlogic mentions the best thing you can do to start is to check out the Spine User Guide. We have both text and video documentation.

I struggle to figure out how the dopesheet works and why is it organised this way. I don't understand why does it have separate timelines for translate, rotation, etc, instead having just a single animaton line, like spriter or flash. Is there any benefit to it? I cannot for the life of me imagine a scenario where splitting the timeline like this would help in any way. It feels like a massive distraction and a waste of time. And it cloggs the dopesheet with dozens of timelines as if there weren't enough of them already.

Separate timelines is a requirement if you want to work on large animations and frankly I could not imagine working without it even for simple animations. Imagine a skeleton with hundreds of bones where all keys are placed on the same timeline. You would not be able to see what is going on once you start keying. In fact it's quite the opposite of a distraction or a waste of time. In Spine you can also place keys at subframes (between full frames) which would make it even harder to see what's going on if you only had a single timeline. You can filter out keys you do not want to show in the dopesheet, or lock your current selection so the dopesheet doesn't update once you select something new in the viewport.
After Effects is another application that also uses separate timelines, even Animate (what used to be Flash) uses a separate timeline for each object.
Spine allows you to interpolate between keys in multiple ways (Linear, Stepped and Bezier), without giving each transform it's own timeline this would not be possible or at least very difficult and counter intuitive.
Badlogic already mentioned auto keying, this is not on by default to prevent people from placing a lot of keys by accident when they start out animating, but can be enabled from the dopesheet.

I also have a hard time with the keyframes when I want to make a looping animation. In Spriter, I could just click anywhere in the timeline and just move stuff around and it would all be automatically keyed and animated and properly looped. Here, I have to go out of my way to ensure that it has keyframes at the start and at the end.... but I cannot key the last frames until I make a change to it. And once I make a change it will not loop properly, so I have to copy the content from first frame and paste to the last... After working with spriter it all seems like such an unnecessary busywork, since I'm used to it being so simple and automatic. And since I know from experience, that it can be simple and automatic, I have to ask, why is it so convoluted here?

You can hold down CTRL+SHIFT while dragging the top row key to copy all keys from one frame to another.
Not all animations are looped 🙂

Then there are seperate buttons for moving stuff around, rotating, resizing... Okay, In theory it seems like a good idea to separate those actions so you don't accidentally rotate, when you want to move, but in practice it's even worse, because I have to keep switching between those tools every second and I constantly push the wrong hotkeys, because there are so much of them I have to keep track of... And as a result almost every time I want to move stuff, I rotate it, and when I want to rotate it, I move it around... The interface is so counter intuitive. The rectangle eight point style transform tool would be much better here. Most people are familiar with it because many other programs use something like it. And there is a good reason why so many programs use it. Because it's the simpliest, most intuitive and efficient tool for moving stuff around, rotating, resizing, deforming and on top of that - it's the best tool that allows you to seamlessly switch between all of those actions in no time. Why in the name of everything that is good in the world, would you go out of your way to fix one thing that was never broken and replace it with something inferior?

Separate buttons for moving stuff around is a good idea not only in theory. It is in fact faster than having a single tool for everything. You do not need to touch the handle in the viewport but you can drag outside of it. If you want to constrain translation or scale to a single axis you can then hover over the handles for that. I've worked with applications that use a single transform tool so I'm quite familiar with each and while it sounds great to have a single tool for all transforms, it just isn't as fast as having a tool for each.
It sounds like you just started using Spine so it's natural to not feel at home with it yet, but once you're familiar with the transform hotkeys this will be much faster than having a single tool for everything. Note you can use the Pose tool (hotkey B) to do translation and rotation at the same time.
Default hotkeys for the transform tools are:
X: Scale
C: Rotate
V: Translate

Also note that if you hover over a button a tooltip will show up shoing the hotkey for that particular button. Pressing F1 will make tooltips show up instantly.

I hope this helps 🙂

Just to add. This may be a relevant feature idea: Sync first and last keys for looping animations · #35 · EsotericSoftware/spine-editor


(1)
More on loops while the above feature doesn't exist yet:
CTRL+SHIFT+L keys all the currently existing timelines. I'd agree with you if you didn't like that this wasn't discoverable.
You can find more hotkeys here Spine: Cheat Sheet

And yes. Press F1 to immediately show the tooltip on each button. Sometimes those have hotkeys. And there are others that you can bind hotkeys to even if they don't by default.

(2)
I have to agree that Spine had a few extra layers of indirection that makes it more straightforward for the programmer than for the Spine user (bones, slots, attachments, placeholders). On one hand, it's a matter of taste. But it also ultimately contributes to the much more flexible skins system.

(3)
The dopesheet actually resembles many 3D animation software dopesheets. (Other applications include Blender and Unity). And being able to key each transform property separately means animations can be more lively because they're not constrained to move according to poses.... if you don't want them to be.
But you can also treat scale, rotate, translate keys within a bone as a single thing by collapsing the bone row (clicking on the minus icon on the left) and just manipulating its (white) summary key. I would never do it that way, but you could if you wanted.

The truth probably is that Spine resembles a lot of other programs more than it resembles Spriter/Flash. That includes the dopesheet and the transform handles.
I kind of wish Spine didn't have the tall rectangular boxes as symbols for dopesheet keys, 'cause it gives new users the wrong impression that it works like Flash.

(4)
Coming from Unity (which has both the Adobe-style 2D rectangle handle tool, and the 3D-style individual transform tools), each definitely has its uses.
Spine's individual tools is great because you don't need to hit any targets to rotate or scale, and don't accidentally do another operation when you just wanted to translate. And it literally took me less than a day to get used to it when I first picked up Spine. Though that may be just me having just a little bit of experience jumping between applications. It's still disorienting to switch between applications when you don't use them regularly, but I'd say it's less painful than switching between Photoshop and Illustrator.

The rectangle handles is great for determining a scale that touches a specific point though. I wish Spine had that.

(5)
As an artist over the years, I've made jumps between Painter and Photoshop and SAI and Clip Studio Paint. Each of these programs shared a lot but also differed a lot in execution and had different shortcuts and ways of doing things. Every jump was difficult but well worth the effort for the obviously superior things the next program did over the previous.
I love standards. And there are some examples of the horrible ways devs reinvent UX/UI (Blender is plainly a monster and everyone who's used to it has Stockholm syndrome). But I'm absolutely happy not every art program does everything the way Photoshop/Adobe does things for the sake of being "standard" and painless to learn.

I hope you hang in there getting used to Spine. It's helped people make a lot of cool stuff.
I regret that the expense was your frustration but I for one am thankful that you shared feedback.

Thank you everyone for help. I got a bit emotional here, sorry about that. Like I said, I'm used to different kind of interface and I felt like I was beating my head against the wall despite rewatching tutorials and reading the documentation all over again. It's like I have run into problems that no one else even tought could be problematic. Spriter had it's fair share of interface quirks, but it was still more like the software I had experience with. And also, after all this time I have now a lot of spriter related work habits that I have to unlearn, because I expect spine to behave in a certain way and it doesn't.

I still don't really get the concept of splitting animation timelines into translate, rotate etc. (I'm not talking about timelines for bones. just for motions) Maybe it's a 3d software thing, but I have never stumbled upon a simiar concept. But then again I have never worked with 3d animation before. I cannot imagine how could I utilise this funcionality in a practical way and I haven't seen any tutorials that would cover this.