LogoLogo
WebsiteBlogForumsSign up
  • Welcome
  • How Ready Player Me works
  • FAQ
  • 👩‍💻Integration Guides
    • Overview
    • Unity
      • Quickstart
      • Avatar Creator Integration
        • WebView Avatar Creator
          • Avatar Creator for Android & iOS
          • Avatar Creator for WebGL
        • Build your own Avatar Creator
          • Start with the sample
          • Elements
            • Asset Selection Element
            • Color Selection Element
            • Template Selection Element
            • Body Shapes Selection Element
            • Gender Selection Element
            • Avatar List Element
            • Photo Capture Element
            • Signup Element
            • Login Element
            • Logout Element
          • User Management
      • Load 2D Renders
      • Avatar Loader Window
      • Setup Multiplayer
      • Setup for XR (Beta)
        • Setup the Player Avatar
        • Setup Meta Movement SDK
        • Setup Final IK
        • Setup XR Hands
          • RpmHandDriver script
        • Facial Animations
        • VR Avatar Creator
      • Animations
        • Ready Player Me Animation Library
        • Mixamo Animations
      • Optimize
        • Avatar Configuration
        • Avatar Caching
        • Defer Agents
      • Code Samples
        • Loading 3D Avatars
        • Loading 2D Avatars
        • Avatar Creator (WebGL)
        • Avatar Creator (Desktop)
        • Avatar Creator (Mobile)
        • Distance-based LODs
      • Troubleshooting
        • Editor UI Window Issues
        • Avatar loading issues
        • iOS issues
        • WebGL issues
        • Firewall issues
        • Updating the SDK
          • Unity SDK 3.0.0 Migration guide
          • Unity SDK 4.0.0 Migration guide
          • Unity SDK 5.0.0
          • Unity SDK 7.0.0
          • WebView 2.0 Migration
        • Package installation issues
      • Help us improve the Unity SDK
      • FAQ for Unity
      • Early Access Features
    • Unreal Engine
      • Quickstart
        • Import SDK Manually
      • Avatar Creator Integration
        • Build your own Avatar Creator
          • Sample Structure
          • Customization Guide
        • WebView Avatar Creator
      • Load Avatars
      • Animations
        • Ready Player Me Animation Library
        • Loading Mixamo animations
        • Mannequin animation retargeting
        • Blender FBX export to UE
        • Oculus Lipsync integration
      • Optimize
        • Avatar configuration
        • Avatar caching
        • Avatar preloading
      • Code Samples
        • Unreal Engine 5 samples
        • Lyra project integration example
        • VR Avatars
        • Unreal Engine 4
      • Troubleshooting
        • Project compilation issues
        • Missing materials on built applications
        • Avatar loading issues
        • Animation issues
        • Unreal SDK breaking changes
        • Avatar lighting issues
        • Updating from earlier versions
          • Unreal SDK 3.0.0 Migration guide
        • Auto LOD issues
      • Help us improve the Unreal Engine SDK
      • FAQ for Unreal Engine
      • Early Access Features
    • React
      • Quickstart
    • React Native
    • iOS Native
    • Android Native
    • Web Integration
      • Quickstart
      • User Management
        • Guest Accounts
        • Account Linking
      • Avatar Creator integration
      • Optimize
    • API Integration
      • Quickstart
      • Custom Avatar Creator
      • User management
        • Ready Player Me Account
        • Anonymous Accounts
    • UX/UI Guidelines
      • Summary & quick tips
      • UX and UI guidelines and essentials
        • Foundation for good user experience
          • Layout
          • Colors
          • Typography
          • Icons
          • Dark mode and light mode
        • Mobile best practices
          • Layout
        • Making Ready Player Me feel native
          • Seamless Avatar Integration
          • Consistent Branding
          • Responsive Layout
          • Performance Optimization
        • Discoverability of the avatar editor
          • Onboarding tutorial
          • Clear navigation
          • Contextual Placement
  • 🖌️Customizing Guides
    • Studio (Developer Dashboard)
    • Avatar Creator Appearance
      • Avatar URLs
      • Avatar Shortcodes
    • Upload and Manage Custom Assets
      • Asset Manager in Studio
      • Configure in Studio
      • Manage custom assets using the API
      • Unlocking assets through API (Beta)
    • Create Custom Assets
      • Fullbody Outfits
        • Checking Skin Weights
      • Tops, Bottoms, Shoes
        • Editing templates
      • Hairstyle
      • Headwear
      • Facewear
      • Glasses
      • Hero Characters
      • Modeling Guidelines
  • 🔃API Reference
    • REST API
      • Authentication
      • Avatars
        • GET - 3D avatar
        • GET - 2D Render of an Avatar
        • GET - Metadata
        • PUT - Equip an asset
        • PUT - Unequip an asset
      • Assets
        • Asset Entity Properties
        • POST - Create Asset
        • GET - List Assets
        • PATCH - Update Asset
        • POST - Upload Asset Files
        • POST - Add Asset to Application
        • DELETE - Remove Asset from Application
        • PUT - Unlock asset for a user
        • PUT - Lock asset for a user
      • Users
        • POST - Create User
      • Auth
        • GET - Token
      • Changelog
    • Avatars
      • Full-body avatars
      • Full-body XR avatars
      • Half-body avatars
      • Morph targets
        • Apple ARKit
        • Oculus OVR LipSync
    • Avatar Creator
  • 🔉Support
    • Forums
    • Licensing & Privacy
