Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

How I Created Thousands of Facial Expressions

Thank you to everyone who's downloaded Senpai Game! It's been a treat to watch the numbers come in. I'm very much looking forward to reading the comments once people return to give their thoughts! As thanks for the warm reception so far, I thought I'd share some concept art and a peek behind the scenes. 

Today I'll talk about what I like to call the "combinatorial expression system." Each character in Senpai Game has a face like a Mr. Potato Head: their eyebrows, eyes and mouths can be combined to produce different expressions. There's a fairly small amount of art in the game, but thanks to the magic of combinatorial explosion, each character has over 1,000 potential facial expressions.

Facial Expressions Demo

The principle characters in "Senpai Game" each have 1000+ facial expressions.


I'm sure I'm not the first person to do something like this, but I can still share a few words on how it works!

The art in the game was an early challenge for me. I developed Senpai Game almost entirely on my own; I relied on others for input during the brainstorming process and for editing and play-testing, but otherwise it was a one-man show. I knew if I didn't cut corners somewhere, the game could consume a decade of my life.

The combinatorial expression system allowed me to get the most "bang for my buck" when it came to creating character art. I'm not much of an artist, and creating new poses for characters presented a challenge. For one thing, it was hard to keep them on-model, and it consumed a lot of time. I'm in awe of artists who can produce quality work at scale and in a reasonable timeframe – in other words, real professionals.

I am not a real professional, so I had to cheat.

Ren'py, the engine I used to build the game, has a feature called layered images, which you can essentially use to turn visual novel sprites into paper dolls. By layering transparent PNGs on top of each other, you can overlay sprites with different outfits, different hairstyles, and in the case of Senpai Game, different facial expressions.

The first step was planning. I had already completed a couple drafts of the entire game's script, save for the last route. To figure out how many expressions each character needed, I read through the entire script. Every time the character had a spoken line, I drew a thumbnail sketch on a large sketchpad of what I thought their face might look like. It turned into a lot of thumbnails, but not too many; I quickly started to identify expressions I could re-use.

Senpai Game Concept Art – Facial Expression Thumbnails

The sketchpad with the original thumbnail sketches for each character's facial expressions, complete with mystery stains.


Over the course of this process, and while working on the final character sprites, those "Mr. Potato Head" facial features became less unique to each character and began to conform to an emerging system. If I do a similar project next, I might skip the thumbnails and simply create facial features for each character following this pattern:

Eyebrows

  • Neutral
  • Surprised
  • Mad
  • Flat
  • Sad
  • ...and then you can combine them to create even more expressions! IE one eyebrow mad and one eyebrow neutral = arched.

Eyes

  • Neutral
  • Surprised (pupils contracted)
  • Hooded eyelids
  • Closed
  • Squeezed shut (useful for joyful expressions)
  • Variations of the above where the character is looking down, off to one side, rolling their eyes, etc.
  • ...and combining the above for interesting effects. For example, hooded eyelids with pupils contracted are good for deadpan expressions and can have a comedic effect.

Mizushima Sprite Source File

Here's a look at the layers used to create Mizushima's stretchy face. I used Adobe Illustrator, but you could use any layer-based software to achieve the same result.


Each characters' mouth ended up being the facial feature most unique to them. For example, the spunky and energetic transfer student has an animated mouth with big expressions, whereas the cold, menacing delinquent tends to move her mouth very little. A general pattern did emerge, though: each character has a set of mouth "states" (IE grinning, frowning, neutral), and each state usually has three variations: mouth closed, mouth open but teeth together, and mouth open and teeth apart. This was useful for making the character appear to talk. In fact, if I started over, I could create talking animations with just three drawings.

Splitting each mouth state into "big" and "small" versions provides even more versatility. For example, "grin-small closed/teeth/open" and "grin-large closed/teeth/open" can be used to convey a more muted smile or a more animated one, respectively.

Mizushima Sprite Source File 2

Wow, you read all the way to the end! Thanks, here's some nightmare fuel.

In the end, I was pleased with the results. The characters in Senpai Game are expressive and leap off the page. Screen. Whatever. And I only had to sacrifice dozens of hours of my life to make them! Seriously, though, Senpai Game lives or dies by its characters' ability to endear themselves to the audience. I think their high level of expressiveness helps to this end. Although with all the time I spent on their faces, maybe I shouldn't have bothered with the full-body, traditional visual novel presentation. Instead of sprites, maybe character portraits would have sufficed. Oh well, lesson learned.

If for some reason you read all this but haven't played Senpai Game, you can pick it up for as cheap as free here. I hope you enjoy it!

Support this post

Did you like this post? Tell us

In this post

Leave a comment

Log in with your itch.io account to leave a comment.

Mentioned in this post

The reverse visual novel where you play as a scheming love interest!
Visual Novel