sprites 2D NPCs with random appearances

[MelSmits]

I'm starting work on a game where I want to be able to randomly generate NPCs. These NPCs could have different faces, haircuts, eye colors, outfits, etc. I'm wondering what the best way is to handle this situation.

These are the options I've considered: 

1. Design a spritesheet for every possible combination of feature. Let's say there's only 4 heads, 4 haircuts, 4 outfits and 4 "held items", that's 4x4x4x4 sprites, each of which would need multiple frames of animation. No thanks. 
2. Design a spritesheet per feature. One for the heads, one for the haircuts, etc. all partially transparent. Then use z-layers in CSS to overlay them into one complete NPC. 
3. Maybe there's some framework that I'm not aware of that would handle this more elegantly? 

Currently I'm considering option 2. I'd use a javascript function to determine whether this guy gets haircut 1, 2, 3 or 4, and use that variable to get the correct sprite. But I'm wondering if there is a 'tried and true method' for this. I might be really overcomplicating or oversimplifying things. I've only just started designing this thing so I'm not stuck on any particular framework yet. 

Any input would be much appreciated! 

[Umz]

I usually go with 2, but have never really had to do anything extensive with it.

Look up Spine, that's another way people usually do it.

 

My suggestion which I'll need to build at some point (If you build it, post it on Github ).

Create a Sprite sheet with the base model in all his positions.

Then others with each set of clothes for all the positions all partially transparent.

Then another with weapons or items, accessories etc, all partially transparent in all the positions.

The use a canvas or bitmap object to draw the base and clothes, accessories etc and save it as a spritesheet object, then you can use that to load all the variations. It will still take a while to create all the sprites but if the base model is the same, it's alot quicker and you won't be handling as many images as solution 2.

Something like (Just the theory):

// Load Assets
this.load.atlas('guys', 'assets/guy.png', 'assets/guy.json');
this.load.atlas('suits', 'assets/suit.png', 'assets/suit.json');
this.load.atlas('hats', 'assets/hats.png', 'assets/hats.json');

// Create new Assets (Look this part up)

this.otherCanvas = (Look up this part);
otherCanvas.add(0,0,'guy1'); // Draw on bottom
otherCanvas.add(0,0,'suit1'); // Draw over
otherCanvas.add(0,0,'hat1'); // Draw over

var GuyInSuitWithHat = otherCanvas.export;

 

[mattstyles]

Yep I'd be in the 2 camp as well.

Have a container for your entity, then place sprites within that container. This way when you want to move your entity around you just move the container. Most rendering engines support containers, pixi certainly does and it would be trivial if you were doing this in the HTML/CSS.

Trickiest bit is just creating all your sprites so that they can work together in any combination, and it can limit your animations as they all have to be roughly the same.

Easiest way is if each individual part sprite is the same size as the actual sprite i.e if your entity is 32x32px, then your hats should be 32x32px even though the actual hat graphic might only be 10x5, by keeping them all the same size you have a bit of waste (most of the hat is blank for example) but it simplifies the rendering and the graphic creation. If you're worried about the wasted parts of the sprites then you'll need to also add some offsets to each part which you can apply when rendering.

Charas has a graphic builder that works like this.