> For the complete documentation index, see [llms.txt](https://infinitypbr.gitbook.io/magic-pig-games/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://infinitypbr.gitbook.io/magic-pig-games/other/portrait-avatars/portrait-ui.md).

# Portrait UI

The **UI Portrait** object, in the prefabs folder, has this component attached to it. It is also used in the demo scene. This is the UI prefab which displays the portraits in your scene.

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

{% hint style="info" %}
In your scene, these objects will be instantiated as children of the **UI Portraits Parent**, which will live in a `Canvas`. It will generally be easier to edit the **UI Portrait** prefab when it is in the context of the scene.

To do this, once you have your UI Portraits Parent in your scene, bring a UI Portrait prefab into the scene and select it. Click the "right arrow" button to the right of the object in the Hierarchy.

This will allow you to edit the prefab in context, and it should appear as it will in the scene itself.
{% endhint %}

<figure><img src="/files/UHAjG4vWKlf147gnqAux" alt=""><figcaption><p>The prefab comes with a simple health bar. Feel free to remove this, and customize the entire object.</p></figcaption></figure>

The **`RawImage`** and **`Image`**, shown here in green, should be in the **Required** fields on the PortraitUI component. The **Border** and **Background**, highlighted in pink, are in the UI Images array, which means the `PortraitAvatars` class can set their color values.

## Options

**UI Transition Time** and **Image Transition Time** control how long it takes to transition from an existing color to a new color, when a new color is set.

## Customization

Don't forget you can create a class which derives from `PortraitUI` and add additional functionality to this object.