Ready Player Me: Android Integration

The Ready Player Me Unity SDK allows us to use the web view on a mobile app to create an avatar and add it to the scene. This avatar can later be used in our application. This blog focuses on how we integrate the web view on an android application.

Importing RPM Avatar SDK to Unity

The Ready Player Me SDK can be imported into Unity in a few simple steps:

• Create a new Unity Project, you can either use just standard 3D or 3D core with URP. (I am using standard 3D)

  Note: Make sure you are using Unity version 2019LTS or above

• Open the Ready Player Me documentation, then click on Unity Avatar SDK Download. This will open a new web page.

• Under the Latest release section, click on Download the latest version of the Unity SDK. This will open a Google Drive page.

• Right-click on Ready Player Me_v1.7.0.unitypackage → Then, click on Download → Save it at a path of your choice.

  

• There are many ways by which you can import the SDK into Unity, you can either drag and drop it into the Project panel or you can import the package from the Unity Editor toolbar via Assets → Import Package → Custom Package → Then from the file explorer select the ReadyPlayerMe Unity package or Right-click in the Project Panel and choose Import Custom Package.

• A window will pop up. ⚠️ Make sure you uncheck Newtonsoft Json before hitting Import as that package would already be present in your project. It will lead to duplication and you will be shown several error messages.

  

Setting Up Unity for Android Development.

To make sure the build runs correctly on our Android device, we need to make sure the Unity’s Build and Player Setting are correctly configured. For that,

• Click on File → Build Settings, this will open a Build settings window. Select the option called Android and then click on Switch Platform.

  

Select Player Settings and make the following changes:

• Change the default company name to your company name.
• Select Other Settings and
  • Disable Auto Graphics API. If already disabled then move to the next step.

    

  • Remove Vulcan from Graphics API.
  • Change Minimum API level to Android 8.0 and above.

    

  • Uncheck Multithreaded Rendering

    

  • Change Scripting Backend to IL2CPP
  • Change API Compatibility Level to .NET 4.x and
  • Check the box for ARM64 under Target Architecture.

    

Creating and Adding Avatar into the Scene

Adding the web view component is really simple but after that, we’ll have to write a simple script to add the created avatar to our scene.

• In the Hierarchy window, right-click and select UI → WebView Canvas. This will create a web view canvas with a WebView component and other canvases to display the view.

  

• In the Hierarchy window, select the MainCamera → adjust its transform position to (0, 1, 3) → adjust its rotation to (0, 180, 0). This makes sure the camera focuses on the character when it spawns.

  

• In the Hierarchy window, right-click and create an empty GameObject. Name it as AvatarImporter.

• Select the GameObject ImportAvatar and add a new script to it. Name it as AvatarImporter.

• Open the script and copy the following code.

  using UnityEngine;
  using Wolf3D.ReadyPlayerMe.AvatarSDK;
  
  public class AvatarImporter : MonoBehaviour
  {
      [SerializeField] private WebView webView;
  
      private GameObject importedAvatar;
  
      private void Start()
      {
          webView.CreateWebView();
          webView.OnAvatarCreated = ImportAvatar; // subscribing to action
      }
  
      private void ImportAvatar(string url)
      {
          AvatarLoader avatarLoader = new AvatarLoader();
          avatarLoader.LoadAvatar(url, StoreAvatar);
      }
  
      private void StoreAvatar(GameObject avatar)
      {
          importedAvatar = avatar;
      }
  }
  

  The code breakdown

  Declarations

  using UnityEngine;
  using Wolf3D.ReadyPlayerMe.AvatarSDK;
  
  public class AvatarImporter : MonoBehaviour
  {
      [SerializeField] private WebView webView;
  
      private GameObject importedAvatar;
  

  We need to first declare the library Wolf3D.ReadyPlayerMe.AvatarSDK. Using that library we can make use of the SDK’s API methods to load the avatar.

  Variable Name	Type	Use
  webView	WebView	To make use of events and callbacks from this component.
  importedAvatar	GameObject	To store the created avatar.

  Initialization

      private void Start()
      {
          webView.CreateWebView();
          webView.OnAvatarCreated = ImportAvatar;
      }
  

  • As the name suggests, the CreateWebView method creates a web view when we open the application and this particular script is enabled.
  • When the avatar is created, the event OnAvatarCreated of the WebView component gets called. The callback is then passed to the method ImportAvatar.

  Methods

       private void ImportAvatar(string url)
      {
          AvatarLoader avatarLoader = new AvatarLoader();
          avatarLoader.LoadAvatar(url,StoreAvatar);
      }
  
      private void StoreAvatar(GameObject avatar)
      {
          importedAvatar = avatar;
      }
  

  • The ImportAvatar method gets the URL from the callback event of OnAvatarCreated. This URL is then used to load the avatar into the application using the LoadAvatar API method of AvatarLoader.
  • The loaded avatar then can be stored in a GameObject variable using the callback method StoreAvatar.
  • The StoreAvatar method, assigned the imported avatar to the local variable which can be used later for reference.

Testing

To test if the web view works and if the avatar gets loaded into the scene correctly, we’ll have to build that APK and deploy it to the phone.

Note: The WebView feature is only supported on Android and iOS builds. It will not work inside the Unity editor or on Desktop builds.

So to build the app,

• Connect your phone to your machine. Make sure you have enabled Developer Options and USB Debugging.
• Go to File → Build Settings → click on Add Open Scenes.
• Click on Build And Run → add a file name → click on Save.
• You’ll get a popup informing us that we are using the demo subdomain. Click on Continue with ‘demo’ subdomain and wait for it to get built, delayed and run on your mobile.

  

Once that's done, you can test the app on your device.

Note: Make sure you have a good internet connection or else it would take a longer time to load.

Conclusion

Now that you know how to get your avatar on your android app, you can do a lot more with it. You can use it in your game, create your own 3D emojis, control the AR object with a joystick and many other experiences.

_____________________

Thank you

Thanks for reading this blog post. 🧡 If you are interested in creating your own AR and VR apps, you can learn more about it here on immersive insiders. Also, if you have any questions, don't hesitate to reach out! We're always happy to help.