Avatar characters for VoidQuest: briefing for illustration

VoidQuest is a family app in which children collect coins for everyday tasks. With those coins they dress up a character in the avatar workshop: body colour, eyes, mouth, outfit, plus a hat, a hand-held item and an extra. This briefing describes what we need for one character and how the files must look so the app can take them over without rework. The folder avatar-funke, the character "Funke" (Spark), is the reference example, and the contact sheet avatar-funke-contact-sheet.png shows all of its parts.

What a character is

A character is a fantasy creature: a flame, a drop, a cloud creature, a stone with a face. No humans. Known characters, brands and logos from film, games or advertising only if we hold the usage rights for them; we name that explicitly when commissioning, otherwise the rule is: none, not even as an allusion. A character is one folder, and all of its parts are drawn on the same canvas, as if they were stacked as layers in a single file. The app only stacks the files on top of each other; it moves and scales nothing. A part that sits two pixels too high on its canvas sits two pixels too high in the app.

Canvas and anchor points

The canvas is a square of 1024 x 1024 pixels with a transparent background. The same anchor points apply to every part of a character (pixels, origin top left):

The width of the body and the shape of the head may differ per character, as long as the eyes and the mouth sit on their lines, the body is centred on x = 512 and the feet stand on y = 900. There is room above for hats and to the right of the body for hand-held items. Roughly 30 pixels stay clear on all edges; nothing extends beyond the canvas.

Layers and slots

The app draws the parts in this order from bottom to top: body (body), outfit (outfit), mouth (mouth), eyes (eyes), hand (hand), hat (hat), extra (extra). Each file contains only its own layer: the outfit contains no body outline, the eyes no skin, the hat no hair. Every part must fit with every part of the other slots; a neckerchief is blue no matter whether the body is orange or red, and a high collar stays below the mouth line.

There are two kinds of slots:

• Swappable slots (body, eyes, mouth, outfit) are always filled. The child only swaps them. The body comes in colour variants, each as a complete file with the same shape.
• Accessories (hat, hand, extra) may stay empty. The character must look finished and pretty without a single accessory.

Scope of a complete character

On top of that, for each album we name, one more part that the child only gets with the full album (for Funke the astronaut helmet for the album "Weltraum" (Space) and the monster horns for the album "Monster-Parade").

Free default: The first part of body, eyes, mouth and outfit (01) is the default part that every child has without coins. Accessories have no default part. That is why the character must look complete from the four default parts alone.

Files and names

• One folder per character, named avatar-<character> in lower case without umlauts (avatar-funke).
• A part is a file <slot>-<nn>.svg: the slot from the table above, a hyphen, a two-digit number starting at 01 (body-01.svg, hat-03.svg).
• cover.svg is the cover: the character with its four default parts as one image on the same canvas. Optionally preview.svg, a free pose for promotion.
• SVG is the delivery format, with viewBox="0 0 1024 1024", the same anchors, one layer per file. Areas as flat fills, soft gradients are allowed, no filters, no embedded raster image, no external fonts, and text is not allowed anyway. Why SVG: the file is lossless, can be re-rendered at any size, and a colour variant of the body is just a changed fill. The app itself never loads the source file; our pipeline renders from it the images the app shows.
• PNG (1024 x 1024, transparent, 8 bits per channel) only as an exception for painted textures that cannot be expressed in SVG; the names stay the same (body-01.png).

A part that is in the app once is never changed again under the same name. A new version gets a new number.

Style

• No humans, no lettering, no weapons. Known characters, brands and logos from film, games or advertising only if we hold the usage rights for them; we name that explicitly when commissioning, otherwise the rule is: none, not even as an allusion.
• Legible at 40 pixels: on the kid card the character is that small, so large eyes and few details. At 220 pixels in the workshop it must not look empty.
• Uniform line weight and one light direction for all parts of a character (for Funke light from the top left, a soft darker edge, one white highlight).
• Colours as flat fills with soft shading. No pure black; a dark brown for eyes and mouth. The app's palette lives in the sunrise: amber, ember, sage, sky.
• One part shows exactly one thing. Hat and glasses are two parts; the child combines them.

Delivery

One folder per character with all SVG files and the cover, plus the source file (.ai, .fig or the working SVG with all layers). For the names and prices of the parts either a filled-in manifest.json following the sample in the folder avatar-funke or a simple table with file name, title (short, for children), slot, rarity (common or special) and default (yes or no).

Rights: The usage rights pass to us in full, for the app, the shop and marketing, without any limit in time or territory.

Checklist before handover

• All files 1024 x 1024, transparent, named <slot>-<nn>.svg (PNG only as an exception).
• Body in 3 to 4 colours with identical shape; eyes, mouth, outfit 3 each; hat 2 to 3; hand 2; extra 2; plus the album parts we have named.
• Eyes on y = 400, mouth on y = 520, foot line y = 900, body centred on x = 512.
• The four default parts (body-01, eyes-01, mouth-01, outfit-01) make a finished character on their own; the character looks complete without an accessory.
• Every part fits with every part of the other slots (a contact sheet with all combinations of the first and the last parts is enough as proof).
• No part contains pixels of another slot, no background, no shadow on the canvas; nothing extends beyond the edge, 30 pixels of margin stay clear.
• cover.svg shows the character with the default parts.
• No humans, no lettering, no weapons; third-party characters and brands only with usage rights we have named.
• Source file and table or manifest.json are included; the transfer of rights is settled.

Reference: Funke

avatar-funke is the first character, a flame creature with a lively tip, a soft colour gradient, light from the top left and a dark brown outline, in the same visual language as the monsters of the album "Monster-Parade": 4 body colours, 3 eyes, 3 mouths, 3 outfits, 4 hats (the astronaut helmet only with the album "Weltraum"), 2 hand-held items, 3 extras (the monster horns only with the album "Monster-Parade") and the cover with the character in a pose, all SVG on the canvas described above. The contact sheet avatar-funke-contact-sheet.png shows the cover in the first row and below it one row per slot in layer order, each part on its whole canvas, so the anchor lines can be checked across the parts.