Libmii/Rendering Miis

This page is for describing how to use libmii to draw your Miis. The goal will be to eventually have instructions and directions for use with each of the popular graphics library and a raw example not requiring a library.

I'll also post the standard basic arrangement of each sprite so that users can easily create the commands for the graphics library of choice.

Any questions, comments, concerns, please email me (mdbrim) and let me know what i can do to help you out, fix something, make it better, etc.

NOTE: The below anchor points are based on the way GRRLIB handles scaling and rotation using anchor points... until further testing is done with your library, things may be different.

Body Parts

The following discusses each of the body parts and how to arrange each sprite as far as location, size, and rotation and where the anchor fix for each sprite should be in order to scale and rotate around the correct coordinates. The sprite files can be found (insert sprite link here)

Face Shape

• Image File(s): mii_heads.png (contains the 8 different face shapes)
  • Image Size: 480x240
  • Tile Size: 8 tiles of 120x120
  • Tile Anchor Point: 0,0 (no special anchor point required)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.faceShape	0 - 7	values correspond with order of tiles
mii.skinColor	0 - 5	see COLORS section below to get translation

• Notes:

Hair

• Image File(s): mii_hairs1.png, mii_hairs2.png (contains the parts for the 72 different hair styles)
  • Image Size: 2 files of 960x840
  • Tile Size: 56 tiles of 120x120
  • Tile Anchor Point: 60,0 (allows for easy horizontal flip for reverse part)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.hairType	0 - 71	values DO NOT align with order of tiles (see note below)
mii.hairColor	0 - 7	see COLORS section below to get translation
mii.hairPart	0 or 1	0 is normal part, 1 is reversed

• Notes: two arrays have been created called hairbg[72] and hairfg[72]. See the ARRAYS section below for description of how these work.

Eye Brows

• Image File(s): mii_eyebrows.png (contains the parts for the 24 different eyebrows)
  • Image Size: 324x324
  • Tile Size: 48 tiles of 36x54 (a tile for each eyebrow left and right)
  • Tile Anchor Point: 0,54 (for right eyebrow) 36,54 (for left eyebrow)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.eyebrowType	0 - 23	values DO NOT align with order of tiles (see note below)
mii.eyebrowRotation	0 - 11	each rotation value equates to 11.25 degrees
mii.eyebrowColor	0 - 7	see COLORS section below to get translation
mii.eyebrowSize	0 - 8	translates from 30% to 110% scale in increments of 10%
mii.eyebrowVertPos	3 - 18	each step is worth 2.8 pixels
mii.eyebrowHorizSpacing	0 - 12	each step is worth 2.6 pixels

• Notes: an array has been created called eyebrows[24]. See the ARRAYS section below for description of how this works.

Eyes

• Image File(s): mii_eyes1.png, mii_eyes2.png, mii_eyes3.png (contains the parts for the 48 different eye types)
  • Image Size: 324x864
  • Tile Size: 96 tiles of 54x54 (a tile for each eye left and right)
  • Tile Anchor Point: 18,36 (for right eyebrow) 36,36 (for left eyebrow)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.eyeType	0 - 47	values DO NOT align with order of tiles (see note below)
mii.eyeRotation	0 - 7	each rotation value equates to 11.25 degrees
mii.eyeColor	0 - 5	see COLORS section below to get translation
mii.eyeSize	0 - 7	translates from 30% to 100% scale in increments of 10%
mii.eyeVertPos	0 - 18	each step is worth 2.8 pixels
mii.eyeHorizSpacing	0 - 12	each step is worth 2.6 pixels

• Notes: an array has been created called eyes[48]. See the ARRAYS section below for description of how this works.

Noses

• Image File(s): mii_noses.png (contains the 12 different nose types)
  • Image Size: 300x100
  • Tile Size: 12 tiles of 50x50
  • Tile Anchor Point: 25,30 (for scaling)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.noseType	0 - 11	values DO NOT align with order of tiles (see note below)
mii.noseSize	0 - 8	translates from 20% to 100% scale in increments of 10%
mii.noseVertPos	0 - 18	each step is worth 2.6 pixels

• Notes: an array has been created called noses[12]. See the ARRAYS section below for description of how this works.

