Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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. – Mike C Feb 11 '12 at 18:46
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). – user16858 Jun 5 '12 at 22:34
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. – Wackidev Jun 6 '12 at 19:18
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. – brandon Jun 11 '12 at 14:52
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! – 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.

share|improve this answer was done using FaceGen – bobobobo Jun 6 '12 at 15:38
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. – Vael Victus Jun 11 '12 at 13:12
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. – Nick Jun 11 '12 at 14:30

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.
share|improve this answer
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. – Vael Victus Oct 21 '12 at 14:50
I wish there was a ready framework for generating faces like in Dragon Age or Eve Online. – Markus von Broady Oct 21 '12 at 15:03
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 – Vael Victus Oct 22 '12 at 15:07
@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. – Markus von Broady Oct 22 '12 at 15:58
Right, sorry; was stuck in my own needs of 2D glory here. – Vael Victus Oct 22 '12 at 19:40

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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