Rendering Portraits

Inspiration

As mentioned in a previous post, when a peep is born, they inherit traits from their parents. Specifically, their appearance.

This gives variety and realism to the game world. In prior games, I made vector portraits for the peeps. These ranged in art style and components. For example, in the previous game, portraits were not modular, rather I would have had 12 portraits which would be loaded in where appropriate. This was to reduce rendering time (and minimize objects in the game world). The problem with this solution was that there was too little variety, leading to many clones.

To avoid this, I needed a modular system, where the hair, eyes, mouth etc. are separate objects. I was inspired by the Joypixels emoji catalogue. I wanted something similar, but don't posses the skill to pump out a bunch of custom made high quality emoji. I could have bought these emoji (which is what Bitlife did originally for their portraits), but decided to make my own (just to give it a try).

Inkscape

To make the art, I used Inkscape, as I had a bit of experience in Inkscape before. It also meant that the art would be vector, which is useful for future application. I went right ahead and drew the first person, using Joypixels and also Apple emoji as inspiriation.

Left to right: Joypixel emoji, Apple emoji, My rendition.

I preferred the flat look from Joypixels, but decided to make it my own with a larger head and eyes etc. The right image is the one I created.

It went through several development stages before I was happy. This is shown in the image below.

A few experiments before I was happy with the result.

Male Face

After making this emoji, I thought I had a solid foundation. I copied the bust and made a guy.

These 2 became the "Adam and Eve" and the benchmark for future portraits. Hair, eye and skin colour are irrelevant, as they will be changed in the engine, and so are just placeholder here.

Each peep is made up of:

• Eyes
• Mouth
• Nose
• Eyebrows
• Facial Hair
• Hair
• Wrinkles/Skin Details
• Head

Of course, this meant creating a ton of different features for the portraits.

Hair

The hair styles were first, in which I made around 10 for each gender. The hair is either curly or straight, and some hair styles require a part of the hair to be rendered behind the peep, such as in this hair style:

I created all the hair styles blonde, so it was easier to notice the differences in colour. Only a couple hair styles changed later on such as this curly one:

Left to right: before and after update of hair style.

Babies, Elders

I decided to create a custom bust for old people and babies. The older hair and face shape look like this:

The wrinkles are rendered separately in game as the peep ages. Baby peeps have a smaller head and one hair style:

Other

Blemishes such as acne can be rendered as well:

In-Game

Once imported into the game, I made a function to create a portrait based on a peeps features. Each peep stores what they look like in an "appearance" attribute. This is then shown when appropriate.

Left to right: appearance highlighted in array, portrait generated.

The image above shows the appearance of a peep stored as an attribute in the peep array (I highlighted this in yellow). This is then used to render the portrait (shown on the right). Note: this is still early art, and shirt/background is subject to change.

These portraits are then displayed where appropriate. For example, when you tap on a house, it displays the occupants. This is what it looks like when tapping on the player's house:

This is a "house popup" and will display everyone in a scrollable menu.

If I scroll the menu, you can see the player (you) and the player's brother Larry. You will also notice the genetic variation, as we differ in eye and hair colour.

On a final note, when I age the player's dad up you can see him age gradually: