• Editor

  • 8 way/direction sprites

    engleski
Related Discussions
...

Hi. I don’t see anyone talking in the forum about 8 direction sprites/skeletons. Currently the only way seems to be make a skin for every direction: S SE E NE N NW W SW and then in each skin add skin placeholder attachments for the images that corresponds to the skin direction, creating meshes for every image. Then one has to use animation mode to Key the skeleton in all eight directions adjusting the attachment images accordingly to make reference poses That must then be copied into separate animations for each direction and all animated separately.

This is a lot of tedious work for what I would imagine would be a popular and useful need for many animators. Any chance there's are or will be methods of streamlining this process? Such as:

Being able to copy meshes to other images quickly and not just the mesh vertex positions.

Automatically remembering which skin place holders belong to which skin and activating deactivating automatically when you change skin instead of having to toggle them manually every time.

(One issue is that transform constraints cannot be keyed to adjust with the skeleton being repositioned, so those cannot be used with a multi-directional sprite currently.)

Maybe a three-dimensional setup tool could be added to Spine where you can define the image folders for each direction as well as a naming scheme for both the images and skin placeholders, and then after you build the skeleton for, say, the South direction, and adjust it for the diagonal and side (S, SE, E), then Spine could automatically interpolate the skeleton transforms for the other five directions based on those references and assign the appropriate skin placeholders based on the naming scheme you gave it. This would cut down the manual process by a huge amount. If this sort of process could be extended to the animations themselves where you only have to animate the reference directions, then Spine could infer how the animations translate in the other directions and build those for you.

Also, there needs to be a Setup pose for each of the directions so you can bind the bones and set weights for each direction without issues.

Actually, there are videos that demonstrate the process of rigging an 8-direction character, and you can watch them here:
Spine: Twitch: video m 0wgqKquiQ
Spine: Twitch: video WVLZCfitpdE
You can also download the actual Spine project from the "Download Files" button. In the examples above, the character’s direction is changed by switching the visibility of attachments and translating bones instead of using Skins. While it is possible to achieve an 8-direction character using skins, the disadvantage is that it becomes very inconvenient if you want to change the direction during the animation, e.g. in an attack animation, you may want to make a front-facing swing and then turn to the right to punch.

If the character is a symmetrical character, you only need to create five directions (Up, Down, Right, Up Right, and Down Right) and the left direction can be achieved by flipping the right poses at runtime.

Being able to copy meshes to other images quickly and not just the mesh vertex positions.

Currently, it is possible to paste vertex positions for meshes with the same number of vertices, but not for meshes with different numbers of vertices, and it is not possible to directly paste the weights setting. If you want to do this, you need to duplicate the mesh attachment and then replace the image. We have a plan to add an improvement which provides a more straightforward way to copy a mesh configuration to another attachment directly:
https://github.com/EsotericSoftware/spine-editor/issues/551

Maybe a three-dimensional setup tool could be added to Spine where you can define the image folders for each direction as well as a naming scheme for both the images and skin placeholders, and then after you build the skeleton for, say, the South direction, and adjust it for the diagonal and side (S, SE, E), then Spine could automatically interpolate the skeleton transforms for the other five directions based on those references and assign the appropriate skin placeholders based on the naming scheme you gave it. This would cut down the manual process by a huge amount. If this sort of process could be extended to the animations themselves where you only have to animate the reference directions, then Spine could infer how the animations translate in the other directions and build those for you.

I am sure it would be wonderful to have a tool like you describe! Unfortunately, Spine currently does not have a very good feature set for creating something symmetrical, but we have some ideas for improving that on our roadmap. I think it would be helpful a lot in creating 8-direction characters if realized.
https://github.com/EsotericSoftware/spine-editor/issues/150
https://github.com/EsotericSoftware/spine-editor/issues/274

You said you did not see anyone talking in the forum about 8-direction sprites/skeletons, but actually there are a few users who have already tried this. If you could tell us how you are planning to implement your character at runtime, it may be helpful for us or other users to give you more detailed advice.

I would personally advise against Skins and instead utilize one skeleton for all of the frames. This means that you have to spend a lot of time in Animate mode, with the "setup animations" organized.

Here is one way I would do it. With the Photoshop script, organize your 8 frames in their own folder. After you import to Spine, you start with one of the frames as your base for creating your skeleton (usually, the front-facing angle). As a safety measure, bind the image attachments to the root if you want.

Move the appropriate images of the other 7 frames to the 1st frame's Slots. This can be organized in two ways. 1) Place the image attachments based on their correct Slot Order or 2) Place the image attachments based on the body parts. The latter requires you to animate the Slot Order depending on the current frame.

Set the animation keys of all bones (Translate, Rotate, Scale) in your "Setup" animation. Set the same keyframes in 8 frames on the Timeline. Then, set the keyframes of your image attachments in the appropriate frame designation.

Animate your skeleton to match the frames and then bind the frames accordingly.

Thanks for the responses!

I'm very familiar with the few 8 direction tutorials available on YT. If anything, they are a testament to just how tedious the process is for building an 8 direction sprite in Spine in that several of the videos exceed 2 or 3 hours for just a section of progress! I try not to think about the amount of work I've signed up for and have been tempted a few times to learn 3d modeling in Blender, but then realize that would be going back to traditional sprite strips for render output which means many sprite images to account for every animation at each direction, as well as the loss of being able to use the skeleton animation system. My football was built this way as an exercise on the concept, and it consists of 144 sprites (12 frames per full rotation times 12 yaw orientations) times 12 pitch orientations (0 deg, 30 deg, 60 deg, etc.) making it a total of 1728 sprite frames across 12 sprite strips of 144 frames each. Player orientations would be way less but still, my main reason for wanting to proceed in Spine is being able to stick things to bones in-game and check the proximity of objects to specific bones, as well as hopefully be able to mix multiple animation tracks (hopefully, not yet tested), such as legs running while arms reach for the ball, etc.)

The character I'm currently working on is for an American style Football game that I'm developing on my own as a hobbyist game developer (gamemaker studio 2), and the ball object attaches itself to the skeleton's hand bone when being carried by a player, which means to avoid mirror inconsistencies of the ball magically appearing to swap to the other hand when the player faces left or right, I have to create all 8 directions, so that the same bones are always oriented correctly, unfortunately.

Yes, I'm using a single skeleton, being set up in the South orientation, and then having a Direction animation where the bones are translated for each direction, and the skin placeholders are keyed so they swap out for each direction.

I use Aseprite for drawing/assembling and exporting the sprite images. Creative Cloud subscriptions are a no-go for me (I would use Affinity Photo possibly). In Aseprite, it's too useful having layers (rows) and frames (cols) and I've set a series of eight frames in the first section tagged as Direction in order of S SE E NE N NW W SW, and I export each sprite image (head/nose, eyes, mouth, hair front, hair back, body (torso), arm left/right, leg left/right) selecting a particular row and setting the export range to the Direction tagged frames. Aseprite then exports them out named 1-8 (arm_right1, arm_right2, etc.) which I (eventually will) place into direction folders named "s" "se" "e" etc. and Spine pulls from the same export directory.

Attached is a snip of how I've laid things out:

I just wish there were some built-in automation tool to speed up the 8-way sprite process, whereby I only had to set up bones, meshes, weights, and animations for a few directions (front/back, side/side, diagonal) and then Spine could interpolate the information and create the other directions. Not sure how difficult or feasible such code would be for the Spine devs, but I'd be willing to pay double the price to have such a thing!

Oh, I did want to note that I did find out I can choose the paperclip filter and shift-select across all of a particular skin placeholder direction to instantly activate or de-activate all of them, which is a nice thing.

It probably sounds like you're asking for an impossible mechanism. Bones can't really "set themselves up" by interpreting the images like an AI. You have to recognize the limitations of 2D programs in general and produce the sprites in time-manageable fashion.

You could interpolate effectively if you simply mix the animations in engine. However, that's a bit experimental depending on the Mix value, as the image attachments of the next animation usually display immediately while the bones catch up to the next animation pose.

Hmmm, in the case of your requirements, it seems that it would be faster to create the result by preparing frame-by-frame animation sprites for each direction and animating it, instead of diverting the parts for each direction as in the 8-direction tutorial I mentioned in the previous reply. However, as you are concerned a large number of sprites would be required. I know you want to avoid having to prepare a large number of sprites itself, but just because you can use Sequence attachments since 4.1, it is easier than before to use frame-by-frame animation within Spine, so the animation itself I think it will be easier to manage than　trying to make it with skeletal animation. Sequence attachments are not yet described in the user guide, but are introduced in our blog:
Blog: Spine 4.1 released: Frame by frame animation

