AI > Spine Multi-Pose Character File Management

MinnieMoog · 3 dic 2017

Hi all

I'm currently working on a rather complex project, where our character requires an assortment of angled poses and images. I've seen this come up in multiple threads across the forum - so I feel at least somewhat knowledgeable on the different kinds of workflows for this within the Spine software itself.

What I'm having trouble coming up with, is an effective and organized workflow for bringing this sort of project over from our drawing software (Illustrator, then to Photoshop for the Spine export) and then to Spine.

So for example, one of my AI projects has the following setup to accommodate a skin in Spine:

https://drive.google.com/open?id=1V6AzbN3AtfTqRT7WRobR9IHO7_hnThS5

Currently, the way I'm working - I have all of the images I need for each pose bundled on the appropriate spot on the character. e.g. All of the separate hand images I need are bundled on top of each other and visible for export (which you can see in the image above under the "[slot]aHand" group).

This works great for one of the character's poses.

However, there are often a lot of images that are needed for just one pose. For instance, the blink animation alone requires (at least) five unique images per eye.

https://drive.google.com/open?id=1aYOTbSmRsRyD22jCA4o5dRav3qcMfzim

So, the problems begin when I need to add another pose to the rig.

When I first started this project in Illustrator, I originally created a separate artboard for each pose I wanted the character to have. This meant that each pose would be its own unique skeleton, since I grouped each pose separately from one another in the project. This kept the project quite organized and manageable. I could go back and detail the artwork pretty easily with this workflow.

But of course, in Spine, you can't swap skeletons during an animation (which I was unaware of at first). And more importantly, my programmer and I ultimately decided it would make life easier to do the character with one skeleton rig anyway.

So, this is where I got stuck:

If I combine all of the character's poses into one master rig on the AI project, both the AI project and Spine project become rather chaotic to work with. Not impossible, mind you, but something about it just seems wrong to me. All of the sudden, that five frame blink animation then becomes closer to something like 25 images on one slot because it has to accommodate a blink for each pose (assuming we choose to animate it on each pose, of course).

I'm not a Spine expert, but something about this strikes me as being ...wrong? haha
I feel like I'm missing something obvious. If this is the intended way to work, so be it, but I don't feel like I've seen 20+ images on a single slot on someone's rig before.

I'm not sure if Spine has a way to accommodate my original idea of keeping each pose in separate groups and artboards in the AI project or not, but that approach would certainly save me some hair pulling down the road. Or perhaps there's another, more effective method all together?

TL;DR

I need a solution for setting up an AI file that accommodates multiple poses and images for a single character, which can be then imported into Spine seamlessly, and updated later as needed (such as, for detailing the artwork or adding more images). If possible, of course.

Anyway, hoping you all can help me figure this out! Any feedback is much appreciated! :heart:
~ Minnie

MinnieMoog · 3 dic 2017

Erika · 3 dic 2017

Hello Minnie,
The images give a 403 Forbidden error to me and I couldn't fix the links.
Regarding your problem, you could probably reduce the number of frames required for blinking if you made use of meshes, but I have no idea of the stile so maybe it's not viable.
Are you trying to make an isometric character by chance? Some people said they preferred to have separate skeletons for each direction for that.

