top of page

Avatar Creation System

During my time working on Tahir's Playbook, one of my primary responsibilities for the game was a Character Customization system, where players could unlock pieces of clothing by collecting achievements, then dressing up their characters to be the envy of their friends.  This meant striking a balance between making the artists create a massive amount of content, and making sure that all of the clothing items look distinct.

The first task was concepting how we were going to break down our system.  We ended up breaking our clothing into six categories: Shirts, Pants, Shoes, Hats, Accessories, and Held Items. All of these items would be mutually exclusive with other items of the same type - the player could not wear two shirts, or two accessories (even if they physically did not touch).  

However, this mesh manipulation proved problematic when designing clothes that could fit on top.  We ended up using four meshes for the pants and three meshes for the shirts, and then were able to derive all of our shirts and pants from those meshes, Once the body meshes were made, we just modeled two sets of each clothing item from each of those meshes, and then set up BlendShapes identical to the body mesh.

​We also wanted the user to be able to customize the color of the objects that they placed onto the character.  I initially programmed a color picker component that could be used in multiple projects (another team in my lab was working on a game that also needed color customization).  However, we ended up axing the color picker in favor of a smaller number of pre-determined colors to choose from. 

I wrote a very simple shader to handle the color changing for the clothing.  It just uses the alpha channel of the diffuse map and swaps in the user color accordingly.  This was easy enough for the artists to use and was cheap to render and easy to pack.  

The facial decals were a bit harder, however, because we needed to use the alpha channel to determine the opacity.  However, because of the style, we only ever needed to use the colors black, white, and the user inputted color (for eyes).  So, my facial shader just remapped those colors using RGB values and still used the alpha from the diffuse texture to determine opacity.

Actually setting up the system was tedious, although pretty easy given good pivot placement.  I created references that each object would attach to so that they would be connected to the right bone.  Accessories were a bit more difficult, and I had to write a class that determined where accessories should go depending on the type.  I also wrote a script that made sure that certain hats couldn't be worn with certain hair styles, and full face-masks couldn't be worn with accessories that covered the face.

I also worked on ways to manipulate the mesh in engine.  For this, I used BlendShapes in Maya.  We had initially planned to have a large array of BlendShape attributes to make minor adjustments to the face and body, but constraints on the mobile platform made this difficult.  We did, however, use this method to control body-type (or character weight) in the character customization menu.

bottom of page