Sample Structure

Avatar creator sample structure

Avatar Creator Api

The Avatar Creator sample uses the AvatarCreatorApi C++ class for communicating with the Ready Player Me Backend. The plugin Content can be completely rewritten to suit your project needs while using the AvatarCreatorApi for communication with the Backend.

Avatar Creator State Machine

The avatar creator is the topmost widget containing all the component sub-widgets: navigation panel, avatar editor, editor setup widgets, and loading screens and popups. It uses a simple state machine logic to change the visibility of the sub-widgets at runtime. It also creates an instance of the AvatarCreatorApi class and provides it to the child widgets. AvatarCreatorApi class handles all the server requests.


For the child widgets to be able to communicate with the avatar creator, they use the NavigationSwitcher interface. Avatar creator implements the NavigationSwitcher interface allowing the child widgets to send events.

Preview Actor

The preview actor is spawned in the world when the avatar creator widget is opened. It contains avatar mesh, lights, and a camera for rendering the avatar at runtime and displaying it in the avatar editor afterward. There is also a possibility to override the preview avatar by injecting a custom one. To do so, call the Override Preview Avatar function of the avatar creator.


The popups widgets are located in the Popups folder, they are needed to give the user information about the current status of the avatar creator.

  1. Loading Screen - Blocker screen that opens while the resources for the avatar editor are being downloaded.

  2. Warning View - Opens when a server request fails.

  3. Preview Loading View - Toggles a popup while the avatar is being updated, after the outfit change.

  4. Save View - Opens while the avatar is being saved on the server.

  5. Signup View - Ready Player Me signup suggestion popup that opens after the avatar gets saved.

Avatar Editor

The editor widget contains several sub-widgets and handles the logic and UI of the avatar editing process.

Avatar Renderer

AvatarRenderer Widget is a helper widget that creates and manages the render actor.


The editor contains scroll boxes that contain buttons for avatar customization.

  1. Outfit Category ScrollBox - Contains buttons for different asset types - face, hairstyle, outfit, glasses, face mask, face wear, and headwear. Clicking the buttons will open the respective asset-type panel.

  2. Outfit Assets ScrollBox - Contains asset buttons for the selected outfit asset type.

  3. Face Category ScrollBox - Contains asset type panels for face - face shape, eyes, eyebrows, nose, mouth, beard, etc.

  4. Face Assets Scrollbox - Contains asset buttons for the selected face asset type.

Powered By Badge

Editor Buttons

Editor buttons are included in custom widgets. While the category buttons are hardcoded inside of the editor, the asset and color buttons are added at runtime.

  1. Category Button - For selecting an asset type. The thumbnail image is present on the path Content/Icons.

  2. Asset Button - For selecting an asset with a thumbnail and a selection circle. The thumbnail image is fetched from the server.

  3. Color Button - For selecting a color with a thumbnail and a selection circle.

Last updated