Avatar System

Quick start
Creating avatar container
Avatar should have place where it can get spawned, so for this move prefab LocalObjectsRoot from ReadyGamesNetwork/Example/Prefabs  to scene.
Below we will need this object to set up AvatarAppController
Creating and set up AvatarAppController
Avatar app controller contains all required references for default UI Implementation.
First you need move prefab AvatarAppController from ReadyGamesNetwork/Example/Prefabs to scene, then fill up references:
On AvatarAppController select Body Size Panel from scene
On AvatarAppController select Local Objects Root Manager from scene
On ClothingStoreManager select Sub Categories Container from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> SubCategories Scroll View  -> Viewport -> Content
On ClothingStoreManager select Items Container from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> Layout -> Items Scroll View  -> Viewport -> Content
On ClothingStoreManager select Items Container Scroll from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> Layout -> Items Scroll View  -> Viewport -> Content
On ClothingStoreManager select Empty Items Placeholder from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> EmptyClothingIcon
On ClothingStoreManager select Look Book Button Parent from scene by this path: ClothingStorePanel -> LookBookPanel -> BottomPanel -> Items Scroll View -> Viewport -> Content
On MaterialEditorReconstructor select Local Objects Root Manager from scene
On CustomThumbnailCreator select Custom Cloths Spawn Point from scene by this path: LocalObjectsRoot -> CustomizationIconManager -> OutfitSpawnPoint
On CustomThumbnailCreator select Custom Clothes Photo Camera from scene by this path: LocalObjectsRoot -> CustomizationIconManager -> CustomClothesCamera
Configuring displaying avatar
First of you need that is Camera for avatar rendering, so create additional camera and position it to make it look on avatar container
If you using default Local Objects Root with default position, set camera position equals to (x: 100, y: 1.6, z: -6.1) and rotation equals to (x: 7.35, y: 0, z: 0)
Also FOV should be 24
​
​
Then add two components on created camera, the first is CameraToRenderTexture and the second is CameraController and set up them like on screenshot bellow
Main Camera equals to character camera and Avatar Object equals to LocalObjectsRoot -> LocalAvatarManager -> AvatarSpawnPoint from the scene if you use default Local Objects Root
For displaying avatar easiest way to use Raw Image, so create one in canvas and add two components on it, the first is RTDisplayScaller and the second is AspectRatioFitter, last thing to display avatar use this code:
Texture2D texture = characterCamera.GetComponent<CameraToRenderTexture>().cameraTexture;
avatarRawImage.texture = texture;
avatarRawImage.GetComponent<RTDisplayScaler>().RescaleContainer(texture.width, texture.height);
characterCamera is the created above camera and avatarRawImage is the created above RawImage respectively
Implementing UI
There is two ways to implement UI for avatar module:
Default prefab panels
Custom prefab panels
Default prefab panels have two variants for portrait and for landscape specific games, you can find them in ReadyGamesNetwork/Example/Prefabs/Panels/Portrait and in ReadyGamesNetwork/Example/Prefabs/Panels/Landscape respectively.
Implementing default prefab panels
Using default prefab panels you also should use default UI panel system called UIRoot.
First you need to create Canvas and setup it like at screenshot below
Then create two child objects, the first named UIRoot and the second named UIPopup
Now move next prefabs under UIRoot:
ColorPalettePanel
ModularCustomizationPanel
MaterialEditorPanel
CreatorDashboardPanel
JoinCreatorProgramPanel
ClothingStorePanel
Then move next prefabs under UIPopup
CurrencyErrorPopUpPanel
BuyTexturePopUp
SaveProfileChangesPopup
JoinCreatorProgramPopUp
BuyItemsPopUpPanel
ColorPickerPopUpPanel
SpinnerPopup
Configuring MaterialEditorPanel
Select Color Pallete Panel reference from scene by this path: UIRoot -> ColorPalletePanel
Select Loading Screen reference from scene by this path: UIPopup -> SpinnerPopup
Configuring ClothingStorePanel
Select Color Pallete Panel reference from scene by this path: UIRoot -> ColorPalletePanel
Select Color Controller reference from scene by this path: AvatarAppController -> ColorController
Select Starting Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Clothing Store Landing Anchor
Select Zoomed In Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Zoomed In Clothing Store Landing Anchor
Select Zoomed in Shoe Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Clothing Store Shoe Landing Anchor
Select Clothes Customization Manager reference from scene by this path: AvatarAppController -> ClothingStoreManager
Configuring ColorPickerPopUpPanel
Select UI Camera reference and select camera which you use for UI displaying
API
Retrieving clothing items
For this, you need to add an ClothingStoreModule in Initialisation. Refer Initialise the RGN SDK.
string firebaseStorageUrl = applicationStore.firebaseStorageURL;
RGNCoreBuilder.AddModule(new ClothingStoreModule(firebaseStorageUrl));
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNClothingStoreData clothingStoreData = await clothingStoreModule.GetItems();
Response:
Return RGNClothingStoreData object, which contains following fields:
List<RGNClothingItem> allItems - list of clothing items correspond current application
List<RGNCustomizedClothingItem> customizedItems - list of customized items created by current user
List<RGNCustomizedClothingItem> allCreatorItems - list of creator items created and published by users
List<TextureDatas> allCreatorTextures - contains info about all creator textures
List<string> ownedTextures - list of creator textures id which user have
List<string> ownedItems - list of clothing item id which user have
List<string> allLookIds - list of look id which user created
int totalLookbookSlot - number of maximum lookbook slots
RGNCurrency lookBookSlotPrice - price to purchase additional lookbook slot
string ftuItemId - item id which can be used to tutorial case (allows user purchase this item for free)
List<RGNExclusiveCollection> exclusiveCollections - list of clothing item exclusive bundles
Purchase clothing items
In order to buy items, it requires to call the following function by passing list of items unique id (List<string>) as a parameter.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyItemData buyItemData = await clothingStoreModule.BuyItems(itemIds);
Response:
Return RGNBuyItemData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
Purchase creator item
In order to buy creator item, it requires to call the following function by passing creator item unique id (string) as a parameter.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemData buyItemData = await clothingStoreModule.BuyCreatorItem(itemId);
Response:
Return RGNBuyCustomizedItemData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
string addedItemId - if purchase is success equals to unique id of purchased creator item
Purchase creator items
Variant of above function which allows to buy list of creator items.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemsData buyItemsData = await clothingStoreModule.BuyCreatorItems(itemIds);
Response:
Return RGNBuyCustomizedItemsData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
List<RGNCustomizedClothingItem> addedItems - if purchase is success contains list of purchased items
Purchase creator textures
In order to buy creator textures, it requires to call the following function by passing list of creator texture unique id (List<string>) as a parameter.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCreatorTexturesData purchaseInfo = await clothingStoreModule.BuyCreatorTextures(itemIds);
Response:
Return RGNBuyCreatorTexturesData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
List<TextureDatas> addedItems - if purchase is success contains list of purchased textures
Purchase customized item
In order to buy customized item, it requires to call the following function by passing customized item with needed customizations (RGNCustomizedClothingItem) as a parameter.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemData purchaseInfo = await clothingStoreModule.BuyCustomizedItem(item);
Response:
Return RGNBuyCustomizedItemData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
string addedItemId - if purchase is success equals to unique id of purchased customized item id
Purchase customized items
Variant of above function which allows buy list of customized items.
API call:
ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemsData purchaseInfo = await clothingStoreModule.BuyCustomizedItems(items);
Response:
Return RGNBuyCustomizedItemsData object, which contains following fields:
bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
List<RGNCurrency> currencies - list of actual user currencies after purchasing
List<RGNCustomizedClothingItem> addedItems - if purchase is success contains list of purchased customized items
​
Last modified 11mo ago