• Editor
  • Animation and Setup tools

Related Discussions
...

hello! i just bought spine for 60$ because i want to use it in my cocos2dx projects. and since spriter didnt deliver any cocos2dx or any plugins (and seems all dead) , i bought your product 🙂
BUT!

just a few questions in mind:

1). why setup mode is sooo annoying and not intuitive ?! your tutorial is also showing how complicated a simple parenting task is in your software ? also the draw order is all messed up, and working with the hierachy tree is so annyoing. can u please add a shortcut of moving back and foawrd images ? like "CTRL + UP" to move it up and "CTRL + DOWN" to move image down. you really need to work on it since its really complicated and takes so much time to setup, in spriter its much easier, maybe use a similar method and shortcuts like they have.

2). do i have to have only bones if i want to animate ? why cant i just animate an image without bones ? like a pupil in an eye or anying like that ? its so annoying seems in options that images has a red "X" and i can only animate bones i parented to images.

3) selecting keyframe has never been annoying. been using flash, toon boom, maya, tv paint and tons of tools, none has such an annoying selection, why do i need to go into dopesheet, select all bones in the scene and then move them ? why cant i just select the main key and drag it ?

4). how about "HINT" when u stay on a button and then you will see a small yellow dialog that tells you wahts the shortcut ?

5) how about an export tutorial ? setting up project using texture packer with spine and more

sorry for being so direct, but its really anoying. your tools seems to work smooth and solid but your user experience is really rough. maybe realese a better tutorial or a shortcut list (cannot seems to find it on your website) also explian how to animate just images without using bones (for inner animation)

1) You list many things you say are annoying, but I'm afraid this is not helpful. Why would ctrl+arrow be any less annoying than drag and drop?

2) Everything you want to animate is a bone. This is how skeletal animation works. We chose to not hide the fact that bones are used because this makes many things more flexible. Note you can change which images are shown on a bone.

3) Because the orange diamonds in the timeline are where you scrub the timeline. We could allow them to be dragged with a modifier key, probably ctrl.

4) We have this, hover over any button and wait. Press F1 if you don't want to wait.

5) Documentation will be coming.

Being direct is fine. We have no problem with feedback. 🙂 Saying something is "annoying" is terribly non-descriptive. Instead explain exactly what is suboptimal and why.

I do have to agree, the setup process is very painful right now. It doesn't scale well to medium-to-high fidelity sprites yet. I've been at this one character setup for 3 hours already and I'm barely half done. (Nate, you once said to compare the workflow between programs to really compare them fairly. This isn't even that thing I was talking about with the multiple redundant limbs. This is just straight up, garden variety skeleton setup with about 20-25 images.)

I've been doing some little effects here and there combining 3 or 5 images. It's been kind of okay. But now that I'm on real characters, I'm really REALLY feeling the UI friction too.

I think it mostly has to do with the absence of the keyboard shortcuts and not being able to quickly get to the options and tasks you need, and not being able to quickly do the most common tasks, having to move things one-by-one, parent one by one, change the draw order one by one. And very long repeated mouse and eye journeys between the viewport and the tree. The tree also very easily turns into a sea of words and in my case of just 20-25 images, upwards of 50 jumbled up, homogeneous-looking items unless i'm SUPER careful with collapsing and expanding the little arrow things, which gets inevitably messy in the middle of the process, even if you painstakingly label each one.

