Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDK-562] Merge avatar creator into core #135

Merged
merged 12 commits into from
Oct 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
47 changes: 47 additions & 0 deletions Documentation~/CustomizationGuide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Customization Guide

This guide will help you to customize the Ready Player Me avatar creator to fit your needs. The UI was designed in a way that separates the logic from the UI elements

## 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.

![image](https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/c80e9bfa-a635-4ed4-878a-be9506d7d7c1)

![image](https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/c2d8135b-f8e5-4c9d-9ea6-ca00f4af3514)


## Creating a Custom UI From Scratch

All required APIs are provided in the package. They can be used to create a new custom UI. The package also contains a sample UI that can be used as a reference. The following are the most important APIs that you will required.
- AuthManager - Requests for handling authentication.
- AvatarManager - Requests for creating, updating and deleting avatars.
- PartnerAssetManager - Requests for loading partner assets.

## Customizing the Sample

The sample comes with a default UI similar to the Web avatar creator. The UI is built using uGUI. All major UI components such as screen, asset buttons, asset type panels are prefabs, and can be edited easily. For detailed description of structure of the sample please see the [Sample Structure.](SampleStructure.md)

### Changing background color
- Select different screens under UI > AvatarCreatorCanvas > Creator > Screens and set color in image component or change the sprite.
- Select camera and change the background color.
- Select header under UI > AvatarCreatorCanvas > Creator and change the color.
- Select LoadingManager and change color for either type of loading screen.

Following demonstrate on how to change the background color of different screens.

https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/ae412932-1bd9-4d00-b6b5-6525adecf9c7

### Adapting UI according to portrait mode
- Select a panel prefab from the "Prefabs/Panels" folder that you want to modify.
- Adjust the size and position of the panel to suit your desired location.
- To switch from a vertical to a horizontal layout, make the following changes:
- Locate the Grid Layout Group component and adjust the constraint from "Fixed Column Count" to "Fixed Row Count".
- Find the Scroll Rect component of the panel and select the "Horizontal" option while deselecting the "Vertical" option.

Following demonstrate on how to change avatar creation selection panels according to portrait mode. This is done in runtime but can be replicated by changing the prefabs as mentioned above.

https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/f706e33d-8fb8-4226-8d3c-3e5b6bb17026




3 changes: 3 additions & 0 deletions Documentation~/CustomizationGuide.md.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions Documentation~/QuickStart.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
## Quick Start

## Importing Package

**1.** To add the new Ready Player Me Unity Avatar Creator to your project you can use the Unity Package Manager to import the package directly from the Git URL.

**2.** With your Unity Project open open up the Package Manager window by going to `Window > Package Manager`.