We are aware that it is hard to create and animate different direction poses with the current Spine features and would like to improve it. However, even if we consider your idea, we cannot answer exactly when that can be implemented, so we would like to find a way to solve your issue, preferably with the current Spine editor’s features.

Chiming in to confirm what Misaki and Skarasuko already said, and add a couple of info.

If you use skins for directions, you're adding extra steps to the setup you're already using because you still need to key the correct active image, and you've also smoked the option to use skins for actual customization this way.

Skins cannot be keyed in animations, so it's also confusing to use them this way.

You may also use linked meshes to reuse a mesh information for a new mesh of the same size (this is intended to use with skins)
Mesh attachments - Spine User Guide: Linked meshes

You can also copy-paste the transforms from/to mesh vertices, as long as the number of vertices you copy and the number of vertices you paste is the exact same. The order in which you select the vertices also matters, so make sure you select the vertices in the same order.
IMHO, this is not worth the hassle, and it's simply better to create a new mesh but keep the meshes very simple, so one has less work to do.

Transform constraints CAN be keyed in animations. Keys - Spine User Guide: Transform constraints
This is useful for lots of things, example: Blog: Holding a two-handed weapon

rigging a perfectly symmetrical front character is actually doable and simple using copy/paste trasnforms Tools - Spine User Guide: Copy/paste
I show and explain precisely this process in the first minutes of this stream: https://www.youtube.com/watch?list=PLwGl7Ikd_6GTpd2PnWqqIZVsqotxtrtaE&v=67Lk-EZbNG4

Rigging a skeleton actually takes at least 2-4 hours, so I'd say taking 2 hours to rig a new direction is actually pretty good. If you're faster than that congrats to you 😃
You could also separate the directions into different skeletons, some people find it less confusing and complex, so it may be a good beginner option if you don't need to mix directions seamlessly.

A walk in front view requires a completely different animation and movement than a side walk, so you can't reasonably expect Spine to do all the work for you. You can however use the timing from one walk to create a walk in a different direction, so there's that. And flip the character, as Misaki already said.

Btw if you're looking for inspo, look how neat these Spine animations were made in Tape to Tape: https://twitter.com/Tape2Tape_Game
They also use a single skeleton and made custom interpolation animations to make the rotation super smooth.

  • Nate

  • Objava #9
  • This post is in engleski

Tape to Tape is super cool! :o

I recognize that editor.

Thanks all for the feedback! Erika, I've often put your tutorial videos on in the background on my iMac while working to help keep me motivated. It helps to have company, even virtually, participating in the same arduous process. I'll rotate in AdamC pixel art class videos, Think Citric, Armanimation, and others depending on my mood.

Here's another character I rigged since the last update. I didn't use skins this time and so the structure is bone > attachment > directional image meshes, as seen here:

I'm still trying to find the right placement of vertices and weightings to get a smooth bend in the legs and arms. Here is my current placement strategy:

The legs are each a mesh and are anchored (orange weights) to the waist bone. The arms are similarly anchored to the torso bone. It works somewhat okay but there are issues, such as when the leg is rotated toward/across the other leg, there is some shearing/stretching of image edge pixels around the vertices of the upper/inner thigh resulting in a jagged look. I have to remove her leggings for you to see the effect:

It's not as bad rotating the leg outward, but is still present:

If anyone has suggestions for how to better place the vertices/weights to make for smoother limb rotations, I'm all ears, as it's something I've been battling over since I started using Spine. Maybe there are too many vertices close together? But then how to make the limb edges bend smoothly? Experimenting to find something that works and fixes all the issues is fun, frustrating and time consuming all at once. I'm often tempted to give up and do frame-by-frame hand-drawn animation, but will have to limit myself to essential key frames or I'll go crazy. And I don't want to give up the in-game benefits of skeleton animation blending, outfit attachments, etc. sigh Who'd have thought the art assets would be the biggest hurdle to game development...

Here is a south leg walk cycle. I'm hoping to be able to use separate animation tracks in game to have the arms do different things when needed, while the legs do their own animations:

It's apparent I'll need separate right and left leg/arm sections of the outfits in order for them to layer over/under each other correctly.

While trying to learn Spine is fun at some level, it's still quite a slog and frequently frustrating trying to get things to look correct.

Appreciate any further input/suggestions/examples.

You'll be going through the same struggles as most people starting out with the mesh edits. The time it takes to get used it to will depend on how much you learn, from experience and communities.

