Pixel Art

Portrait Slices

- First and foremost, our 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 the example, we *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)

ZCAT.clothing_outer_back: 15, ZCAT.accessory_jewelry_back:17, ZCAT.clothing_inner_back: 20, ZCAT.accessory_scarves_back: 25, ZCAT.accessory_hair_back: 29, ZCAT.hair_back: 30, ZCAT.body: 50, ZCAT.body_extra: 51, ZCAT.clothing_inner: 55, ZCAT.clothing_outer: 59, ZCAT.head: 60, ZCAT.ears: 63, ZCAT.eyes_back: 65, ZCAT.eyes: 66, ZCAT.eyebrows: 67, ZCAT.nose_back: 68, ZCAT.mouth_back:69, ZCAT.face_extra: 71, ZCAT.mouth: 72, ZCAT.mustache: 73, ZCAT.eyes_front: 76, ZCAT.nose: 77, ZCAT.accessory_jewelry: 80, ZCAT.accessory_other: 81, ZCAT.beard: 86, ZCAT.mouth_front: 87, ZCAT.accessory_scarves: 89, ZCAT.hair: 90, ZCAT.accessory_hair: 91, ZCAT.accessory_glasses: 92, ZCAT.hair_front: 94, ZCAT.accessory_hair_front: 95, ZCAT.accessory_other_front: 96, ZCAT.accessory_jewelry_front: 97, ZCAT.accessory_scarves_front: 99,

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 parts of other slices, sometimes

• 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

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: it's extremely important you use exactly the color above. At this point #222200 doesn't map to anything (though it may in the future "blend" the two colors together). And #210000 also doesn't map to anything

• NOTE: Index 3 is important, because that's the "base color" for that entire ramp (not index 4). Not all of the slices currently respect this, but they will. eventually