I think the shortcut for the draw-order reordering task bobo wants is to be able to select an image in the viewport, then press keys to move it up or down the draw-order list. (because I guess he's given up trying to look for images by name in the sea of words that is the tree.)

I know some of these UI things are in the pipeline. The new outlining shader that highlights a hovered image is now helping a bit, though does still fall a bit short at making some variations of the image-to-bone-binding task one smooth thing that you can do over and over again. Do note, the one recommended way in the first video works relatively well if you follow it exactly. Select Image in the tree > Press P > Click on a bone in the viewport. (Bug report though: It doesn't show the P shortcut key 'cause it doesn't have a tooltip.) It gets a bit hairy if you need to make changes in the hierarchy later though.

The absences of these workflow streamlining measures do all add up to a really frustrating experience.

I'm honestly thankful and amazed by Spine and the work that's been done cleanly designing the backend (it's already better than SmoothMoves at least. xD), but I'm also thoroughly frustrated by what's coming in the UI on this front but won't be there yet for a while. I just keep telling myself that it's still a young little editor and Nate's doing stuff every day to make it better.

My biggest grip with the editor is what Pharan says: when you want to create a new character, asigning the images for the slots is painful. I have to scroll down and up a lot.

I think this will be resolved until the task for quick-select an image for slots is done (I think is one of the Kickstarter goals) and setteable draw order, because being static and repeating slots with same images but different draw order is one of the things that needs to be better.

Other than that, I love the bones / slots / skin scheme of Spine. Everything is coming up nicely.

I cannot say too much as I am not using spine for now until I finish my current project.
But to setup a character is not the most creative and funny part of the animation process,
and some script can really help the process,
A script that will create the bones and link the image to it automaticaly (optimaly directly from the hierarchy of the psd files ) would defenitively help the process,
we could then freely adjust the pivot point and finetune the rig (this of course need to be done by the animator himself)
Maybe the script you have done to export the psd files and create a .json could use a naming convention to create the rig ? like we create in photoshop a layer root, spine1, spine2, armA1, armA2,hand, tail, legA1, legA2, legB1,
or watever that could tell what kind of body part it is and then interpret how does the hierarchy works ...

It is surely not an easy job to do that, but anything that will make the setup process easier will make us animator happier 🙂

By the way, thanks for creating spine !

Or maybe just import the image in spine without hierarchy, and then use a "link button", to link a child image the the parent, once the hierarchy have been edited you click the "create bones button" et voila 🙂 the bones are created containing the image in their slot, just need to adjust the pivot.

We're gonna have a talk about it this weekend and see if we can come up with something to make the process easier. If it is something we can do relatively simple we can probably get it done quick, if not it will be some time before another method will be added. But thanks for the feedback! 🙂

That guys for expanding on the feedback.

I think hotkeys to move up/down in the draw order makes sense so it can be done in the editor, without using the tree. Maybe numpad plus and minus and also minus/underscore and equals/plus keys. Arrows will likely be used for nudge.

There are some productivity tips that can help improve the workflow using existing features. Lack of documentation makes these unlikely to be found of course. I've collected a long list and I'll make a video showing off some esoteric features.

Pressing P is the same as "set parent" (I'll add tooltips for this). When choosing a bone, you can click a bone in the editor. When choosing a slot, you can also click a bone in the editor and it'll ask if you want to use an existing slot or create a new one. This is easier than scrolling around in the tree. So, you can click an image or bone in the editor, press P, click a bone in the editor, and you've changed the parent without using the tree at all. This always works, it isn't just for the initial setup.

Another tip to help choosing bones in the editor is to enable name tags. Then you can then click the name of a bone, you don't have to click on the bone itself.

The tree can definitely become cluttered. You can reduce this by clicking the filter buttons at the top of the tree. Eg, if you are only working with bones at the moment, hide all the slots and images. If you right click a tree node, it does expand/collapse all. This can reduce the number of click needed to navigate the tree, especially with the filters.

As Shiu mentioned, we'll see what we can do to make skeleton setup easier in the short term. Feel free to continue giving your feedback about what is awkward, tedious, unintuitive, etc. No need to apologize for your feedback or surround it with praise. We do want to hear what you feel are pain points while using Spine, it's an important part of improving things. 🙂

With regards to point (3), I would also like to be able to quickly insert/delete frames without having to actually select and move any keyframes. Flash allows this by selecting a frame and pressing F5 (add frame) or shift-F5 (remove frame).

Spine differs a bit from Flash. I guess remove frame would delete all keys at the current frame? What would add frame do? Add a key for every bone and slot at the current frame? :o If you are using Spine for PNG export, maybe this makes sense. You can currently press ctrl+L to set a key for every selected bone.

If you click add frame on a frame with keys, it shifts those keys (and all keys to the right of the current frame) one frame to the right. Remove frame would remove any keys from the current frame and then take all keys to the right of the current frame and shift them one frame to the left. You can do some quick, targeted timing changes like that.

To clarify, "add frame" would not set any new keys, it would just shift around the existing keys.

Add frame: all keys in this frame and all keys to the right of this frame will be shifted one frame to the right.

Remove frame: all keys to the right of this frame will be shifted one frame to the left and keys on this frame will be deleted.

Ah, I see, we'll consider it. FWIW, currently you can hold alt while dragging a key to also move all keys after it.

!!! [boggles] !!!

Cool! I didn't know that. That's extremely useful.

hey Nate! thanks for your quick response!
first of all, sorry for my retarted and bitter post lol, i should have been more informative. and sorry for my bad English 🙁

i have to say it : your program is rock solid, robust, fast, smooth, auto updating, crisp UI and many more!
i think u guys did an amazing job, and where spriter failed (with all the implantation support such as cocos2dx) u guys did stunning job, you are active and do make this thing works! 🙂 so i just want to let you know i really appreciate your hard work and i bought your product instantly without even checking if the export work, because i do beilvie it 🙂 and love the silky smooth feel of your program. again sorry for being bitter 🙂

i played around a lot with your program,and ill metion the good things and bad things:

1) setup time and process:

  • loved the PHOTOSHOP Script! saved tons of time and seems to work good with the jason (did some problem with export, might be PS bug but later it was fixed. (also! maybe put a PIN in the forum so i could get the latest photshop script, there are like 5 running around the forum, dont know which one is the latest, and in your app folder i only have script for illustrator)

but still, setup process is far from being perfect, in fact its really slow, and tedious.

  • problem with bone setup and edit.
    i went forward with your "all bone approach" and its fine, we just need to set out mind that bone is also a pivot and take it in mind while creating them. the only problem i found with bone creating is editing them, after i placed a bone, why cant i edit its pivot point or origin ? for example i made a full character, parent it and found out the arm bone was too short, and i want to re-position the bone origin in setup mode so the arm will rotate in the right way, i was not able to edit the bone, only "hard painful" deleting it completely from the tree, replace image, recreate bone... took long time: if you could add in with a keystroke. for example pressing the bone (while in setup mode) holding "ALT" will let you "REDRAW" or move around the bone pivot, this will make things very easy to edit.

-double "root" bone
while using the PS script, and loading the character, i had trouble to animate the character the keyframe buttons where disable, thought its a bug but seems like if u have double root bone by mistake, u cannot animate, again editing the tree of bone should be improved and be more easy, deleting bone without deleting image, editing bone pivot, start and end point, and etc....

  • Parenting process
    the select image "P" select bone is fine, its annoying that by default while the "rename" window pops out its not focused on the text field, making you move the mouse to the text field, pressing it, and editing it, while when its pops u can right away time the new name and hit enter (this will save time) also you could improve the way the bone tree is shown, while you want to edit something, delete just the bone without deleting the image, its seems impossible, and u have to delete the bone + image after parent.

  • Ordering images
    its now really slow, and painful. while i tried to find a "trick" to do it faster, i was just pressing randomly on the order tree, and tried to see the "bounding box" on the stage and see which body part i selected and then move it around, while if i choose i body part on the stage i do no have "highlight" on the tree (does not make any sense at all that i have to try and try to catch the right body part, if i don't have naming or i have 300 parts, this could be really annoying. what i would suggest that if u select "order" in the tree, and then on the stage select an image, you will instantly see it "marked" or highlighted in the order. also, a MUST HAVE feature, is binding for moving image order up or down, in Photoshop its CTRL + {} in illustrator its CTRL + up\down and in flash also something like that, this will speed up the order process by 80% ! please add this, the binding combo does not really matter, make something logic, even +- will work 🙂 but u have to add this one 🙂)

2). Animation process

-loved the Graph option! the bezier tangets and stuff really usefull!. also loved the new ghosting option! works great 🙂

  • missing a "key all" stroke : i think it was "K" that should key select the whole pose but seems not to work, "L" only key just one value, its a must that ill be able to press one button and key the whole pose, (like in maya for instance) maybe its a bug, but K don't work for me.

  • editing key-frames
    its a must have, not being able to select the "diamond" and change its position its really messed up for animators, please add the option, even CTRL + CLICK and then drag it around, also if i select few diamonds key-frames together, add the option that i can "stretch" them together and maintain the timing changed relatively (the space between key to key will increase relative to the stretch) also not being able to select all keys is annoying, while i want to select all and see the graph, its not good that the only option is from dopesheet, and dopesheet selection is really bad (if u have tons of part)

  • dope sheet
    its great! love the option to do some overlaps animation and change timing for each part, but!! if u have tons of parts selecting it from dopeshit is hard! u need to select from up and wait until its select all down.. maybe add a "bullet" that if u press on the key its automatic selecting the whole dopsheet keys in the selected timeline area instead of manually wait for the mouse drag to select it all (hope i was clear on this one) being able to select all keyslots at currnet frame will speed up the process. also i was not able to "increase" the size of the window (when i go to the upper corner, like in photoshop) when i am on the dope sheet, or even "tear off" to another screen so i could see the whole keys and work (this could be very helpful)

  • changing body parts on the fly
    while u have to add them to the bone and then "click" the little circle at the tree to have them being replace is really slow process, spriter did it right when they added that u right clicjk the image and u instantly see all the images u have and u can choose which one to replace, this could be more fast and intuitive for the animator if u add something like that.

Seggestion:
dunno how hard is it, or if its possible, but maybe add a "SKEW" option, this will make animation 10X more flexible, (like in flash).

changing keystrokes and shortcuts: animators dont like changes, and if they know a program or two its sometimes hard to getting used to it, if u will add the option to have keystrokes similar to other programs, like flash, maya, and ETC... this could be really nice... but its not a must have.

  • i have a lot of things to add, but i know its take time... so i just mentioned the important stuff that will make "SPINE" a must have animation tool and improve all the way setup works, since now the major problem is SETUP MODE.

also wanted to say i made a few simple animation, turned to work smooth as hell 🙂 and really nice!
will test them soon on cocos2dx 🙂)))

again thank you so much for your listening and being active in the forum and community, u did everything right!!, the only thing need to be fixed fast is just the front end experience with setup mode... and its perfect 🙂)) :yes: :yes: :yes: :yes: :yes: :yes:

p.s:

hope i have been enough informative now 🙂) :love: :$

@bobo sorry if this is a short post, I'm on my phone and have a NASTY hangover after a wedding yesterday. If you need to tweak the position of your bone without moving the images, just enable image compensation, likewise you can enable bone compensation as well. This makes tweaking your pivot really quick without having to move images afterwards.

Just some suggestion: set those hot key on the LEFT side of keyboard so we can just use left hand to finish the task while right hand operating the mouse. It's going to be way more effective than what we have now. For example, parenting a image, I have to move my left hand to the right or use right hand moving it away from the mouse. Those subtle differences makes greate differences if tasking in large number.

Whew that's a lot of text. 😃 Diving in...

bobo escreveu

hey Nate! thanks for your quick response!
the only problem i found with bone creating is editing them, after i placed a bone, why cant i edit its pivot point or origin ?

As Shiu mentioned, use bone and/or image compensation to adjust a bone without affecting child bones or attached images.

-double "root" bone
while using the PS script, and loading the character, i had trouble to animate the character the keyframe buttons where disable, thought its a bug but seems like if u have double root bone by mistake, u cannot animate

You should only ever have a single root bone. How did you get more than one?

the select image "P" select bone is fine, its annoying that by default while the "rename" window pops out its not focused on the text field