What you need to do is add vertices on the inside, next to the outlines. Weight them correctly and if necessary, add more vertices. Optionally, add lines (by hold click) between the vertices for visual organization.

I replied in this forum this advice before, but you can consider adding "joint" bones and weight the images to them. This is if you intend to do advanced animating, when you translate and scale up/down the limbs for 3D effect. The downside is, you cannot use IK and need to rely on FK.

Speaking from experience, you'll keep fighting against the limitations of Meshes & Weights. At some point, I decided not to be over-reliant on a single image for a single body part and decided to create the necessary frames for parts like the Bicep and Thigh. People also have their special techniques to save time, but this will be very dependent on the art style you choose.

*You might want to modify your screenshots to be less suggestive, to be safe.

Forgot to mention another issue that is seen in above screenshots: Whenever mesh is altered, even slightly, 'frizzing' of edge pixels occurs. The bottom screenshot shows this all along the outline of the legs where there are single pixels either jutting out or jutting in (creating tiny indents what look like missing pixels). Is there any way to avoid all that distortion? I don't see that happening in other ppl's spine2d videos to their characters. The pixel art is at 1024x1024 canvas (exported at 50% down to 512x512) if that info matters.

Yes I thought of putting some black bars but it's just a figure without any details so didn't seem that suggestive. Also I can no longer edit the post.

Are you suggesting a mesh more like this?

Ok so with the above tighter outer mesh laying directly against the pixel outline, and adding an inner set of vertices against the outline this does seem to keep the edge shearing under better control. Also, adjusting where the upper leg bone pivots from at the hip makes a big difference, for better or worse.

5 dana kasnije

Hi Misaki! Yes, you're right that Pixel Grid is on. :think: I was probably thinking "I'm doing pixel art so I should have it on" but I'm really not exactly if the sprites are on a 512x or 1024x canvas lol. I do see I can smooth the edges by turning it back off so I'll work with it like that and see if that fixes my frizzing issues.

Alright, I got some new questions/issues as I'm keyframing all these directional animations.

First issue/question involves mixed tracks. I want the leg/body bones animating on track0 and arms animating on track1 to take advantage of tracks and combining different animations. But in the Animation Preview window, the tracks start playing immediately at whatever point I assign an animation to them, meaning that they play 'out of sync' with each other, making previewing the animation properly (i.e. viewing the multiple track animations together to see how they will appear in game) impossible. Isn't there a way to have the tracks play in sync so their timelines are aligned? I can't spot a button or setting that will do this and seems a major oversight, or what is the proper procedure?