Mouth

• Image File(s): mii_lips.png (contains the 24 different mouth types)
  • Image Size: 300x300
  • Tile Size: 24 tiles of 60x60
  • Tile Anchor Point: 30,30 (for scaling)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.lipType	0 - 23	values DO NOT align with order of tiles (see note below)
mii.lipColor	0 - 2	see COLORS section below to get translation
mii.lipSize	0 - 8	translates from 20% to 100% scale in increments of 10%
mii.lipVertPos	0 - 18	each step is worth 2.6 pixels

• Notes: an array has been created called lips[24]. See the ARRAYS section below for description of how this works.

Beard

• Image File(s): mii_beards.png (contains the 3 different beard types)
  • Image Size: 960x420
  • Tile Size: 24 tiles of 120x140 (each beard type on each face shape)
  • Tile Anchor Point: 0,0 (no special anchor point required)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.beardType	0 - 3	0 for no beard, 1-3 corresponds to beard tiles.
mii.facialHairColor	0 - 7	see COLORS section below to get translation

• Notes: beard tiles are done for each face shape to align beard with bottom of face.

Mustache

• Image File(s): mii_mustache.png (contains the 3 different mustache styles)
  • Image Size: 180x60
  • Tile Size: 3 tiles of 60x60
  • Tile Anchor Point: 30,10 (for scaling)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.mustacheType	0 - 3	0 for no mustache, 1-3 corresponds to mustache tiles.
mii.facialHairColor	0 - 7	see COLORS section below to get translation
mii.mustacheSize	0 - 8	translates from 20% to 100% scale in increments of 10%
mii.mustacheVertPos	0 - 16	each step is worth 2.9 pixels

• Notes:

Glasses

• Image File(s): mii_glasses.png (contains the 8 different glasses styles)
  • Image Size: 720x216
  • Tile Size: 11 tiles of 180x72 (8 glasses frames + 3 shaded lenses)
  • Tile Anchor Point: 90,32 (for scaling)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.glassesType	0 - 8	0 for no glasses, 1-8 corresponds to glasses tiles.
mii.glassesColor	0 - 5	see COLORS section below to get translation
mii.glassesSize	0 - 7	translates from 10% to 80% scale in increments of 10%
mii.glassesVertPos	0 - 20	each step is worth 2.6 pixels

• Notes: glasses are drawn frames only unless sunglasses are chosen. Then it is frames and shaded lenses.

Facial Features

• Image File(s): mii_features.png (contains the 11 different facial features)
  • Image Size: 960x720
  • Tile Size: 48 tiles of 120x120 (to build features for each face type)
  • Tile Anchor Point: 0,0 (no special anchor point required)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.facialFeature	0 - 11	0 for no feature, 1-11 corresponds to feature tiles (see note).
mii.skinColor	0 - 5	used only for makeup coloring. see COLORS section below to get translation

• Notes: some facial features change based on face shape and some are universal regardless of face shape. See below in the ARRAYS section for description on building features to match face shape.

Mole

• Image File(s): mii_mole.png (contains the mole graphic)
  • Image Size: 12x12
  • Tile Size: N/A (no tiles for the mole, just the one image)
  • Image Anchor Point: 6,6 (for scaling)
• Variable(s) from libmii:

Variable	Possible Values	Notes
mii.mole	0 - 1	0 for no mole, 1 for a mole.
mii.moleSize	0 - 8	translates from 20% to 100% scale in increments of 10%
mii.moleVertPos	0 - 30	each step is worth 2.8 pixels
mii.moleHorizPos	0 - 16	each step is worth 4 pixels

• Notes:

Layers

The images need to drawn in the following order to ensure the layering is correct. Images drawn first will be on the bottom with the last image drawn being on the top.

1. Hair (background (tiles 17 - 55 of mii_hairs2.png))
2. Head
3. Facial Feature
4. Beard
5. Mole
6. Left and Right Eyes
7. Left and Right Eyebrows
8. Mouth
9. Mustache
10. Nose
11. Hair (foreground (mii_hairs1.png and tiles 1 - 16 of mii_hairs2.png))
12. Glasses

Colors