The rename dialog selects all the text. The new-slot dialog and existing-or-new-slot dialogs focus the textfield. Did you mean a dialog other than these three? I've changed the new-slot dialog and existing-or-new-slot dialog to select all the text in the textfield.

delete just the bone without deleting the image

You should never need to do this, since you can edit the bone just fine.

- Ordering images [snip]
what i would suggest that if u select "order" in the tree, and then on the stage select an image, you will instantly see it "marked" or highlighted in the order.

It would be awkward to have to first select draw order then an image, just to get it to select the slot under draw order. The way to do it is this: uncheck the image and bone filters at the top of the tree so only slots are shown. Notice "draw order" is gone, this is because you can drag the slots around directly. Now when you select an image in the editor it is selected in the tree. (actually it isn't, but this is a bug I just fixed and will be in the next version :* )

a MUST HAVE feature, is binding for moving image order up or down

Agreed.

missing a "key all" stroke

It's ctrl+L, but should probably be ctrl+K. Ctrl+L keys all transforms for the selected bones. Often you don't want to do this though, as it causes your animations to be a bit robotic. You also want to use as few keys as possible, which is a little more efficient at runtime.

- editing key-frames
its a must have, not being able to select the "diamond" and change its position its really messed up for animators, please add the option, even CTRL + CLICK and then drag it around, also if i select few diamonds key-frames together, add the option that i can "stretch" them together and maintain the timing changed relatively

We could allow dragging the orange diamonds in the timeline with ctrl pressed. For now just use the dopesheet. At the top of the dopesheet is an "overview" row that shows all the keys. Moving keys in this row is identical to moving the orange diamonds.

Click and drag in the dopesheet to make a selection box. Then click and drag the selection box edges to scale the keys. You can also scale them negatively to flip.

if u have tons of parts selecting it from dopeshit is hard! u need to select from up and wait until its select all down..

I think the "overview" row in the dopesheet handles this.

i was not able to "increase" the size of the window (when i go to the upper corner, like in photoshop) when i am on the dope sheet, or even "tear off" to another screen so i could see the whole keys and work (this could be very helpful)

You can drag the "Dopesheet" button up and down to resize the dopesheet. Tearing it off to a new window would be nice but is hard to implement.

- changing body parts on the fly
while u have to add them to the bone and then "click" the little circle at the tree to have them being replace is really slow process

This feature is planned:
https://trello.com/card/slot-image-choo ... c0059d9/45

dunno how hard is it, or if its possible, but maybe add a "SKEW" option, this will make animation 10X more flexible, (like in flash).

Skew is almost free form deformation and is pretty involved. Maybe in the future.

changing keystrokes and shortcuts

Possibly a way to customize shortcuts, but not any time soon.

Thanks for all the feedback! Keep it coming. 🙂 I like the small changes that improve things the most. We've promised a bunch of features in the Kickstarter, so I have to prioritize all of those before I can work on other features. If I didn't do this then the Kickstarter stuff would never get done, or would drag on and on. This means if a suggestion wasn't part of the Kickstarter and isn't something I can do quickly, unfortunately it has to be left for later.