Powered by GitBook
On this page
  • Requirements
  • Customization Steps
  • Up-To-Date Sample
  • Cosmetic Customization Example
  • Functional Customization Example

Was this helpful?

  1. Integration Guides
  2. Unreal Engine
  3. Avatar Creator Integration
  4. Build your own Avatar Creator

Customization Guide

Avatar creator customization guide

PreviousSample StructureNextWebView Avatar Creator

Last updated 1 year ago

Was this helpful?

The same UI of the custom avatar creator is entirely made with blueprints. This is done on purpose so that it would be easier to duplicate and customize it.

Requirements

You are allowed to change the entire UI, the only thing that you are required to have in your custom implementation is the Ready Player Me sign-in button and Ready Player Me account-creation UI. This is a legal requirement from Ready Player Me.

Customization Steps

To make a custom UI for the avatar creator, you need to do the following steps:

  1. Make a folder in your project's content folder and Duplicate the folder into it.

  2. Make sure that you can add the duplicated avatar creator widget to the viewport, and that there are no errors.

  3. Read the to better understand the components of the sample UI.

  4. When making cosmetic changes to the duplicated UI, make sure that the public variables of the UI blueprints are not removed. All the public variables have blueprint logic connected with them.

  5. If you still need to remove the public variables, make sure that you understand the blueprint logic connected with them.

Up-To-Date Sample

While duplicating the sample you will not be able to have up-to-date changes from the sample UI. To have an up-to-date version of the custom avatar creator, the following steps are required:

  1. First, follow the repository to be notified about the new releases.

  2. Update the ReadyPlayerMe plugin in your project to the latest released version.

  3. Open the readme file to check the changes.

  4. Open the changed UI blueprint files that are mentioned in the readme.

  5. Try to apply the UI changes to your duplicated custom version of the avatar creator.

Cosmetic Customization Example

Currently, the sample is designed for the landscape mode. If your application is made for portrait mode, you need to make your custom version of the avatar creator UI. First, duplicate the sample in your project. One by one open all the widgets that don't look good on the portrait mode. Change the layout of the widgets, without removing the public variables. Keep an eye on the RpmAvatarCreator repository, to update your local version of Avatar Creator if a new version is released.

Functional Customization Example

If you'd like to entirely get rid of the navigation panel, because your application already has a navigation panel, these are the steps that you need to do. AvatarCreator Widget uses the navigation panel for button visibility and responding to the clicked buttons. You need to replace the navigation panel reference in Avatar Creator with your navigation panel. In your navigation panel add buttons that you need(save, back, ...). Add a blueprint interface NavigationSwitcher to your navigation panel to have a connection with the AvatarCreator. Finally, fix all the blueprint errors connected with the replaced navigation panel.

👩‍💻
AvatarCreator content
Sample Structure
SDK
CHANGELOG.md