# 2.5-D Custom Avatar Requirements

## Overview:

To customize an avatar in the hallway ecosystem we simply need 2D image textures from your team. No 3D work necessary!

### Example:

<table data-header-hidden><thead><tr><th width="197.66668701171875" align="center"></th><th width="40" align="center"></th><th width="80.66668701171875" align="center"></th><th width="43.333251953125" align="center"></th><th width="215.6666259765625" align="center" valign="top"></th><th width="40" align="center"></th><th align="center"></th></tr></thead><tbody><tr><td align="center"><img src="/files/s4p1YEGvMHCuIvHSLagL" alt=""></td><td align="center"><strong>+</strong></td><td align="center"><img src="/files/c71157b31e70eb6a41b412f71c6eec5731102948" alt=""><img src="/files/8c266e75229d5ad64a416f1274885d23c25791b9" alt=""> <img src="/files/b276b9353d95108d022e56f689a3a72a98523edd" alt=""></td><td align="center"><strong>+</strong></td><td align="center" valign="top"><img src="/files/7e2febb64cb926149019b227c0b78787be018e5d" alt=""></td><td align="center"><strong>=</strong></td><td align="center"><img src="/files/MbkGpmUHh6MoLHsWG8Zb" alt=""></td></tr></tbody></table>

### The Concept is Simple:

{% stepper %}
{% step %}

#### Create 2D Texture Layers

Create 2D texture layers for your character body parts and facial features that can be controlled independently (separate the face, body, limbs, clothing into layers that can be moved independently with physics etc). *Specific examples in below sections.*
{% endstep %}

{% step %}

#### Create Emotes For the Eyes and Mouth

Create template eye and mouth textures to fill a grid like the ones below. *More details in below sections.*

<table><thead><tr><th valign="top"></th><th valign="bottom"></th></tr></thead><tbody><tr><td valign="top"><img src="/files/wIPT9lluLtu9aXe3HqZN" alt="" data-size="original"></td><td valign="bottom"><img src="/files/HffxibE5S7EomOYdFYDk" alt="" data-size="original"></td></tr></tbody></table>
{% endstep %}

{% step %}

#### Share with the Hallway Team

Share the layers and facial expressions with Hallway and we’ll put them into grids and hook them up to your character.
{% endstep %}
{% endstepper %}

### To get started:

Begin by adding a shortcut to the following google drive directory to your own google drive or by downloading its contents to your computer: [Generate Avatar Face Templates](https://drive.google.com/drive/folders/1WMgZCfrcgjc_0pxyXKkdfSfs5TXR4T0A?usp=sharing)

Within this directory you’ll find 3 example character templates to serve as inspiration and guidance for your own creation.

## In Depth [Example 1](https://drive.google.com/open?id=1x48oSFtpRz6TRDGdyzrVoi0upS8ROWZC\&usp=drive_fs):

Please navigate to the first example folder in the directory shared above.<br>

<figure><img src="/files/cb86c0de4b3ccf9681867bcd451e6a73be258523" alt=""><figcaption></figcaption></figure>

Inside you’ll notice an example character image, a GIF of the character in motion, and a photoshop file with layers for the character.

<figure><img src="/files/5GZBXvnS1YOLKu66h5ws" alt="" width="563"><figcaption></figcaption></figure>

In the textures folder you’ll find all the layers rendered out and the facial feature grids that are required by our avatar standard:<br>

<figure><img src="/files/a6ec42711d0be2205b6855fdc3abc6c76901d380" alt=""><figcaption></figcaption></figure>

* **TASK 1:** make similar body layers for your character
  * NOTICE the head has NO FACIAL FEATURES as those are their own layer!
  * NOTICE the clothes are their own layer
  * NOTICE the mouth surround (in this case a beak) is its own layer
  * NOTICE the scarf has a front and back layer (one to be shown in front of the body and another to be shown behind the body

Additionally there are folders labelled [eye source textures](https://drive.google.com/open?id=1gVYQk3ssb6ccKAXSFk4M-0tDHTUFMKU3\&usp=drive_fs)and[mouth source textures](https://drive.google.com/open?id=1td5ZiJ8llfcIk9964uTZc-sV9Buh6AFl\&usp=drive_fs), inside which you’ll find single images for each eye and mouth expression required by our standard.<br>

<figure><img src="/files/f95077f9267bfcc3c48e510497e136fc75200abc" alt=""><figcaption></figcaption></figure>

* Notice how the number of required expressions for the mouth is only 7 as opposed to the 32 slot grid image shown above. This is because we used to utilize a more complex and nuanced mouth setup, but we found using these 7 shapes are just as effective.
* **TASK 2:** Make these 7 mouth shapes for your character.
  * IMPORTANT: Your mouth and eye images should have roughly the same size and placement as above
  * You’ll find more front facing mouth and eye examples in [Example 2](https://drive.google.com/open?id=1CCdM1E5x9sSocxSsXpwcqab7tx-1XDcc\&usp=drive_fs) and [Example 3](https://drive.google.com/open?id=1yf0ILikcLnatJYZWxglLLz46lx46ccWh\&usp=drive_fs) USE THESE IF YOUR CHARACTER FACES THE CAMERA MORE THAN THE EMU BIRD EXAMPLE ABOVE!

You’ll need to create more eye expressions than mouth expressions, as we need sufficient look directions, a blink shape, and emotes like shock, heart, star, swirl, cry, etc.<br>

<figure><img src="/files/269df06bd16a345dfadd609032780c5ea97e45d6" alt=""><figcaption></figcaption></figure>

* NOTE: You’re allowed to use the same exact image more than once. So you could use the same image for 3, 21, 22, 24, and another shared image for 2, 13, 14, 15, 16 (as an example). To reduce effort for character setup!
* NOTE: alignment of the eyes in your artwork should roughly match the placement in these images! Use a tool like photoshop to ensure your layers align with these.
* **TASK 3:** Create up to 30 eye images matching the placement and scaling of the reference eyes above!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hallway.gitbook.io/embed/characters-for-embed/2.5-d-custom-avatar-requirements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