I personally like this sort of challenges, so if you don't mind sharing what the character is supposed to do within the game, how many poses/skins etc it's supposed to face, I can try to help you find a solution (:

MinnieMoog · 3 dic 2017

Hey Erikari!

Stupid Google Drive hehe. I edited the OP with “shared links” in place of the images. If it’s still not working, let me know.

I’d definitely be curious to see how to do a blink with a mesh. I’ve always worked in traditional animation, where each frame is drawn independently. I never had Flash growing up, so all of this vector and bone based animation stuff’s pretty new to me. As a result, I don’t feel very sure of where I’m supposed to use Spine to achieve quality shortcuts versus where I need traditional frames. Maybe that’s the actual thing I’m stuck on, all in all, who knows?

Are you trying to make an isometric character by chance? Some people said they preferred to have separate skeletons for each direction for that.

You’d think (and boy does it feel like it! lol)!

But actually, no. We’re making a strictly 2D character on a side-scrolling view, but the character just happens to be able to do all sorts of things.

My main reason for needing many angles mostly boils down to a desire for a high quality level of polish.

I was studying the animation style of Rayman Origins & Rayman Legends recently, and I noticed that the characters will often change their facing position mid-animation. For example, Rayman himself will often do 360 flips that have him turning toward and away from the audience. Since Spine is a skeletal based animation tool, and these games were made with (what I assume is) skeletal based animation, I figured there had to be a feasible way to accomplish this in Spine.

But we also need it for practical purposes as well, for things such as ladder climbing and wall scaling. The character would need to turn and face away from the audience to grab the ladder or wall. I considered doing ladders from a 2/3s view, to avoid changing the character’s angle. But I don’t like the way this looks as much.

Also, I’d really like the character to idle on the 2/3s perspective, but as soon as the player begins moving around - the character will turn to face in profile view. I’ve always liked the way this looks, and feel like it adds a bit of polish. You can see the character’s face and expressions best at 2/3s (or when they face the audience entirely), but when the character is mid-action, the perspective looks really weird at 2/3s, which to me, isn’t quite so desirable.

Anyway,

I currently have the following angles planned:

Foreground View
Character faces the audience
Idle View
2/3s perspective where the character typically idles
In Between
An in between angle for polish… Not really used strictly for gameplay, but for animation where the player goes from Idle to Profile
Profile View
Used for many of the game’s core mechanics
Away View
Opposite 2/3s perspective. Character is facing away from the audience
Background View
Character faces the background entirely. Used for ladders and climbing mechanics

Not sure if I’ll need another in between frame between the Profile and Away views or not.

As far as skins go, I’m currently unsure. The game’s story takes place over the course of a year, so I was considering doing the Persona 5 thing, where the characters have a unique outfit per season. So at the very minimum four or five.

Anyway, I hope this information clears a little bit of this up!
I appreciate your willingness to help a lot! This project means the world to me, so any help I get is always very much appreciated.

Erika · 5 dic 2017

Yes I can see the images now (:
So I've neen thinking about it a little, and I think preparing "animation presets" like they did in this topic could be a viable solution:
Misho and Robin - TV animation series

Basically, you go through the pain of organizing poses and views just once, and you create a fake animation where the characters or parts of them have the angle you need. I couldn't see to well but since yours is vector art I assume it has nice flat areas of color where you can play with the position of a bone, do a swap of image maybe and you have a different view angle. See how little bones they actually used for the parts? if you look at their tree, they have various versions of the head all stored in the same slot as you were doing as well (it is the most advisable way to do it, after all).
You can then simply copy-paste the parts on your timeline to create the other animations.

Regarding the eyelids, some would just use less frames, some would try to turn the half open version into a mesh that could be deformed by a bone in the middle and have the vertexes farther from it less influenced. If you haven't used meshes much yet, here are some interesting tutorials: Tentacle rig

Spine 3.4 paths sample projects walkthrough - YouTube

And of course in case you miseed it, there's the user guide playlist that has a chapter dedicated to meshes as well:
Spine User Guide - Getting Started - YouTube

Regarding the structure, I strongly suggest to try keep the bones number low and group the assets by kind rather than by view, (like having a "head" slot ) but maybe having the name of the attachments something like front-head, front-leg, away-head, away-head, so that if you filter the tree on attachments you can actually just activate the parts that you need very quickly since they get sorted alphabetically.

MinnieMoog · 5 dic 2017

Awesome, thanks Erikari!

I've been doing a lot of back and forth thinking on this as well. I came to about the same conclusion that team did, in the sense that I'd like to build a similar 360 degrees pose library. Unfortunately, although my characters are originally being drawn in vector, in the end, I intend to detail them such that there is little to no flat color being used. So it will likely require quite a bit more frames to achieve a smooth rotation effect, I imagine. That's okay though, I think I've decided on solid enough approach to move forward with this.

One of my main concerns before came from the fact that, given how I intend to detail the artwork, I was afraid the AI files would become too large and bulky for my PC to run quickly. Typically, many detailed images (detailed in this case meaning, using unique brushes, textures, gradients, etc.) would be layered on top of each other - and that tends to bog down performance. But I think a possible solution is to keep the poses in separate AI files, but then combine them all in Photoshop once they are ready to be taken into Spine. This way, they are all aligned properly at the setup pose stage in Spine, but I can still keep the files separated in Illustrator. Hopefully the Photoshop file won't be too big, but since I won't be editing the images there, I'm assuming it will likely work fine in this case.

Going to test these theories throughout the rest of the week and see if it works out for me.

Thanks for the help!

Erika · 5 dic 2017

MinnieMoog ha scritto
But I think a possible solution is to keep the poses in separate AI files, but then combine them all in Photoshop once they are ready to be taken into Spine. This way, they are all aligned properly at the setup pose stage in Spine, but I can still keep the files separated in Illustrator. Hopefully the Photoshop file won't be too big, but since I won't be editing the images there, I'm assuming it will likely work fine in this case.

yep that's a very good idea! If you encounter problems exporting remember to have the photoshop file in RGB mode (and not CMYK) and to - make a copy of the file and - flatten all smart objects. It shouldn't be a problem but to be safe if you happen to have it on exporting, this should work.