The following elements have colors involved. The colors that I have defaulted to below could probably use some tweaking. If you find better colors through your testing please let me know! All colors are given in Hex values and correspond to the value returned by their respective variables.

Skin Colors

• 0 = ECCFBD
• 1 = F7BC7D
• 2 = D78A48
• 3 = F5B189
• 4 = 995122
• 5 = 563010

Hair Colors

• 0 = 111111
• 1 = 332222
• 2 = 441111
• 3 = BB6644
• 4 = 8888AA
• 5 = 443322
• 6 = 996644
• 7 = DDBB99

Eyebrow Colors

• SAME AS HAIR COLORS

Eye Colors

• 0 = 000000
• 1 = 778887
• 2 = 7E6355
• 3 = 888940
• 4 = 6A84D0
• 5 = 409B5A

Lip Colors

• 0 = C76C46
• 1 = E44E3A
• 2 = D88789

Glasses Colors

• 0 = 626D6C
• 1 = 85703A
• 2 = AB4E37
• 3 = 426996
• 4 = B97F27
• 5 = BDBFB9

Facial Hair Colors

• SAME AS HAIR COLORS

Arrays

Some variables do not correspond with the same order tiles in the images. The following arrays are defined to align the variables from libmii with the tile order of the sprites in the img files. The image files contain the tiles in the same order you see them on the Mii build screen.

Hair

Hair is probably the most complicated one. Due to the large number of hair styles and file size limitations (1024 x 1024), the tiles had to be put onto two separate images (mii_hairs1.png and mii_hairs2.png). Hair also contains multiple layers with longer hair style having parts that I call background hair that goes behind the head (pony tails, long hair, etc) and then foreground hair which goes on top and in front of the head (most hair styles including bangs etc). ALL of the tiles in mii_hairs1.png are foreground hair parts as are the first 16 tiles of mii_hairs2.png. The rest of mii_hairs2.png is background hair.

• The first array is for foreground hair and is called hairfg[72]. It has 72 elements and is defined as follows:
  • int hairfg[72] = {59,42,65,49,40,44,52,47,45,63,51,54,36,37,48,70,61,56,64,43,53,58,50,27,69,41,39,46,66,71,33,11,12,0,35,57,30,14,25,4,1,31,26,24,3,6,62,13,15,7,19,2,17,67,29,20,9,34,18,8,22,60,23,55,21,32,16,28,10,38,5,68};

• The second array is for background hair and is called hairbg[72]. It has 72 elements and is defined as follows:
  • int hairbg[72]={56,56,56,56,56,56,56,56,56,56,56,56,16,56,56,56,56,56,17,18,56,19,20,56,56,56,21,56,56,56,56,56,56,56,56,56,22,23,56,56,24,25,56,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,56,56,48,49,50,51,52,53,56};

• The purpose of hairfg is to translate the mii.hairType variable into the correct foreground hair sprite. For example: if mii.hairType returns 32 then we would use hairfg[mii.hairType] to get the proper tile which would be tile 12 (hairfg[32]=12). This would draw the correct fg hair tile from the mii.hairType variable.

• The purpose of hairbg is to then take whatever foreground hair was drawn and add any corresponding background hair. For example we would use hairbg[hairfg[mii.hairType]] to get the correct background hair drawn. So, using our above example mii.hairType 32 corresponds foreground hair 12 which has a corresponding background hair of 16 (hairbg[hairfg[32]]=16).

• SO the value mii.hairType returns a foreground hair tile of 12 and a background hair tile of 16 thus allowing us to draw the proper hair style.

• You'll notice that hairbg array has the number 56 repeat alot. Tile 56 is a blank tile so all the foreground hairs that correspond to that slot have no background hair therefore none is drawn.

• Because the foreground hair parts are split into two files, we use an if statement to make sure we draw from the correct img file. ** If hairfg[mii.hairType] is < 56 we draw from the first image file using the hairfg[mii.hairType] tile number.
  • If hairfg[mii.hairType] is => 56 we draw from the second image file using the hairfg[mii.hairType]-56 tile number.

• Background hair is always pulled from the second image file.

Putting it all together

going to bed, will pick up here tomorrow!