I'm in the process of creating a web app. I have many randomly-generated non-player characters in a database. I can pull a lot of information about them - their height, weight, down to eye color, hair color, and hair style.

For this, I am solely interested in generating a graphical representation of the face. Currently the information is displayed with text in the nicest way possible, but I believe it's worth generating these faces for a more... human experience.

Problem is, I don't know where to start. Were it 2007, I'd naturally think to myself that using Flash would be the best choice. I'd love to see "breathing" simulated. However, since Flash is on its way out, I'm not sure of a solid solution.

With a previous game, I simply used layered .PNGs to represent various aspects of the player's body: their armor, the face, the skin color. However, these solutions weren't very dynamic and felt very amateur. I can't go deep into this project feeling like that's an inferior way to present these faces, and I'm certain there's a better way.

Can anyone give some suggestion on how to pull this off well?

  • \$\begingroup\$ Not really an answer being that I haven't looked too much into it myself but this demo of layering images in the Canvas may be of interest to you. \$\endgroup\$ – Mike Cluck Feb 11 '12 at 18:46
  • \$\begingroup\$ Have you thought about going for a more Wii-like approach? There were several projects to create Miis using SVG which would be more amenable to a cartoon face (with possibly some minor animations for blinking / mouth moving but not so much for breathing or any sort of details). \$\endgroup\$ – user16858 Jun 5 '12 at 22:34
  • \$\begingroup\$ It looks like you're asking two questions here: how to generate faces based on parameters, and how to display animated faces in a web browser. You might want to consider asking the second as a separate question. +1 to counteract the downvote; I think that by themselves they're good questions. \$\endgroup\$ – Wackidev Jun 6 '12 at 19:18
  • \$\begingroup\$ The current options are Unity3d or flash. Flash would be easier since you could make the art with vectors. Unity also supports vectors through plugins though. Flash is still perfectly valid, but unity is definitely on the upside of growth. \$\endgroup\$ – brandon Jun 11 '12 at 14:52
  • \$\begingroup\$ Thank you for these great tips, but the animation really isn't necessary. This isn't a large system that should require a plugin; at worst I'll just layer PNGs/SVGs. I love unity, though! \$\endgroup\$ – Vael Victus Jun 12 '12 at 13:00

The way you are thinking to do it is fine. You should drop inhibitions about Flash and just use it. You aren't writing a bank system here, you're writing a single game. Even if it does have a sequel, Flash is still installed on pretty much every computer today.

Just a note that the best face generator I've ever come across is facegen.

There is a FaceGen SDK. I don't really know what it costs, but I'm guessing it must be in the thousands. Then, you have FaceGen create a face, using your inputted parameters (for eyes spacing, skin color etc - FaceGen can do all that). Then, you render the face to a texture, save it out, and send it over to the other application.

  • \$\begingroup\$ digimi.com was done using FaceGen \$\endgroup\$ – bobobobo Jun 6 '12 at 15:38
  • \$\begingroup\$ FaceGen's definitely impressive, but I'm looking for a more drawn solution. As well, this is actually for an entire engine that will be for all games here-on out. I definitely don't want to use something like Flash that will be phased out eventually. iPhone doesn't support it, and there's no clear advantage to HTML in this case. I believe I'll be looking into SVGs, as one person mentioned. \$\endgroup\$ – Vael Victus Jun 11 '12 at 13:12
  • \$\begingroup\$ You can export facegen to OBJ, and render it using WebGL. Three.js is a great solution for that. If your target is iPhone, you can try rendering a facegen mesh using canvas with just vertex colors. \$\endgroup\$ – Nick Jun 11 '12 at 14:30

Have you ever seen old movies where they use an Identikit (little strips of transparent plastic beside each other) to reconstruct a perpetrator's face? Basically, that's what you want to do. Image files with transparency for pre-defined slices of a face, plus one or two for the actual head and face shape, another one for the hair style.

Since you're in 2D, you'd need a separate image for every facial feature for every angle it can be viewed from (e.g. front, left, right, back ...). Then you draw them on top of each other, and maybe cache the pre-rendered head (e.g. in another image file, or as a data: URL or whatever) so you don't have to draw it over and over again.

This works similarly for the body, just that you need separate sets of slices for arms, legs and the parts of the torso, so you can rotate arms (think of how South Park looks, or how an action figure is made for inspiration on how you do the individual parts - take apart a G.I. Joe figure for instance).

For the various body types, you might be able to get away with just stretching the image sideways. Or rather, what you really want to do is draw your character wider and then horizontally compress the image for the narrower body types, because stretching an image means the computer will double pixels (where it should add detail), whereas if you compress it, it will remove pixels (and thus some of the "wider body type" detail, giving the appearance of adding detail to the wider ones if you do it right). If that doesn't look right, you can probably at least draw fewer body types and then make intermediate steps by compressing horizontally.

Of course, you can add shading layers that you'll only draw at certain levels of compression, e.g. a "sagging cheeks" layer at 1.0...0.9, nothing at 0.91...0.5, and "sunken cheeks" shading layer at anything below 0.5 or so, to improve the illusion. Just make sure to apply all of this to the slice when seen straight, before you rotate it, or it'll end up stretched/compressed in the wrong direction.

If you have a simple drawing style, you could also just draw the faces as vectors and then multiply the coordinates (or transform the coordinate system with a horizontal scale, I forget if Canvas supports that). This would also make it easier for clothes, because those might have to stretch with the character's body, and you might need special versions that show off a character's muscles (could probably be approximated with optional shading layers again). If you draw these in vectors, you could just straighten out the curves you draw for muscles for skinnier characters, or fill the character shape with a different color/texture.


This is a very good question! Unfortunately I can't suggest anything more than what probably you already know:

  1. Prepare 10 faces in Photoshop or Flash or other drawing tool with layers.
  2. Put every face element like nose, eyes, eyebrows etc. on a separate layer.
  3. Design the faces the way all elements are on same place.
  4. Hide all elements except one (or set as a guide layer in Flash)
  5. Save as .PNG file and repeat for other elements
  6. Put these .PNG files in groups, and generate faces by overlapping random PNGs, one of every type on top of each other.
  • \$\begingroup\$ Yeah. :} We'll be going with something like this, more than likely. I just worry about characters with "fat faces" or very skinny faces if we needed. Still, the problem would end up being more artistic than programmatic, I think. \$\endgroup\$ – Vael Victus Oct 21 '12 at 14:50
  • \$\begingroup\$ I wish there was a ready framework for generating faces like in Dragon Age or Eve Online. \$\endgroup\$ – Markus von Broady Oct 21 '12 at 15:03
  • \$\begingroup\$ I think something like that could be appreciated, but we'd end up mucking around things like size of the image, if we need the faces animated, and the fact that everyone who uses the framework would probably have characters that look the same as other games that used it. :P \$\endgroup\$ – Vael Victus Oct 22 '12 at 15:07
  • \$\begingroup\$ @VaelVictus Dragon Age and Eve Online generate faces from 3D models, so size wouldn't be a problem, and these faces wouldn't be as repeatable as hand drawn 2D. \$\endgroup\$ – Markus von Broady Oct 22 '12 at 15:58
  • \$\begingroup\$ Right, sorry; was stuck in my own needs of 2D glory here. \$\endgroup\$ – Vael Victus Oct 22 '12 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.