The second and related issue, is that when I create the arm_walk0 animation (animation of just arm bones/attachments being keyframed) and place it on track1 in preview, I have to remove all other bone/attachment keyframes to prevent those from obstructing the leg/body keyframes set in the leg_walk0 animation, which I have on track0 in the Preview. But doing this reverts the bones/attachments to the Setup position (facing south), as shown (I'm animating the West facing walk cycle for the arms):

So I have to animate the arm bones 'blind' because the attachments and other bones' positions are the Setup configuration and not the direction I'm animating for. Is there an intended procedure for animating different directions but keep all bones/attachments the correct orientation so that I can see how it looks, without having the bone/attachment keyframes not part of the current animation interfere with the current animation I'm working on? Hope that makes sense. :think:

Maybe this is why some directional sprite tutorials used Skins and skin placeholders? But like was stated earlier, if I do that then I cannot use the skins for changes of outfit or other swaps in game.

Thanks for any advice.

It really seems like Spine needs to be adjusted in its design to play better with multi-directional animations as well as multi-track animations. If I so much as touch or do anything to the setup pose, like move a bone or add a new attachment, it throws off all of the animations and I have to go through them all and hide the new attachment and re-adjust every animation. Wouldn't it be better if you could define multiple Setup poses? And be able to lock the poses, so that one can add new attachments without them affecting the existing poses (i.e. new attachments default to hidden)? And then with multiple poses, you can select a pose to animate and toggle into Animation view for just that pose. And finally, be able to manually define the sprite area via a bounding box, so that when Exporting, the export area size is defined by the box and not affected by having a large background image or other reference images in the skeleton, without having to create a separate skeleton just to hold reference images that you don't want in the export. Hope the devs will consider these things in future updates.

Another feature suggestion:

Currently, the only way to simulate a 3D character, like when an arm or leg rotates up away or towards camera, it needs to be scaled down to simulate foreshortening of the limb from the perspective of the camera. While this is doable and not TOO big a deal, what if Spine allowed for 3 dimensional bone orientation, so you can turn bones 45 degrees away or toward camera for NE/NW/SE/SW directions and 90 degrees away or toward for N/S directions, and then when you rotate the bone around its axis, it foreshortens naturally, and the attached 2D meshes deform appropriately in the X/Y?

Isn't there a way to have the tracks play in sync so their timelines are aligned?

You can set the speed to 0, set both animations, then increase the speed. I know this is clunky, we'll improve the Preview controls in the future.

Is there an intended procedure for animating different directions but keep all bones/attachments the correct orientation so that I can see how it looks, without having the bone/attachment keyframes not part of the current animation interfere with the current animation I'm working on?

I understand the trouble not being able to see the direction in the editor viewport. You can see the animations combined in Preview, though it's not quite as good. You could paste keys in from another animation so you can see the rest of the body with a particular direction, then delete the keys afterward. Or keep the animation with Export unchecked, duplicate, and delete the keys in the duplicate

this may save a little effort if you need to edit the animation later. Maybe Erika or Misaki have more ideas.

If I so much as touch or do anything to the setup pose, like move a bone or add a new attachment, it throws off all of the animations and I have to go through them all and hide the new attachment and re-adjust every animation.

If you needed to adjust the setup pose and wanted to have all animations change, you would appreciate Spine's default behavior. Both are valid use cases and we will likely add "setup pose compensation" which, when enabled, adjusts animations the opposite amount when you change the setup pose.

If you are adding a new attachment you should not need to hide it in every animation. Instead, hide it in the setup pose.

Wouldn't it be better if you could define multiple Setup poses?

The idea and variations of it have been floated by our team members before. It, or something like it, could be useful but it increases complexity quite a bit. We have a lot of other super cool features we'd like to add before improving this area.

And finally, be able to manually define the sprite area via a bounding box, so that when Exporting, the export area size is defined by the box and not affected by having a large background image or other reference images in the skeleton

This only makes sense for image or video export. For those you can set the export area explicitly:

what if Spine allowed for 3 dimensional bone orientation

In 2D a lot of things get faked. It is likely that the 3D mapping doesn't provide exactly the results you want and would require fix up. Ultimately the goal is to get things to look right in 2D and the path to get there probably doesn't map perfectly from 3D. Also, doing 3D would be difficult, affect a lot of code, and require more runtime computations.

I don't mean to be discouraging for this idea or the others. We are glad to hear your ideas, it's just the nature of the beast is that some things are difficult and some are less so. It's not always apparent which is which, so just throwing the ideas out there is best. My favorite is when an idea that has a lot of value for the user just happens to be easy to implement. :sogood:

Thanks for taking the time to read, Nate; any progress the dev team can make toward aiding us users who are mainly interested/struggling with creating 8-way directional characters will be greatly appreciated!

I'll try the 0 speed suggestion and yea hiding the new attach in setup should have been obvious to me!

I may go back to try having each direction in it's own skeleton so that setup will always show the correct direction. As long as there's no functional difference in Gamemaker Studio. I thought multiple skeletons caused an issue at one point, but I think it was due to my not using the Pre-Draw event to adjust bone positions and was trying to do them in the Draw event that was causing that problem.

Another thought: you could duplicate your skeleton, set the duplicate to show a direction animation, and then work on your real skeleton, seeing the direction pose underneath. When done, you'd delete the duplicate skeleton. This may work best if you hid everything in the setup pose, so the duplicate skeleton shows through.

I agree, we should do a full pass on workflows for multi-way characters and see what we can do to make it easier.

Multiple skeletons can work fine, depending on your needs. I know there are some games using this, like this one. The main downside is that a skeleton can either by on top of or behind another skeleton. You can't freely mix the draw order. Some runtimes have some tricks, like spine-unity's SkeletonRenderSeparator but it's not as easy to use as the draw order.

In 2D a lot of things get faked. It is likely that the 3D mapping doesn't provide exactly the results you want and would require fix up. Ultimately the goal is to get things to look right in 2D and the path to get there probably doesn't map perfectly from 3D. Also, doing 3D would be difficult, affect a lot of code, and require more runtime computations.

Here's my example:
https://www.deviantart.com/silverstraw/art/Spine-Pro-2-9D-Leg-WIP-942832576