2D animation for multiple layers of clothing

Hello everyone!

This topic is quite popular and there are many tutorials here. But I couldn't find a detailed guide of some tricky case...

So, we have a 2D game, a main character and a fairly wide wardrobe. There are a character’s body sprite, a tie sprite, a shirt, a vest, and many other clothes (but we'll skip that). As an example, 3 options of clothing for the character's body are considered here.
The first important point – for the character's body (one sprite), these several clothing options can be combined in different ways. For example, I can only wear a shirt, or a shirt with a tie, or just a tie (stupid, but possible), etc. So far, everything is simple.
9855423--1419228--upload_2024-5-26_7-58-28.png But there is a second important point – what if I want to animate all this stuff? So that the main character moves his arms, bends down, shifts to the sides, etc. All these actions lead to a change in the position of the body and clothes respectively.

Options from some sources:
1. Should I use a sprite sheet (table)? But these are tons of different options that need to be synchronized with each other (not 3, but too many clothing options for each animation)…

  1. Should I use sprite replacement? But then I need to draw a body sprite with all possible combinations of clothes. So that I could replace the body sprite to a body sprite with a shirt, a body sprite with a tie, a body sprite with a shirt and tie, etc. (but 1 body = several combinations of clothing layers, so too many clothing options and combinations of them).

  2. Split the body sprite into smaller sprites and draw it in parts? But what should these parts be? Now these are 3 options that correspond in space in a certain way. But then it can be completely different items of clothing with different locations (in general, it is impossible to predict how much and how to split).

  3. Make bones in each version of clothing and “glue” them to body bones in a certain way so that they repeat the body movements or are animated in the same way as the body sprite? It's probably possible, but I haven't seen the details of such implementation. I'm not good at it, so there are a lot of questions and issues here... How to “glue” (obviously a script)? What if bones are different in size (a large body bone, but a small tie bone or bones don't match in position)? How is it possible to synchronize multiple layers of bone animation?

  4. Make a bone for body sprite. Then for each clothing layer make a body sprite as a mask with a body bone and a clothed item. This is probably a more advanced version of 2 + 4 points above, but it raises the same questions (I don't know / haven't seen the details of the implementation).

Key points:
1. This is 2D (sprite-based) game. Nothing 3D is planned here.
2. There are X clothing options for 1 body sprite, and these clothing options can be combined.
3. Animation of the character wearing several clothes layers for one body part (for one sprite).

I would really appreciate a detailed description or ideally a video tutorial (if exists) to watch, study and check everything in detail. Maybe there is no good solution here, but then I wonder which way you would go? Still, I would like to find a working solution, but not just think and chat about it...

Thank you in advance!

you already discerned everything

the easy way is if your artstyle can be animated with spine then it will make it drastically easier

but if you have something like pixel art, then welcome to hell

there is a reason why all those old school rpg never changed your character model every time you equipped armor or a sword, a helmet, boots, your character still looked just like in the beggining

what I mean to say is that yes, if you cant use bones you will have to animated every single body part, every single frame of every single direction of every single animation

everytime you add a new piece of clothing you will have to animate it for the whole sprite sheet

Please take my reply with a grain of salt since I have not worked with bones.

When you change the position and rotation of a parent object, these changes will be reflected in all of the children of that object. So if you have a system that can animate the individual limbs, then you may be able to just put the different clothing layers as children of those limbs so that they follow the same transform changes. This is how you could "glue" the clothes on as you mentioned.


I would suggest to learn about simple skeletal based 2D animation before you try to apply more layers. That may help see the capabilities and limitations of the option.

Thank you, pertholdth!
I considered the sprite sheet option more as an example. It will probably be a dead end option. I also think it's better to follow of the bone animation approach. But still, I need a little more detail here. It may be you or someone could share their experience of solving the similar issue or some guide. Because at a high level, as you have seen, I have already done a lot of work.

Thank you, dstears! Thanks for your suggestion!
Yes, there should probably be bone animation here. Unfortunately, I'm not good at bone animation either. Therefore, it's quite difficult for me to make a quick conclusion just by reading the message.
I was just trying to do something similar to your suggestion even before your message, because theoretically it should work. But still, this "glue" worked poorly and child objects moved without repeating the movement of the parent. It's hard to explain, but there were problems here. However, as I said, I'm not good at bone animation and may have made some mistakes, which led to an ugly result. I think I'll back to this way again, since I also followed this logic, and you also suggested a similar approach.