Skip to main content

Avatar Overlays

Avatar overlays are prefabs that you can add to the UserAvatar component to be displayed on top of the Avatar when it is loaded. You can have multiple overlays on a single Avatar.

Creating Overlays​

To create an overlay prefab, right-click anywhere within the Project window and choose Create > Genies SDK> Avatar Overlay Prefab.

The new prefab will contain the following elements:

  • The AvatarOverlay script component.
  • The model GameObject, which is a basic humanoid avatar (for previewing purposes only).
  • The Root GameObject, which represents the hierarchy of the avatar's bone structure.

Avatar Overlay Prefab

Adding to Overlay Prefab​

You can add new GameObjects and components anywhere in the Root GameObject hierarchy. These additions will be automatically instantiated on each avatar that uses the overlay.

Any changes made to the prefab root, the model GameObjects, or the transformation of bone GameObjects will be ignored.

caution

Avoid adding GameObjects with names that match the bones of the avatar within the same parent. For example, you can add a GameObject named "Hips" anywhere except under the "Position" bone object, which already contains it.

Using Overlays​

Once you have created overlay prefabs, you can add or remove them from the UserAvatar component. You can either add the overlays directly in the Inspector or manage them at runtime using script graphs. For more information, please refer to the Loading Avatars documentation.

TypeScript Example​

Here is an example script that uses a function that adds or removes an overlay to the Avatar:

import { MonoBehaviour, GameObject } from "UnityEngine";
import { GeniesSdk } from 'Genies.Components.SDK.Core';
import { AvatarOverlay, UserAvatar } from "Genies.Components.Sdk.External.Avatars";

export default class MyScript extends MonoBehaviour {

    @SerializeField private myOverlay: AvatarOverlay;

    private myUserAvatar: UserAvatar;

    private async Start() {
        //Initialize the SDK
        await GeniesSdk.Initialize();
        //Create User Avatar component and load Avatar
        this.myUserAvatar = await UserAvatar.CreateAndLoadUserAvatar();
        //Equip the overlay
        this.ToggleOverlay(true);
    }
    
    private ToggleOverlay(equip: bool) {
        if(equip) {
            //Adds an overlay to the Avatar
            this.myUserAvatar.AddOverlay(this.myOverlay);
        }else{
            //Removes the overlay
            this.myUserAvatar.RemoveOverlay(this.myOverlay);
        }
    }
}