Pixel Art

Portrait Slices

• Portraits are made by lining up a bunch of portraits in order, kind of like a complicated sandwich. These are called slices.
• Slices are just PNGs arranged in the right folder (corresponding to the Slice Type).
• Some slice types can accommodate front and back, but at minimum they need a base
  • eg: in the hair/ folder, we can put bowlcut.png. We could also put bowlcut_front.png and/or bowlcut_back.png
  • but in the above example, we still need bowlcut.png, even if it's a blank image
• all slices are 128 x 128px. You aren't guaranteed to see the top or the sides of this, depending on where the portrait is being displayed
• slices are displayed in the following order (subject to change)

clothing_outer_back
accessory_jewelry_bac
clothing_inner_back
accessory_scarves_back
accessory_hair_back
hair_back
body
body_extra
clothing_inner
clothing_outer
head
ears
eyes_back
eyes
eyebrows
nose_back
mouth_bac
face_extra
mouth
mustache
eyes_front
nose
accessory_jewelry
accessory_other
beard
mouth_front
accessory_scarves
hair
accessory_hair
accessory_glasses
hair_front
accessory_hair_front
accessory_other_front
accessory_jewelry_front
accessory_scarves_front

RGB Color System

The other main thing that define our portrait maker is that we dynamically recolor the image in a specific way. The important part to know is that you need to make your slices with very specific colors:

• Magenta (#FF00FF) is used as a "mask", covering up lower layers for slice types set up to do so (e.g. hats cover up hair at all pixels marked with magenta on the hat slice)

• Red, Green, and Blue are our "primary", "seconday", and "tertiary" colors. The easiest way to know which color is being used is to copy another slice in the same category.

• Specific colors map to specific indexes in our 7-color "color ramps", that the user selects in-game. To be recolored, the pixel needs to be an exact match to one of these values.

Index Reds     Greens   Blues
   1  #ff0000  #00ff00  #0000ff
   2  #dd0000  #00dd00  #0000dd
  *3  #bb0000  #00bb00  #0000bb
   4  #990000  #009900  #000099
   5  #770000  #007700  #000077
   6  #550000  #005500  #000055
   7  #330000  #003300  #000033

• NOTE: Artistically, we're using index 3 as the "base color" for that entire ramp (not index 4).

Resources

• Photoshop color palette: File:Photoshop recoloring pallete.act
• Aseprite template files: File:Size 1 + half.ase, File:Size 2.ase, File:Size 3.ase