Portrait UI

v1.0

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.

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.

The prefab comes with a simple health bar. Feel free to remove this, and customize the entire object.

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.