Clothing options in a 2D game.

This has always been something that has stumped me for some reason. Now that I want to do this myself, I really need to get it sorted. How do people possibly make clothing options on 2D characters?? For example some games let you choose a different head, body, pants, hat, etc. No way could if a player chooses this combination, use this character, some games have literally hundreds of thousands of combinations. Maybe use image points? But the character has various different animations, or craft each character set of clothes then somehow merge them?? More importantly, how could it be done in C2?

I'm really very confused here, there has to be a somewhat simple way right?

Could I have this moved to How do I?

You're already here ;)

As for your question.. well, you answered it yourself really. Imagepoints. Yep, someone would draw all those clothes, but it's probably about the same amount of work as drawing 50 different characters, with the bonus of having thousands of different looks.

are you guys talking about this? andrew-hoyer.com/andrewhoyer/experiments/cloth

I believe he means 2D sprites having different varieties of clothes but that is cool though!

No, i believe this is about doll makers, avatar and changing equipment.

I suggest image points and pins, lots of PINS. pin pin pin.

ok. here is a suggestion

there are a couple of ways to do this in C2 native. It depends on the depths of animation you need. If it's just 2d angles(left/right platforming). This solution is easy to do.

Create 1 sprite sheet for heads. Create 1 C2 sprite. Each frame is a head. When you want the player to change heads. change the frame for the head. Repeat and rinse for every object.

Create(or manage) a master sprite with numerous image points. Each IP is for each body part. when the player is put together pin each part.

I would also suggest using Spriter for this as animating all the parts is easier than sprite sheeting each frame and the image points :|

Yeah I thought he meant dollmakers at first, but then he mentioned games. They're not classed as games are they? They can't be! No way! Surely not! ;p

I was thinking of a way of doing this that would allow a bit easier coding. But would also mean the characters outfits/armor or whatever they are would have to be as a full set. If you don't need them to be able to switch individual pieces like head, feet, hands, etc... you could do this:

Create multiple looks for your character, in my case I want the character in various suits of armor. Each suite get's it's own sprite sheet, or own row on the sprite sheet. I could then create a variable that represents which row or sprite sheet I want. If I name them all something similar like mainCharacter_GreenArmor then in my variable I use it to control the last part, so if I need them in the Blue Armor, I set the variable to _BlueArmor. Then I have it update the current animation or sprite sheet being used by adding _BlueArmor to it like mainCharacter_BlueArmor. THis way I can swap out easily in game simply by using my variable appended to the character name. Not sure how I would do this in Construct, but outside of construct in code it wouldn't be too hard.

For Example, if I have spritesheets used for the following:

mainCharacter_BlueArmor

mainCharacter_GreenArmor

mainCharacter_BlackArmor

mainCharacter_DefaultArmor

When I find those items in the game and want to switch my mainCharacter to wear them, I just update the sprite with the appropriate spritesheet name so if I am currently using mainCharacter_DefaultArmor, I then set it to mainCharacter_GreenArmor. And use that to set whatever property of the sprite is used to control what spriteset is being used.

Again, no idea how hard it would be to implement in C2, but in .Net it would be fairly straightforward. No idea if this is helpful or not, but figured I would share my point of view.

I believe the term is onion-skinning. And for now, you would have to code it using animation frames and arrays I suspect.

For my proposed method it is more about swapping out the spriteset based on what happens in the game. The onion skinning if I a not mistaken is about looking at the animation of an object and seeing multiple keyframes at once so you can see the overall steps of the animation superimposed on one canvas and then tweak them as necessary. I apologize if I am misunderstanding the use of onion skinning in this particular instance.

make multiple sprites , add them each as different anims for an object ,then make a menu where each button changes the anim for the object

Well I am sure there can be more than one way to do it and a good one is make spritesheet of every part (like head, hairstyle, shirt, pant, armor, shoes, arms etc.)

If anyone who dont knows how to make

spritesheet then dont worry keep it simple and create new sprite for each part and than add frames in each part sprites.

For example create a Hairstyle sprite.

Add animation frames inside sprite Hairstyle.

Same do with the Armor add frames in Armor sprite (like blue , green ,red ).

When you make a character creator menu you will make some buttons to change the hairstyle or armor.

like in hairstyle selection add two buttons like < and > to change them.

One thing I forget to tell that every sprite you are creating like Hairstyle, Armor, Paints etc. you should add instance variable for those sprites.

Example for sprite Armor create a instance variable var_armor.

So now in character creator menu in select hairstyle section or armor selection section when you click the sprite button '>' the variable for Armor 'var_armor' changes to 1.

(Note: You must set the armor frame to a variable number. Like if var_armor is 0 then Armor set frame to 0 (the animation will set to the frame 0 and whichever frame like armor blue or armor is placed in that 0 frame will be played or set)

If var_armor is 1 whichever frame you set to the var_armor will play.

I set frame 1 at var_armor=1 . so it will set to frame 1.

If frame 1 having blue armor then it will set to armor blue color.

Same with the hairtyles, shirt,pants, face etc.

Good luck !

Well I am sure there can be more than one way to do it and a good one is make spritesheet of every part (like head, hairstyle, shirt, pant, armor, shoes, arms etc.)

If anyone who dont knows how to make

spritesheet then dont worry keep it simple and create new sprite for each part and than add frames in each part sprites.

For example create a Hairstyle sprite.

Add animation frames inside sprite Hairstyle.

Same do with the Armor add frames in Armor sprite (like blue , green ,red ).

When you make a character creator menu you will make some buttons to change the hairstyle or armor.

like in hairstyle selection add two buttons like < and > to change them.

One thing I forget to tell that every sprite you are creating like Hairstyle, Armor, Paints etc. you should add instance variable for those sprites.

Example for sprite Armor create a instance variable var_armor.

So now in character creator menu in select hairstyle section or armor selection section when you click the sprite button '>' the variable for Armor 'var_armor' changes to 1.

(Note: You must set the armor frame to a variable number. Like if var_armor is 0 then Armor set frame to 0 (the animation will set to the frame 0 and whichever frame like armor blue or armor is placed in that 0 frame will be played or set)

If var_armor is 1 whichever frame you set to the var_armor will play.

I set frame 1 at var_armor=1 . so it will set to frame 1.

If frame 1 having blue armor then it will set to armor blue color.

Same with the hairtyles, shirt,pants, face etc.

Good luck !

Wow this an old thread

I wasn't very descriptive when I posted this ages ago, but there's a ton of options for this depending on how you want to implement player characters. I think I was asking the most efficient way asset wise. Since recoloring is webgl based thus unreliable and may effect performance, the best option is probably this with separate sprites for each clothing with frames connected to arrays, etc.