Build your own Avatar Creator
Add and customize the Ready Player Me Avatar Creator within your Unreal Engine application.
Last updated
Add and customize the Ready Player Me Avatar Creator within your Unreal Engine application.
Last updated
You can add and customize the Ready Player Me Avatar Creator, which is located in the SDK. It is an in-engine implementation of the web avatar creator.
AvatarCreator requires App ID and Subdomain property to be set. Make sure that you set the AppId and Subdomain of your application in the project settings > Game > Ready Player Me. You can find the AppId and Subdomain of your application in the Ready Player Me Studio.
If these properties are not sent you will get a runtime error.
The QuickStart map that is located in the ReadyPlayerMe\Content\QuickStart\Maps folder demonstrates how the Sample Avatar Creator opens at runtime.
AvatarCreator is a widget that can be added to the viewport or another widget. The QuickStart map uses the WBP_RPM_AvatarCreatorWrapper widget that contains AvatarCreator inside of it.
To add the AvatarCreator widget to any of your existing widgets, from the Pallete window search for WBP_RPM_AvatarCreator, and add it to your widget. You can optionally wrap it with a scale box to control the scale of the AvatarCreator.
Subscribe to the Avatar Saved event to get the URL when the avatar is saved. Subscribe to the Avatar Selected event as well to get the URL when the avatar is selected from the list of user avatars. You can load an avatar with this URL afterward.
Additionally, if the close button is enabled, you can subscribe to the Close Button Clicked event to be notified when the close button is clicked. This way you can close the widget and perform other actions.
When spawning the Avatar Creator widget you can configure it with the following parameters:
Select Gender - Allow skipping the gender selection screen.
Allow Close Button - Hide the close button.
Allow Webcam - Enable the selfie selection screen if the webcam is available.
Is Half Body If true, half body avatar will be created
Avatar Id (Experimental) Allows opening the editor directly to edit the specified avatar. Note: this property will only work if the user is logged in.
The sample also provides a function Override Preview Avatar that allows customization for the render environment and actor. It can also be used to simulate a mirror in VR. Duplicate the default render actor, modify it, and use your actor instead. If not set, the default render actor will be spawned.
The AvatarCreator folder inside of the SDK Content represents an avatar creator sample, if you want to have a completely different UI, you can duplicate the sample project and change the UI. In this case, you will not be able to get the latest changes to this sample UI.
If you duplicated the sample and customized the UI in an older version of the plugin, check the change log and manually update your custom UI according to the changes.
The AvatarCreator 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.
CustomizationGuide.md document describes the ways of making a custom UI for the avatar creator.
Fix the webcam support for Android
Fix the webcam support for UE5
Add a sample for VR
Webcam functionality is currently available only on the Windows platform when using Unreal Engine 4.27. However, Unreal Engine 5 experiences issues with Webcam support. To make the webcam work in Unreal Engine 5, a workaround is available, which involves changing the Default RHI property to DirectX 11. However, this change may result in the disabling of certain Unreal Engine 5 features. if webcam support is required for mobile platforms, you will need to either create a platform-specific webcam functionality or add an external plugin.
The sample doesn't provide an option to pick an image file that would be used for generating an avatar according to the image. This is done to keep the sample project simple. Depending on the target platform, the file picker functionality and dependencies will be different.
In case you require file picker functionality, you can either add an external plugin or create a platform-specific file picker. After implementing the platform-side file-picking functionality, convert the selected image to a base64 string and pass it to the Base64Image property of the AvatarProperties in the AvatarCreatorApi. After implementing the file-picking logic, you will need to modify the WBP_RPM_SelfieSuggestion widget and include a button for picking images.
