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
    Commented Feb 11, 2012 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
    Commented Jun 5, 2012 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
    Commented Jun 6, 2012 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
    Commented Jun 11, 2012 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\$ Commented Jun 12, 2012 at 13:00

3 Answers 3


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
    Commented Jun 6, 2012 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\$ Commented Jun 11, 2012 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
    Commented Jun 11, 2012 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\$ Commented Oct 21, 2012 at 14:50
  • \$\begingroup\$ I wish there was a ready framework for generating faces like in Dragon Age or Eve Online. \$\endgroup\$ Commented Oct 21, 2012 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\$ Commented Oct 22, 2012 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\$ Commented Oct 22, 2012 at 15:58
  • \$\begingroup\$ Right, sorry; was stuck in my own needs of 2D glory here. \$\endgroup\$ Commented Oct 22, 2012 at 19:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .