Asset Selection Element

The AssetSelectionElement displays all assets of an asset type and manages the callback for a selection.

Usage

Place the AssetSelectionElementin your Hierarchy and access the AssetSelectionElement script's public methods to load assets and manage their selection.

To load the assets, you need to call the LoadAndCreateButtons method. It requires the OutfitGender, so that it knows which assets to load (there are differences between female and male outfits). You can get the OutfitGender from the AvatarProperties when you first load the Avatar.

public async Task LoadAndCreateButtons(OutfitGender gender);

When an asset button is clicked, the AssetSelectionElement fires a UnityEvent. The IAssetData contains all the information needed for the AvatarManager to update and load the new avatar.

public UnityEvent<IAssetData> OnAssetSelected;

Customizing

The AssetSelectionElement consists of a Scroll View with a nested ButtonContainer (Grid Layout). All asset selection buttons inside the button container are instantiated at runtime.

You can modify the grid layout (padding, spacing etc.) to match your desired UI.

Footwear selection Item, with a customized Grid Layout Group.

For each AssetSelectionElement, you can define a ButtonElement Prefab, a SelectionIcon and the Asset Type.

Customize the Asset Selection Element

Button Element Prefab

You can customize the appearance of an asset button by creating a Prefab Variant of the linked ButtonElement and replace the reference in the hierarchy. In the example below, the background image has been replaced, colors have been adjusted to match the UI theme (blue), and the RawImage, where at runtime the asset-icon will be loaded, contains a temporary loading image.

ButtonElement Prefab Variant

Customized Asset Selection Buttons.

Select Icon Prefab

You can customize the appearance of the selection highlighter for the asset list by changing the SelectIcon Prefab. You can create a Prefab Variant and reference it in the SelectIcon Prefab field in the Inspector. The SelectIcon Prefab gets instantiated at runtime and parented under the selected item.

In this example, the icon is replaced with a different image and matches the style of the background of the button element.

Customized Selected Icon (Rect Transform and Image got adjusted to match the Game UI.)

Asset Type

For each AssetSelectionElement, you have to define the Asset Type it shows.

• You can't mix asset types in one selection element.

• You don't need to include all asset types in your application.

For example, if you only want to give your users control over the hairstyle, you can only inlcude that one asset selection element in your Avatar Creator.

The list of available asset types is as follows.

Head Customization

• HairStyle

• BeardStyle (facial hair)

• EyeShape

• EyebrowStyle

• FaceShape

• NoseShape

• LipShape

Accessories

• FaceMasks (face tattoos)

• Glasses

• Facewear (scarfs, etc.)

• Headwear (helmets, caps, etc.)

Clothing

• Outfit (fullbody outfits)

• Shirt (outfits for half-body avatars, only needed when you use half-body avatars)

• Bottom (pants for modular outfits)

• Top (shirts, sweaters, etc. for modular outfits)

• Footwear (shoes for modular outfits)