![open-package-manager](https://user-images.githubusercontent.com/7085672/206432665-da233187-06ad-40b5-a25e-660c97d6726f.png)

**3.** In the **Package Manager** window click on the + icon in the top left corner and select Add Package From Git URL.

![add-package-from-ur;](https://user-images.githubusercontent.com/7085672/206432698-8ecde741-4259-486f-9c77-d63fbc9a6cde.png)

**4.** Paste in this url

`https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator.git`

![paste-git-url](https://user-images.githubusercontent.com/7085672/206432731-f9e0d161-7843-4d6e-8851-47b1f3bfb3bc.png)

**5.** Click add and wait for the import process to finish.
![image](https://user-images.githubusercontent.com/1121080/216085330-d09e1578-5192-4900-8dd5-27264acec484.png)

**6.** Next import samples, you will have samples folder with AvatarCreatorExample scene.

![image](https://user-images.githubusercontent.com/1121080/216086222-a5165359-e660-45fa-895a-b7fed7dd70d6.png)

**7.** Set subdomain & AppID in CoreSettings scriptable object. **Important! AppID must belong to the subdomain you set otherwise authorization will fail.**

**8.** Run and test.
![image](https://user-images.githubusercontent.com/1121080/216086593-df4a9e24-25c1-42d6-8b7f-4946352fdebb.png)
67 changes: 67 additions & 0 deletions Documentation~/SampleStructure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# Sample Structure

## Avatar Creator State Machine
The avatar creator is based on a state machine pattern. Its used for switching between different screens(states).<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/7507b428-967a-4ead-9a14-ce5219d2d5f2" width="400" height="350">
1. **State To Skip** - Allows skipping of states.
2. **States** - Specify selection screen or states.
3. **Starting State** - Set the starting state. If user is logged in, starting state defaults to Avatar Selection screen.
4. **Default Body Type** - Set default body type if body type selection state is skipped.
5. **Default Gender** - Set default body type if gender selection state is skipped.

## Selection Screens(States)
1. **Login With Email Selection** - Login by sending a one time code to user's email address.
2. **Avatar Selection** - Select/edit the previously created avatar from the list of avatars.
3. **Gender Selection** - Select gender of the avatar.
4. **BodyType Selection** - Select body type of the avatar - full-body or half-body.
5. **Default Avatar Selection** - Select the default avatar from the list of avatars.
6. **Selfie Selection** - Landing page for taking a selfie and use it to generate the avatar.
7. **Camera Photo Selection** - Opens webcam and allows to take a photo.
8. **Avatar Creator Selection** - Landing page for avatar customization.

## Header
1. **Back Button** - To go back to the previous screen.
2. **Next Button** - To save the final avatar.

## Loading Manager
Show different type of loading
1. **FullScreen Loading** - Toggle a full screen loading.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/0177a63a-8bee-4890-b605-0834642bd0c9" width="600" height="350">
2. **Popup Loading** - Toggle a popup with or without loading.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/6085868a-ed7a-4e83-a888-cde99edcd7ed" width="600" height="320">


## Account Creation Popup
Popup for when next button is pressed after avatar is finalized in Avatar Creator Selection.
If user is signed in this popup will not be shown.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/07b5b2d5-fd7c-4020-ab6e-448efabbdaba" width="600" height="350">


## Avatar Creator Selection Components

### Panels

1. **AssetTypes Panel** - Contains buttons for different asset-type - face, hairstyle, outfit, glasses, face mask, face wear and head wear.
On click the buttons will open the respective asset-type panel.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/f9a77994-5069-427f-b2d9-64ae4d6edaf9" width="100" height="300">

2. **AssetType Panel Prefab** - Contains asset buttons for the selected asset type.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/ae7713b3-2958-4d54-a433-570b5505372c" width="100" height="300">

3. **FaceType Panel Prefab** - Contains asset type panels for face - face shape, eyes, eyebrows, nose, mouth, beard, etc.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/ef2fe745-02aa-4647-8274-dd84c83b076b" width="100" height="300">

4. **Left AssetType Panel Prefab** - Eye color, Skin color, Hair color, etc.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/56baf347-8053-4ce0-852a-cd2aeaf1d5b6" width="100" height="250">
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/55a360d2-15e2-43c1-b92a-c8dfb2becf0e" width="100" height="250">

### Buttons

1. **AssetType Button Prefab** - For selecting an asset type. The thumbnail image are present on path `Samples/Icons/AssetType`.<br>
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/87d1cc45-c5c5-4044-a26f-0b9ee73c0596" width="400" height="250">

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

3. **Clear asset selection button** - For clearing the selected asset.
<img src="https://github.com/readyplayerme/rpm-unity-sdk-avatar-creator/assets/1121080/24abe1b2-60f5-482c-9d1a-60ca9c8e622c" width="50" height="50">

5 changes: 5 additions & 0 deletions Editor/Analytics/AmplitudeEditorLogger.cs
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,11 @@ public void LogOpenOptimizationDocumentation()
LogEvent(Constants.EventName.OPEN_OPTIMIZATION_DOCUMENTATION);
}

public void LogSampleCreatorImported(string packageVersion)
{
LogEvent(Constants.EventName.SAMPLE_CREATOR_IMPORTED);
}

private void SetUserProperties()
{
var userProperties = new Dictionary<string, object>
Expand Down
1 change: 1 addition & 0 deletions Editor/Analytics/Constants.cs
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ public static class EventName
public const string OPEN_ANIMATION_DOCUMENTATION = "open animation documentation";
public const string OPEN_AVATAR_CREATOR_DOCUMENTATION = "open avatar creator documentation";
public const string OPEN_OPTIMIZATION_DOCUMENTATION = "open optimization documentation";
public const string SAMPLE_CREATOR_IMPORTED = "Sample creator present imported";
}

public static class Properties
Expand Down
8 changes: 8 additions & 0 deletions Runtime/AvatarCreator.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 25 additions & 0 deletions Runtime/AvatarCreator/AnalyticsRuntimeLoggerExtension.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
using System.Collections.Generic;
using ReadyPlayerMe.Core;
using ReadyPlayerMe.Core.Analytics;

namespace ReadyPlayerMe.AvatarCreator
{
public static class AnalyticsRuntimeLoggerExtension
{
private const string RUN_AVATAR_CREATOR_SAMPLE = "run avatar creator sample";
private const string APP_ID = "app id";

public static void LogAvatarCreatorSample(this IAnalyticsRuntimeLogger _, string appId)
{
if (!CoreSettingsHandler.CoreSettings.EnableAnalytics) return;

#if UNITY_EDITOR
AmplitudeEventLogger.LogEvent(RUN_AVATAR_CREATOR_SAMPLE, new Dictionary<string, object>()
{
{ APP_ID, appId }
});
#endif

}
}
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

96 changes: 96 additions & 0 deletions Runtime/AvatarCreator/AuthManager.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
using System;
using System.Threading.Tasks;
using ReadyPlayerMe.Core;
using UnityEngine;

namespace ReadyPlayerMe.AvatarCreator
{
/// <summary>
/// Provides methods for managing the user's authentication and session.
/// </summary>
public static class AuthManager
{
private const string TAG = nameof(AuthManager);
private static readonly AuthenticationRequests AuthenticationRequests;
private static UserSession userSession;
public static UserSession UserSession => userSession;

public static bool IsSignedIn;
public static bool IsSignedInAnonymously;

public static Action<UserSession> OnSignedIn;
public static Action<UserSession> OnSessionRefreshed;
public static Action OnSignedOut;
public static Action<string> OnSignInError;

static AuthManager()
{
AuthenticationRequests = new AuthenticationRequests(CoreSettingsHandler.CoreSettings.Subdomain);
}

public static async Task LoginAsAnonymous()
{
userSession = await AuthenticationRequests.LoginAsAnonymous();
IsSignedInAnonymously = true;
}

public static void SetUser(UserSession session)
{
userSession = session;
IsSignedIn = true;
OnSignedIn?.Invoke(userSession);
}

public static async void SendEmailCode(string email)
{
await AuthenticationRequests.SendCodeToEmail(email, userSession.Id);
}

public static async Task<bool> LoginWithCode(string otp)
{
try
{
userSession = await AuthenticationRequests.LoginWithCode(otp);
IsSignedIn = true;
OnSignedIn?.Invoke(userSession);
return true;
}
catch (Exception e)
{
OnSignInError?.Invoke(e.Message);
return false;
}
}

public static async void Signup(string email)
{
await AuthenticationRequests.Signup(email, userSession.Id);
}

public static async Task RefreshToken()
{
(string, string) newTokens;
try
{
newTokens = await AuthenticationRequests.RefreshToken(userSession.Token, userSession.RefreshToken);
}
catch (Exception e)
{
SDKLogger.Log(TAG, "Refreshing token failed with error: " + e.Message);
throw;
}

userSession.Token = newTokens.Item1;
userSession.RefreshToken = newTokens.Item2;
OnSessionRefreshed?.Invoke(userSession);
}

public static void Logout()
{
IsSignedIn = false;
IsSignedInAnonymously = false;
userSession = new UserSession();
OnSignedOut?.Invoke();
}
}
}
3 changes: 3 additions & 0 deletions Runtime/AvatarCreator/AuthManager.cs.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading